|
1 | 1 | ---
|
2 | 2 | id: error-boundaries
|
3 |
| -title: Error Boundaries |
| 3 | +title: Error Boundary |
4 | 4 | permalink: docs/error-boundaries.html
|
5 | 5 | ---
|
6 | 6 |
|
7 | 7 | かつて、コンポーネント内で発生した JavaScript エラーは React の内部状態を破壊し、次のレンダリングで[不可解な](https://github.com/facebook/react/issues/4026) [エラーを](https://github.com/facebook/react/issues/6895) [引き起こして](https://github.com/facebook/react/issues/8579)いました。このようなエラーはアプリケーションコード中のどこか前の段階で発生したエラーによって引き起こされますが、React はエラーをコンポーネント内で適切に処理する方法を提供していなかったため回復できませんでした。
|
8 | 8 |
|
9 | 9 |
|
10 |
| -## Error Boundaries とは |
| 10 | +## Error Boundary とは |
11 | 11 |
|
12 | 12 | UI の一部に JavaScript エラーがあってもアプリ全体が壊れてはいけません。React ユーザーがこの問題に対応できるように、React 16 では “error boundary” という新しい概念を導入しました。
|
13 | 13 |
|
14 |
| -Error Boundaries は**自身の子コンポーネントツリーで発生した JavaScript エラーをキャッチ**し、**エラーを記録**し、クラッシュしたコンポーネントツリーの代わりに**フォールバック用の UI を表示**する React コンポーネントです。Error Boundaries は配下のツリー全体のレンダリング中、ライフサイクルメソッド内、およびコンストラクタ内で発生したエラーをキャッチします。 |
| 14 | +Error Boundary は**自身の子コンポーネントツリーで発生した JavaScript エラーをキャッチ**し、**エラーを記録**し、クラッシュしたコンポーネントツリーの代わりに**フォールバック用の UI を表示**する React コンポーネントです。Error Boundary は配下のツリー全体のレンダリング中、ライフサイクルメソッド内、およびコンストラクタ内で発生したエラーをキャッチします。 |
15 | 15 |
|
16 | 16 | > 補足
|
17 | 17 | >
|
18 |
| -> Error Boundaries は以下のエラーをキャッチ**しません**: |
| 18 | +> Error Boundary は以下のエラーをキャッチ**しません**: |
19 | 19 | >
|
20 | 20 | > * イベントハンドラ([詳細](#how-about-event-handlers))
|
21 | 21 | > * 非同期コード(例:`setTimeout` や `requestAnimationFrame` のコールバック)
|
22 | 22 | > * サーバーサイドレンダリング
|
23 |
| -> * (子コンポーネントではなく)Error Boundaries 自身がスローしたエラー |
| 23 | +> * (子コンポーネントではなく)Error Boundary 自身がスローしたエラー |
24 | 24 |
|
25 |
| -クラスコンポーネントに、ライフサイクルメソッドの [`static getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror) か [`componentDidCatch()`](/docs/react-component.html#componentdidcatch) のいずれか(または両方)を定義すると、Error Boundaries になります。`static getDerivedStateFromError()` はエラーがスローされた後にフォールバック UI をレンダリングするために使用します。 `componentDidCatch()` はエラー情報をログに記録するために使用します。 |
| 25 | +クラスコンポーネントに、ライフサイクルメソッドの [`static getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror) か [`componentDidCatch()`](/docs/react-component.html#componentdidcatch) のいずれか(または両方)を定義すると、Error Boundary になります。`static getDerivedStateFromError()` はエラーがスローされた後にフォールバック UI をレンダリングするために使用します。 `componentDidCatch()` はエラー情報をログに記録するために使用します。 |
26 | 26 |
|
27 | 27 | ```js{7-10,12-15,18-21}
|
28 | 28 | class ErrorBoundary extends React.Component {
|
@@ -60,29 +60,29 @@ class ErrorBoundary extends React.Component {
|
60 | 60 | </ErrorBoundary>
|
61 | 61 | ```
|
62 | 62 |
|
63 |
| -Error Boundaries はコンポーネントに対して JavaScript の `catch {}` ブロックのように動作します。Error Boundaries になれるのはクラスコンポーネントだけです。実用上、一度だけ Error Boundaries を定義してそれをアプリケーションの至るところで使用することがよくあります。 |
| 63 | +Error Boundary はコンポーネントに対して JavaScript の `catch {}` ブロックのように動作します。Error Boundary になれるのはクラスコンポーネントだけです。実用上、一度だけ Error Boundary を定義してそれをアプリケーションの至るところで使用することがよくあります。 |
64 | 64 |
|
65 |
| -**Error Boundaries は配下のツリー内のコンポーネントで発生したエラーのみをキャッチする**ことに注意してください。Error Boundaries は自身で起こるエラーをキャッチできません。Error Boundaries がエラーメッセージのレンダリングに失敗した場合、そのエラーは最も近い上位の Error Boundaries に伝搬します。この動作もまた、JavaScript の catch {} ブロックの動作と似ています。 |
| 65 | +**Error Boundary は配下のツリー内のコンポーネントで発生したエラーのみをキャッチする**ことに注意してください。Error Boundary は自身で起こるエラーをキャッチできません。Error Boundary がエラーメッセージのレンダリングに失敗した場合、そのエラーは最も近い上位の Error Boundary に伝搬します。この動作もまた、JavaScript の catch {} ブロックの動作と似ています。 |
66 | 66 |
|
67 | 67 | ## ライブデモ
|
68 | 68 |
|
69 |
| -[React 16](/blog/2017/09/26/react-v16.0.html) で [Error Boundaries を宣言して利用する例](https://codepen.io/gaearon/pen/wqvxGa?editors=0010)を確認してください。 |
| 69 | +[React 16](/blog/2017/09/26/react-v16.0.html) で [Error Boundary を宣言して利用する例](https://codepen.io/gaearon/pen/wqvxGa?editors=0010)を確認してください。 |
70 | 70 |
|
71 | 71 |
|
72 |
| -## Error Boundaries を配置すべき場所 |
| 72 | +## Error Boundary を配置すべき場所 |
73 | 73 |
|
74 |
| -Error Boundaries の粒度はあなた次第です。サーバサイドフレームワークがクラッシュを処理する際によく見られるように、最上位のルートコンポーネントをラップしてユーザーに “Something went wrong” メッセージを表示してもいいでしょう。各ウィジェットを個別にラップしてアプリケーションの残りの部分をクラッシュから守るのもいいでしょう。 |
| 74 | +Error Boundary の粒度はあなた次第です。サーバサイドフレームワークがクラッシュを処理する際によく見られるように、最上位のルートコンポーネントをラップしてユーザーに “Something went wrong” メッセージを表示してもいいでしょう。各ウィジェットを個別にラップしてアプリケーションの残りの部分をクラッシュから守るのもいいでしょう。 |
75 | 75 |
|
76 | 76 |
|
77 | 77 | ## エラーがキャッチされなかった場合の新しい動作
|
78 | 78 |
|
79 |
| -この変更には重要な意味があります。 **React 16 から、どの Error Boundaries でもエラーがキャッチされなかった場合に React コンポーネントツリー全体がアンマウントされるようになりました。** |
| 79 | +この変更には重要な意味があります。 **React 16 から、どの Error Boundary でもエラーがキャッチされなかった場合に React コンポーネントツリー全体がアンマウントされるようになりました。** |
80 | 80 |
|
81 | 81 | この決定については議論がありましたが、我々の経験上、壊れた UI をそのまま表示しておくことは、完全に削除してしまうよりももっと悪いことです。例えば、Messenger のような製品において壊れた UI を表示したままにしておくと、誰かが誤って別の人にメッセージを送ってしまう可能性があります。同様に、支払いアプリで間違った金額を表示することは、何も表示しないよりも悪いことです。
|
82 | 82 |
|
83 |
| -この変更のため、React 16 に移行すると、これまで気付かれていなかったアプリケーションの既存の不具合が明らかになることでしょう。Error Boundaries を追加することで、問題が発生したときのユーザー体験を向上できます。 |
| 83 | +この変更のため、React 16 に移行すると、これまで気付かれていなかったアプリケーションの既存の不具合が明らかになることでしょう。Error Boundary を追加することで、問題が発生したときのユーザー体験を向上できます。 |
84 | 84 |
|
85 |
| -例えば、Facebook Messenger はサイドバー、情報パネル、会話ログ、メッセージ入力欄といったコンテンツを個別の Error Boundaries でラップしています。これらの UI エリアの一部のコンポーネントがクラッシュしても、残りの部分はインタラクティブなままです。 |
| 85 | +例えば、Facebook Messenger はサイドバー、情報パネル、会話ログ、メッセージ入力欄といったコンテンツを個別の Error Boundary でラップしています。これらの UI エリアの一部のコンポーネントがクラッシュしても、残りの部分はインタラクティブなままです。 |
86 | 86 |
|
87 | 87 | また、本番環境で発生したキャッチされなかった例外について知って修正できるように、JS エラー報告サービスを利用(もしくは自身で構築)することもお勧めします。
|
88 | 88 |
|
@@ -123,13 +123,13 @@ try {
|
123 | 123 | <Button />
|
124 | 124 | ```
|
125 | 125 |
|
126 |
| -Error boundaries は React の宣言型という性質を保持しつつ、期待通りの動作をします。例えば、`componentDidUpdate` メソッドで発生したエラーがツリー内のどこか深い場所にある `setState` によって引き起こされていた場合でも、最も近い Error boundaries にそのことが正しく伝播します。 |
| 126 | +Error Boundary は React の宣言型という性質を保持しつつ、期待通りの動作をします。例えば、`componentDidUpdate` メソッドで発生したエラーがツリー内のどこか深い場所にある `setState` によって引き起こされていた場合でも、最も近い Error Boundary にそのことが正しく伝播します。 |
127 | 127 |
|
128 | 128 | ## イベントハンドラについて
|
129 | 129 |
|
130 |
| -Error boundaries はイベントハンドラ内で発生したエラーをキャッチ**しません**。 |
| 130 | +Error Boundary はイベントハンドラ内で発生したエラーをキャッチ**しません**。 |
131 | 131 |
|
132 |
| -イベントハンドラ内のエラーから回復するのに Error boundaries は不要です。レンダリングメソッドやライフサイクルメソッドとは異なり、イベントハンドラはレンダリング中には実行されません。そのためイベントハンドラ内でエラーが発生しても、React が画面に表示する内容は変わりません。 |
| 132 | +イベントハンドラ内のエラーから回復するのに Error Boundary は不要です。レンダリングメソッドやライフサイクルメソッドとは異なり、イベントハンドラはレンダリング中には実行されません。そのためイベントハンドラ内でエラーが発生しても、React が画面に表示する内容は変わりません。 |
133 | 133 |
|
134 | 134 | イベントハンドラ内のエラーをキャッチする必要がある場合は、普通の JavaScript の `try` / `catch` 文を使用してください:
|
135 | 135 |
|
@@ -158,10 +158,10 @@ class MyComponent extends React.Component {
|
158 | 158 | }
|
159 | 159 | ```
|
160 | 160 |
|
161 |
| -上記の例では、標準の JavaScript を使用して error boundaries を使用していないことに注目してください。 |
| 161 | +上記の例では、標準の JavaScript を使用して Error Boundary を使用していないことに注目してください。 |
162 | 162 |
|
163 | 163 | ## React 15からの命名の変更
|
164 | 164 |
|
165 |
| -React 15 は error boundaries を異なるメソッド名(`unstable_handleError`)で非常に限定的にサポートしていました。このメソッドはもう動作しないため、16ベータ版リリース以降はコードを `componentDidCatch` に変更する必要があります。 |
| 165 | +React 15 は Error Boundary を異なるメソッド名(`unstable_handleError`)で非常に限定的にサポートしていました。このメソッドはもう動作しないため、16ベータ版リリース以降はコードを `componentDidCatch` に変更する必要があります。 |
166 | 166 |
|
167 | 167 | この変更について、自動的にコードを移行できる [codemod](https://github.com/reactjs/react-codemod#error-boundaries) が提供されています。
|
0 commit comments