サーバエラーの処理
学習の目的
この単元を完了すると、次のことができるようになります。
- プロパティを結び付けている場合に発生したサーバエラーの処理方法を説明する。
- 関数を結び付けている場合に発生したサーバエラーの処理方法を説明する。
- LDS 関数または Apex を命令的にコールした場合に発生したサーバエラーの処理方法を説明する。
- 特定の使用事例に推奨されるデータの操作方法とエラーの処理方法を挙げる。
Lightning Web コンポーネントのサーバエラー処理
LDS ワイヤアダプタ、LDS 関数、Apex コールで発生するエラーには特定の構造があります。エラーに関する情報を取得するには、JavaScript コードでエラー応答を処理します。その後でエラーの内容をユーザに表示できます。
開発者は、エラーパネル、トーストメッセージなど、ユーザへのエラー表示方法を決める必要があります。学習目的のため、このモジュールの例では次のようにマークアップで errors
プロパティを参照してエラーを表示します。
errors.html
<template> <template if:true={errors}> <p>{errors}</p> </template> </template>
JavaScript でのサーバエラーの処理方法は、Salesforce データの操作方法に応じて異なります。ここでは 3 つの例 (結び付けられたプロパティ、結び付けられた関数、命令的な関数コール) を見てみましょう。
結び付けられたプロパティのエラー処理
@wire
を使用してプロパティをデコレートしている場合、エラーは error
プロパティ属性でアクセスできます。これは @wire
を LDS ワイヤアダプタまたは Apex に使用している場合に有効です。
wireApexProperty.js
import { LightningElement, api, wire } from 'lwc'; import { reduceErrors } from 'c/ldsUtils'; import getRelatedContacts from '@salesforce/apex/AccountController.getRelatedContacts'; export default class WireApexProperty extends LightningElement { @api recordId; @wire(getRelatedContacts, { accountId: '$recordId' }) contacts; get errors() { return (this.contacts.error) ? reduceErrors(this.contacts.error) : []; } }
コードのポイント:
- 行 2:
reduceErrors
ヘルパー関数をldsUtils
モジュールからインポートします(この単元で後ほどプロジェクトにldsUtils
モジュールを追加します)。 - 行 6 ~ 7:
contacts
プロパティを@wire
でデコレートしてgetRelatedContacts
関数に結び付けます。 - 行 8:
errors
という名前のプロパティを作成する getter 関数を定義します。this.contacts.error
が変わるたびに、この getter はerrors
プロパティの値を更新します。この動作はリアクティビティによって生じます。 - 行 10: getter で
reduceErrors
ヘルパー関数を使用してthis.contacts.error
の形式を設定します。この関数はエラーオブジェクトを受け取り、発生したすべてのエラーメッセージの配列を返します。
結び付けられた関数のエラー処理
@wire
を使用して関数をデコレートすると、その関数はパラメータとしてエラー (エラーがあった場合) を含むオブジェクトを受け取ります。これは @wire
を LDS ワイヤアダプタまたは Apex に使用している場合に適用されます。
wireApexFunction.js
import { LightningElement, api, wire } from 'lwc'; import { reduceErrors } from 'c/ldsUtils'; import getRelatedContacts from '@salesforce/apex/AccountController.getRelatedContacts'; export default class WireApexFunction extends LightningElement { @api recordId; errors; @wire(getRelatedContacts, { accountId: '$recordId' }) wiredContacts({data, error}) { if (error) this.errors = reduceErrors(error); } }
コードのポイント:
- 行 2:
reduceErrors
ヘルパー関数をldsUtils
モジュールからインポートします (wireApexProperty の例と同様)。 - 行 3:
getRelatedContacts
関数をAccountController
クラスからインポートします。 - 行 6:
errors
プロパティを定義します。 - 行 7 ~ 8:
wiredContacts
関数を@wire
でデコレートしてgetRelatedContacts
関数に結び付けます。 - 行 10: 結び付けられた関数がエラーを受け取るたびに、
reduceErrors
ヘルパー関数を使用してエラーの形式を設定します。この関数は発生したすべてのエラーの配列を返します。
命令的に関数をコールする場合のエラー処理
LDS 関数または Apex メソッドを命令的にコールする場合、サーバはエラーを catch メソッドのコールバック関数へのパラメータとして返します。
callApexImperative.js
import { LightningElement, api, wire } from 'lwc'; import { reduceErrors } from 'c/ldsUtils'; import getRelatedContacts from '@salesforce/apex/AccountController.getRelatedContacts'; export default class CallApexImperative extends LightningElement { @api recordId; errors; handleButtonClick() { getRelatedContacts({ accountId: '$recordId' }) .then(contacts => { // code to execute if the promise is resolved }) .catch(error => { this.errors = reduceErrors(error); // code to execute if the promise is rejected }); } }
コードのポイント:
- 行 2:
reduceErrors
ヘルパー関数をインポートします。 - 行 6:
errors
という名前のプロパティを定義します。 - 行 8:
getRelatedContacts
関数を命令的に呼び出します。関数は promise を返します。 - 行 11 ~ 13: promise が解決された場合、
contacts
を処理します。 - 行 14 ~ 16: promise が却下された場合、
reduceErrors
ヘルパー関数を使用して受け取ったエラーの形式を設定し、errors
プロパティに保存します。
accountList コンポーネントのエラー処理
作成した accountList コンポーネントにエラー処理を追加しましょう。
- accountList.html ファイルの
lightning-datatable
が含まれる<template>
の後に次のコードを追加します。<template if:true={errors}> <p>{errors}</p> </template>
ldsUtils
コンポーネントを LWC recipes (LWC レシピ) からコピーし、プロジェクトの force-app/main/default/lwc フォルダに含めます。このコンポーネントにはreduceErrors
関数が含まれています。- accountList.js の先頭近くに
reduceErrors
関数をインポートします。import { reduceErrors } from 'c/ldsUtils';
- accountList.js に、
errors
プロパティを定義する次の getter を挿入します。get errors() { return (this.accounts.error) ? reduceErrors(this.accounts.error) : []; }
- エラー処理をテストするには、(AccountController.cls の)
getAccounts
メソッドの本文を (一時的に) コメントにし、次のコードをその場所に追加して強制的にエラーを発生させます。throw new AuraHandledException('Forced error');
- 編集した 3 つのファイル (accountList.html、accountList.js、AccountController.cls) を保存します。
- プロジェクトファイルを (
force-app/main/default
から) リリースします。 - Trailhead Playground がまだ開いていない場合は開きます。
- 結果を確認するには、[Working with Data (データの操作)] ページを更新します。
ヒント: Lightning データサービスでは結果がキャッシュされるため、強制的なエラーの動作を表示するには事前にキャッシュのクリアが必要になる場合があります。
概要
Lightning Web コンポーネントで Salesforce データを操作する複数の方法を理解できました。状況によって、あるソリューションが他のソリューションより適していることがあります。次の表には使用事例別に推奨ソリューションがまとめられています。
Salesforce データの操作の使用事例
使用事例 |
推奨ソリューション |
メモ |
---|---|---|
レイアウトや項目のリストを指定してレコードを表示または編集する |
lightning-record-form |
|
カスタムフォームレイアウトまたはレコードデータのカスタム表示を使用してレコードを表示する |
lightning-record-view-form |
|
カスタムフォームレイアウト、レコードデータのカスタム表示、または事前入力された項目値を使用してレコードを編集する |
lightning-record-edit-form |
|
メタデータを参照する、1 レコードのデータを参照する |
LDS ワイヤアダプタ |
結合可能だが、操作は独立したトランザクションで実行される |
1 レコードを作成、編集、または削除する |
LDS 関数 |
結合可能だが、操作は独立したトランザクションで実行される |
複数レコードを参照する |
@wire を指定した Apex コール |
Apex メソッドに cacheable=true アノテーションを付加する |
1 回の呼び出しで複数のレコードを参照する、複数のレコードを変更する |
命令的な Apex コール |
参照の場合、Apex メソッドに cacheable=true アノテーションを付加する |
Lightning Web コンポーネントでデータを操作するとき、エラー処理が異なる場合があります。エラーへのアクセス方法はデータの操作方法に応じて異なります。
サーバエラーの処理
データの操作方法 |
サーバエラーへのアクセス方法 |
---|---|
LDS ワイヤアダプタまたは Apex メソッドを使用し、プロパティをデコレートする |
reduceErrors を使用して、結び付けられたプロパティの decoratedProperty.error に返されたエラーを処理する |
LDS ワイヤアダプタまたは Apex メソッドを使用し、関数をデコレートする |
reduceErrors を使用して、結び付けられた関数で受け取ったオブジェクトパラメータで返されたエラーを処理するdecoratedFunction({data, error}) {...} |
LDS ワイヤ関数または Apex メソッドを命令的に呼び出す |
reduceErrors を使用して、catch メソッドのコールバック関数のパラメータとして受け取ったエラーを処理するfunctionToInvoke() |
まとめ
このモジュールでは、Lightning Web コンポーネントで Salesforce データを操作するさまざまな方法を学習しました。方法ごとのメリットとデメリット、それぞれの方法が推奨される状況、各ソリューションの実装方法を習得しました。Salesforce データの操作方法に基づいて Lightning Web コンポーネントでエラーを処理する方法も理解しました。
Lightning Web サービスでの Salesforce データの操作についてさらに学習するには、このモジュールの「リソース」を参照してください。また、他の例やそれらを実装するコードについては、「Quick Start: Explore the Recipes Sample App」(クイックスタート: Recipes (レシピ) サンプルアプリケーションの探索) も参照してください。