エラーの処理

Lightning Web コンポーネント (LWC) を操作していると、さまざまな種類のエラーが発生する可能性があります。さまざまなエラーの種類、エラーの伝達方法、エラーの処理方法について説明します。

LWC で発生する最も一般的なエラーは、JavaScript エラー、Lightning データサービスエラー、Apex エラーです。

LWC は、エラーの種類の名前 (ReferenceErrorSyntaxError など) を返す、ランタイムエラーの標準 Error JavaScript オブジェクトを使用します。throw を使用して例外をスローし、try-catch ブロックを使用して処理します。

たとえば、このケースでは ReferenceError を取得します。

JavaScript エラーは同期コードまたは非同期コードでスローされます。同期コードは、次のように行ごとに実行されます。

エラーがスローされると、エラーに続くコードの実行に失敗します。

Lightning データサービス (LDS) は、lightning/ui*Api モジュールのようにワイヤーアダプターを介してデータを管理します。ワイヤーサービスまたは JavaScript Promise をコールするコードを作成する場合、非同期コードを操作します。「Lightning データサービスでのエラーの処理」を参照してください。

Apex を使用してデータを取得する場合、Apex コードからのエラーや例外が発生する可能性があります。Apex コードでエラーが発生した場合、try-catch ブロックを使用して Apex のエラーを処理できます。このようにしないと、エラーは処理されず、クライアントに直接スローされます。組み込み Apex 例外を処理したり、独自のカスタム例外を作成したりできます。「Apex からのエラーの処理」を参照してください。

コードでエラーがスローされたが処理されない場合、エラーは親コンポーネントにスローされます。親コンポーネントでもエラーが処理されないと、エラーは境界アプリケーション (Lightning Experience やエクスペリエンスビルダーサイトなど) にスローされます。エラーメッセージやスタック追跡で「コンポーネントエラーが発生しました。」や「問題が発生しました」というタイトルのポップアップが表示されます。また、try-catch ブロックを使用して、より適切にエラーを処理することもできます。

非同期コードからのエラーの処理方法は若干異なります。コンポーネントでエラーが処理されない場合、親コンポーネントにスローされます。親コンポーネントでエラーが処理されない場合、コンソールのブラウザーに直接スローされます。

次の例は、同期コードの操作時と非同期コードの操作時にどのようにエラーが伝達されるのかを示しています。

同期の例では、Lightning Experience またはエクスペリエンスビルダーサイトの境界アプリケーションでエラーがスローされます。非同期の例では、ブラウザーコンソールでエラーがスローされます。

エラーの処理方法によっては、ユーザーインターフェースにエラーを表示できます。ユーザーがエラーを効果的に修正できるように、是正措置種が簡潔に説明されている有用なメッセージを含めます。通常、LDS または Apex からの有用なメッセージを表示したり、独自のメッセージを表示したりできます。また、アプリケーション全体で一貫性のあるエラーを表示することで、ユーザーは想定される内容を把握できるようになります。

lwc-recipes は、ldsUtils モジュールを使用して異なるエラー構造を処理しながら、errorPanel コンポーネントを使用して一貫性のあるエラーを表示するアプリケーションです。

前のセクションで説明されているように、未対応のエラーはデフォルトで境界アプリケーションまたはブラウザーに伝達されます。throw キーワードまたはカスタムイベントを使用して伝達できるカスタムエラーをスローできます。Lightning Message Service や pubsub モジュールを使用することもできます。

通常、子コンポーネントからエラーを伝達してから、親コンポーネントで処理します。

「エラーの表示」で説明されているように、LDS または Apex からの有用なメッセージを表示したり、独自のメッセージを表示したりできます。エラーを表示する一般的な方法は、トーストを使用することです。次の例では、throw キーワードを使用してトースト通知でカスタムエラーを表示します。lwc-recipes リポジトリの ldsUtils モジュールを使用して、エラーをエラーメッセージの文字列に変換します。

また、LDS または Apex から返されるエラーを表示することもできます。

lwc-recipes リポジトリでは、LDS からのエラーがトースト通知で表示されます。lds* で始まる例 (ldsCreateRecord など) を探します。

カスタムイベントは、一貫した方法で親コンポーネントで処理する必要がある複数の子コンポーネントを操作する場合に役立ちます。子コンポーネントがカスタムイベントをディスパッチし、親コンポーネントがそれを処理します。

子コンポーネントにカスタムイベントをディスパッチする useCustomEvent() 関数があるとします。

カスタムイベント名は error です。親コンポーネントで、onerror イベントハンドラー名を使用してカスタムエラーを処理します。

親コンポーネントは、エラーの詳細と共にアラートを表示します。

関連トピック