Skip to main content

サーバーエラーの処理

学習の目的

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

  • プロパティを結び付けている場合に発生したサーバーエラーの処理方法を説明する。
  • 関数を結び付けている場合に発生したサーバーエラーの処理方法を説明する。
  • 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}</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}</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-record-form

レコードを参照する

含める項目とその位置はユーザーが決定します。また、標準の表示を使用することも、項目ごとに独自の表示を設定することもできます。

lightning-record-view-form

レコードを編集する

含める項目とその位置はユーザーが決定します。また、標準の表示を使用することも、項目ごとに独自の表示と値を設定することもできます。

lightning-record-edit-form

1 つ以上のレコードのデータを参照する

LDS ワイヤーアダプター: getRecord または getRecords

1 レコードを作成、編集、または削除する

LDS 関数: createRecordupdateRecord、または deleteRecord

結合可能だが、操作は独立したトランザクションで実行される

複数のレコードを作成、編集、または削除する

命令的な Apex コール

1 つ以上のレコードのメタデータを参照する

LDS ワイヤーアダプター: getObjectInfo または getObjectInfos

関連リストのメタデータまたはレコードを参照する

LDS ワイヤーアダプター: getRelatedListInfo および getRelatedListRecords (またはバッチバージョン)

リストビューのメタデータを参照する

LDS ワイヤーアダプター: getListInfoByName (またはバッチバージョン)

上記のいずれにも該当しないユースケース

@wire を指定して、または命令的に Apex をコールする

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

サーバーエラーの処理

データの操作方法

サーバーエラーへのアクセス方法

LDS ワイヤーアダプターまたは Apex メソッドを使用し、プロパティをデコレートする

reduceErrors を使用して、結び付けられたプロパティの decoratedProperty.error に返されたエラーを処理する

LDS ワイヤーアダプターまたは Apex メソッドを使用し、関数をデコレートする

reduceErrors を使用して、結び付けられた関数で受け取ったオブジェクトパラメーターで返されたエラーを処理する

decoratedFunction({data, error}) {...}

LDS ワイヤー関数または Apex メソッドを命令的に呼び出す

reduceErrors を使用して、catch メソッドのコールバック関数のパラメーターとして受け取ったエラーを処理する

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

まとめ

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

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

リソース

Salesforce ヘルプで Trailhead のフィードバックを共有してください。

Trailhead についての感想をお聞かせください。[Salesforce ヘルプ] サイトから新しいフィードバックフォームにいつでもアクセスできるようになりました。

詳細はこちら フィードバックの共有に進む