サーバーエラーの処理

学習の目的

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

• プロパティを結び付けている場合に発生したサーバーエラーの処理方法を説明する。
  
• 関数を結び付けている場合に発生したサーバーエラーの処理方法を説明する。
  
• LDS 関数または Apex を命令的にコールした場合に発生したサーバーエラーの処理方法を説明する。
  
• 特定の使用事例に推奨されるデータの操作方法とエラーの処理方法を挙げる。
  

メモ

日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

Lightning Web コンポーネントのサーバーエラー処理

LDS ワイヤーアダプター、LDS 関数、Apex コールで発生するエラーには特定の構造があります。エラーに関する情報を取得するには、JavaScript コードでエラー応答を処理します。その後でエラーの内容をユーザーに表示できます。

開発者は、エラーパネル、トーストメッセージなど、ユーザーへのエラー表示方法を決める必要があります。学習目的のため、このモジュールの例では次のようにマークアップで errors プロパティを参照してエラーを表示します。

errors.html

<template>
    <template if:true={errors}>
        <p>Errors: {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 getContactsBornAfter from '@salesforce/apex/ContactController.getContactsBornAfter';
export default class WireApexProperty extends LightningElement {
    @api minBirthDate;
    @wire(getContactsBornAfter, { birthDate: '$minBirthDate' })
    contacts;
    get errors() {
        return (this.contacts.error) ?
            reduceErrors(this.contacts.error) : [];
    }
}

コードのポイント:

• 行 2: reduceErrors ヘルパー関数を ldsUtils モジュールからインポートします。(この単元で後ほどプロジェクトに ldsUtils モジュールを追加します)。
  
• 行 6 ～ 7: contacts プロパティを @wire でデコレートして getContactsBornAfter 関数に結び付けます。
  
• 行 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 getContactsBornAfter from '@salesforce/apex/ContactController.getContactsBornAfter';
export default class WireApexFunction extends LightningElement {
    @api minBirthDate;
    errors;
    @wire(getContactsBornAfter, { birthDate: '$minBirthDate' })
    wiredContacts({data, error}) {
        if (error)
            this.errors = reduceErrors(error);
    }
}

コードのポイント:

• 行 2: reduceErrors ヘルパー関数を ldsUtils モジュールからインポートします (wireApexProperty の例と同様)。
  
• 行 3: getContactsBornAfter 関数を ContactController クラスからインポートします。
  
• 行 6: errors プロパティを定義します。
  
• 行 7 ～ 8: wiredContacts 関数を @wire でデコレートして getContactsBornAfter 関数に結び付けます。
  
• 行 10: 結び付けられた関数がエラーを受け取るたびに、reduceErrors ヘルパー関数を使用してエラーの形式を設定します。この関数は発生したすべてのエラーの配列を返します。
  

命令的に関数をコールする場合のエラー処理

LDS 関数または Apex メソッドを命令的にコールする場合、サーバーはエラーを catch メソッドのコールバック関数へのパラメーターとして返します。

callApexImperative.js

import { LightningElement, api, wire } from 'lwc';
import { reduceErrors } from 'c/ldsUtils';
import getContactsBornAfter from '@salesforce/apex/ContactController.getContactsBornAfter';
export default class CallApexImperative extends LightningElement {
    @api minBirthDate;
    errors;
    handleButtonClick() {
        getContactsBornAfter({
            birthDate: this.minBirthDate
        })
            .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: getContactsBornAfter 関数を命令的に呼び出します。関数は promise を返します。
  
• 行 11 ～ 13: promise が解決された場合、contacts を処理します。
  
• 行 14 ～ 16: promise が却下された場合、reduceErrors ヘルパー関数を使用して受け取ったエラーの形式を設定し、errors プロパティに保存します。
  

accountList コンポーネントのエラー処理

作成した accountList コンポーネントにエラー処理を追加しましょう。

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

   <template if:true={errors}>
       <p>Errors: {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 コンポーネントでデータを操作するとき、エラー処理が異なる場合があります。エラーへのアクセス方法はデータの操作方法に応じて異なります。

サーバーエラーの処理

functionToInvoke()
.then(data => {...})
.catch(error => {...});

まとめ

このモジュールでは、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 コンポーネントのエラー処理のベストプラクティス)