Error Boundaryコンポーネント
fallbackスロットとエラー表示を備えたErrorBoundaryラッパーコンポーネントの構築
「Error Boundaryコンポーネント」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
エラーバウンダリとは
エラーバウンダリはUIの一部をラップする再利用可能なコンポーネントです。内部で発生したエラーを捕捉し、アプリ全体を壊す代わりにフォールバックを表示します。
基本的な考え方
バウンダリはhasErrorフラグを保持します。falseの間は子要素を描画し、エラーが捕捉されるとtrueに切り替えてフォールバックを描画します。
import { ref } from "vue";
const hasError = ref(false);エラーを捕捉する
onErrorCapturedを使ってフラグを設定し、伝播を停止します。これにより、バウンダリがエラーを完全に管理できます。
import { onErrorCaptured } from "vue";
onErrorCaptured((err) => {
hasError.value = true;
return false;
});エラーの詳細を保存する
エラー自体も捕捉しておくと、フォールバックにメッセージを表示したり、再試行を提供したりできます。
const error = ref(null);
onErrorCaptured((err) => {
hasError.value = true;
error.value = err;
return false;
});テンプレートの構造
正常な状態ではデフォルトスロット（子要素）を描画し、エラーが発生した場合はフォールバック用のスロットを描画します。
<template>
<slot v-if="!hasError" />
<slot v-else name="fallback" :error="error" />
</template>デフォルトスロットで子要素を表示する
デフォルトスロットには保護対象のUIを配置します。通常の状態ではバウンダリは見えず、子要素をそのまま通過させます。
<ErrorBoundary>
<RiskyWidget />
</ErrorBoundary>エラー時にフォールバック用スロットを表示する
エラー用のUIには名前付きのfallbackスロットを用意します。スコープ付きスロットのプロップを通じてエラーを受け取れます。
<ErrorBoundary>
<RiskyWidget />
<template #fallback="{ error }">
<p>Something went wrong: {{ error.message }}</p>
</template>
</ErrorBoundary>再試行を追加する
ユーザーが復旧できるようにresetを公開します。メソッドでフラグをクリアし、子要素を再描画します。
function reset() {
hasError.value = false;
error.value = null;
}フォールバックで再試行する
スコープ付きスロットを通じてresetを渡し、フォールバック側で「もう一度試す」ボタンを提供できるようにします。
<slot v-else name="fallback" :error="error" :reset="reset" />デフォルトのフォールバック
フォールバックスロットに適切なデフォルトコンテンツを用意しておくと、カスタムフォールバックが指定されていなくても境界が機能します。
<slot name="fallback" :error="error">
<p>An error occurred.</p>
</slot>境界が重要な理由
境界がないと、1つのウィジェットの失敗によってビュー全体がクラッシュする可能性があります。境界は失敗を分離するため、アプリの残りの部分は動作し続けます。これは、レジリエンスを高める重要なパターンです。
クイックチェック
エラーバウンダリは、何をレンダリングするかをどのように決定しますか？
まとめ
エラーバウンダリを構築しました。hasError ref、これを設定して false を返す onErrorCaptured、子要素用のデフォルトスロット、そしてエラー発生時に表示するフォールバックスロット（エラーとリセット機能付き）を用意し、失敗をアプリの他の部分から分離しました。
よくある質問
「Error Boundaryコンポーネント」レッスンは無料ですか？
はい。「Error Boundaryコンポーネント」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「Error Boundaryコンポーネント」で何を学びますか？
fallbackスロットとエラー表示を備えたErrorBoundaryラッパーコンポーネントの構築 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「Error Boundaryコンポーネント」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- onErrorCapturedライフサイクルフック
- Error Boundaryコンポーネント
- グローバルエラー向けapp.config.errorHandler
- Composableでの非同期エラー処理