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