サーバエラーの処理

学習の目的

この単元を完了すると、次のことができるようになります。

• プロパティを結び付けている場合に発生したサーバエラーの処理方法を説明する。
• 関数を結び付けている場合に発生したサーバエラーの処理方法を説明する。
• 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 の形式を設定します。この関数はエラーオブジェクトを受け取り、発生したすべてのエラーメッセージの配列を返します。

メモ

この例の reduceErrors ヘルパー関数は LWC Recipes (LWC レシピ) サンプルアプリケーションの ldsUtils モジュールから取得されています。LWC Recipes (LWC レシピ) には、Lightning Web コンポーネントとして実装される一般的なパターンのダイジェストしやすい例が含まれています。自由に ldsUtils モジュールをプロジェクトにコピーし、reduceErrors 関数を使用してください。

結び付けられた関数のエラー処理

@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 コンポーネントにエラー処理を追加しましょう。

1. accountList.html ファイルの lightning-datatable が含まれる <template> の後に次のコードを追加します。
   

   <template if:true={errors}>
       <p>{errors}</p>
   </template>

2. ldsUtils コンポーネントを LWC recipes (LWC レシピ) からコピーし、プロジェクトの force-app/main/default/lwc フォルダに含めます。このコンポーネントには reduceErrors 関数が含まれています。
3. accountList.js の先頭近くに reduceErrors 関数をインポートします。
   

   import { reduceErrors } from 'c/ldsUtils';

4. accountList.js に、errors プロパティを定義する次の getter を挿入します。
   

   get errors() {
       return (this.accounts.error) ?
           reduceErrors(this.accounts.error) : [];
   }

5. エラー処理をテストするには、(AccountController.cls の) getAccounts メソッドの本文を (一時的に) コメントにし、次のコードをその場所に追加して強制的にエラーを発生させます。
   

   throw new AuraHandledException('Forced error');

6. 編集した 3 つのファイル (accountList.html、accountList.js、AccountController.cls) を保存します。
7. プロジェクトファイルを (force-app/main/default から) リリースします。
8. Trailhead Playground がまだ開いていない場合は開きます。
9. 結果を確認するには、[Working with Data (データの操作)] ページを更新します。
   ヒント: Lightning データサービスでは結果がキャッシュされるため、強制的なエラーの動作を表示するには事前にキャッシュのクリアが必要になる場合があります。

概要

Lightning Web コンポーネントで Salesforce データを操作する複数の方法を理解できました。状況によって、あるソリューションが他のソリューションより適していることがあります。次の表には使用事例別に推奨ソリューションがまとめられています。

Salesforce データの操作の使用事例

Lightning Web コンポーネントでデータを操作するとき、エラー処理が異なる場合があります。エラーへのアクセス方法はデータの操作方法に応じて異なります。

サーバエラーの処理

まとめ

このモジュールでは、Lightning Web コンポーネントで Salesforce データを操作するさまざまな方法を学習しました。方法ごとのメリットとデメリット、それぞれの方法が推奨される状況、各ソリューションの実装方法を習得しました。Salesforce データの操作方法に基づいて Lightning Web コンポーネントでエラーを処理する方法も理解しました。

Lightning Web サービスでの Salesforce データの操作についてさらに学習するには、このモジュールの「リソース」を参照してください。また、他の例やそれらを実装するコードについては、「Quick Start: Explore the Recipes Sample App」(クイックスタート: Recipes (レシピ) サンプルアプリケーションの探索) も参照してください。

リソース

• Lightning Web Components Developer Guide (Lightning Web コンポーネント開発者ガイド): Handle Errors in Lightning Data Service (Lightning データサービスでのエラー処理)
• ブログ: Error Handling Best Practices for Lightning Web Components (Lightning Web コンポーネントのエラー処理のベストプラクティス)