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

errorCallback() は、Lightning Web Components 独自のフックです。これを実装すると、ツリー内のすべての下位コンポーネントのエラーを捕捉するエラー境界コンポーネントを作成できます。これは、下位のライフサイクルフックで発生したエラーや、HTML テンプレートでイベントハンドラが宣言されたときに発生したエラーを捕捉します。エラー境界コンポーネントをコーディングすると、スタック情報を記録し、代替ビューを表示して、発生した出来事と次に実行すべきアクションをユーザに通知できます。

作成したエラー境界コンポーネントは、アプリケーション全体で再利用できます。これらのエラー境界を定義する場所は、自分で決定します。アプリケーション全体をラップすることも、個々のコンポーネントごとにラップすることもできます。ほとんどの場合、ご使用のアーキテクチャは、その間のどこかに当てはまります。問題の発生をどこでユーザに通知するかについて考えます。

1<!-- boundary.html -->
2<template>
3  <template lwc:if={error}>
4    <error-view error={error} info={stack}></error-view>
5  </template>
6  <template lwc:else>
7    <healthy-view></healthy-view>
8  </template>
9</template>

1// boundary.js
2import { LightningElement } from "lwc";
3export default class Boundary extends LightningElement {
4  error;
5  stack;
6  errorCallback(error, stack) {
7    this.error = error;
8  }
9}

error 引数は JavaScript ネイティブエラーオブジェクト、stack 引数は文字列です。

テンプレートで、lwc:[if|elseif|else] を使用する必要はありません。たとえば、単一のコンポーネントテンプレートを定義するとします。このコンポーネントがエラーをスローした場合、フレームワークは、再表示時に errorCallback をコールして、コンポーネントをマウント解除します。

1<!-- boundary.html -->
2<template>
3  <my-one-and-only-view></my-one-and-only-view>
4</template>

関連トピック

ライフサイクルフロー

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。