From 48729cca904866c4e22c99ef69bd04db71edefb8 Mon Sep 17 00:00:00 2001 From: uenitty Date: Wed, 6 Feb 2019 20:50:23 +0900 Subject: [PATCH] unify terms into Error Boundary --- content/docs/error-boundaries.md | 40 ++++++++++++++++---------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/content/docs/error-boundaries.md b/content/docs/error-boundaries.md index 4662a00a0..ec00c89d2 100644 --- a/content/docs/error-boundaries.md +++ b/content/docs/error-boundaries.md @@ -1,28 +1,28 @@ --- id: error-boundaries -title: Error Boundaries +title: Error Boundary permalink: docs/error-boundaries.html --- かつて、コンポーネント内で発生した JavaScript エラーは React の内部状態を破壊し、次のレンダリングで[不可解な](https://github.com/facebook/react/issues/4026) [エラーを](https://github.com/facebook/react/issues/6895) [引き起こして](https://github.com/facebook/react/issues/8579)いました。このようなエラーはアプリケーションコード中のどこか前の段階で発生したエラーによって引き起こされますが、React はエラーをコンポーネント内で適切に処理する方法を提供していなかったため回復できませんでした。 -## Error Boundaries とは +## Error Boundary とは -UI の一部に JavaScript エラーがあってもアプリ全体が壊れてはいけません。React ユーザーがこの問題に対応できるように、React 16 では “error boundary” という新しい概念を導入しました。 +UI の一部に JavaScript エラーがあってもアプリ全体が壊れてはいけません。React ユーザーがこの問題に対応できるように、React 16 では “Error Boundary” という新しい概念を導入しました。 -Error Boundaries は**自身の子コンポーネントツリーで発生した JavaScript エラーをキャッチ**し、**エラーを記録**し、クラッシュしたコンポーネントツリーの代わりに**フォールバック用の UI を表示**する React コンポーネントです。Error Boundaries は配下のツリー全体のレンダリング中、ライフサイクルメソッド内、およびコンストラクタ内で発生したエラーをキャッチします。 +Error Boundary は**自身の子コンポーネントツリーで発生した JavaScript エラーをキャッチ**し、**エラーを記録**し、クラッシュしたコンポーネントツリーの代わりに**フォールバック用の UI を表示**する React コンポーネントです。Error Boundary は配下のツリー全体のレンダリング中、ライフサイクルメソッド内、およびコンストラクタ内で発生したエラーをキャッチします。 > 補足 > -> Error Boundaries は以下のエラーをキャッチ**しません**： +> Error Boundary は以下のエラーをキャッチ**しません**： > > * イベントハンドラ（[詳細](#how-about-event-handlers)） > * 非同期コード（例：`setTimeout` や `requestAnimationFrame` のコールバック） > * サーバーサイドレンダリング -> * （子コンポーネントではなく）Error Boundaries 自身がスローしたエラー +> * （子コンポーネントではなく）Error Boundary 自身がスローしたエラー -クラスコンポーネントに、ライフサイクルメソッドの [`static getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror) か [`componentDidCatch()`](/docs/react-component.html#componentdidcatch) のいずれか（または両方）を定義すると、Error Boundaries になります。`static getDerivedStateFromError()` はエラーがスローされた後にフォールバック UI をレンダリングするために使用します。 `componentDidCatch()` はエラー情報をログに記録するために使用します。 +クラスコンポーネントに、ライフサイクルメソッドの [`static getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror) か [`componentDidCatch()`](/docs/react-component.html#componentdidcatch) のいずれか（または両方）を定義すると、Error Boundary になります。`static getDerivedStateFromError()` はエラーがスローされた後にフォールバック UI をレンダリングするために使用します。 `componentDidCatch()` はエラー情報をログに記録するために使用します。 ```js{7-10,12-15,18-21} class ErrorBoundary extends React.Component { @@ -60,29 +60,29 @@ class ErrorBoundary extends React.Component { ``` -Error Boundaries はコンポーネントに対して JavaScript の `catch {}` ブロックのように動作します。Error Boundaries になれるのはクラスコンポーネントだけです。実用上、一度だけ Error Boundaries を定義してそれをアプリケーションの至るところで使用することがよくあります。 +Error Boundary はコンポーネントに対して JavaScript の `catch {}` ブロックのように動作します。Error Boundary になれるのはクラスコンポーネントだけです。実用上、一度だけ Error Boundary を定義してそれをアプリケーションの至るところで使用することがよくあります。 -**Error Boundaries は配下のツリー内のコンポーネントで発生したエラーのみをキャッチする**ことに注意してください。Error Boundaries は自身で起こるエラーをキャッチできません。Error Boundaries がエラーメッセージのレンダリングに失敗した場合、そのエラーは最も近い上位の Error Boundaries に伝搬します。この動作もまた、JavaScript の catch {} ブロックの動作と似ています。 +**Error Boundary は配下のツリー内のコンポーネントで発生したエラーのみをキャッチする**ことに注意してください。Error Boundary は自身で起こるエラーをキャッチできません。Error Boundary がエラーメッセージのレンダリングに失敗した場合、そのエラーは最も近い上位の Error Boundary に伝搬します。この動作もまた、JavaScript の catch {} ブロックの動作と似ています。 ## ライブデモ -[React 16](/blog/2017/09/26/react-v16.0.html) で [Error Boundaries を宣言して利用する例](https://codepen.io/gaearon/pen/wqvxGa?editors=0010)を確認してください。 +[React 16](/blog/2017/09/26/react-v16.0.html) で [Error Boundary を宣言して利用する例](https://codepen.io/gaearon/pen/wqvxGa?editors=0010)を確認してください。 -## Error Boundaries を配置すべき場所 +## Error Boundary を配置すべき場所 -Error Boundaries の粒度はあなた次第です。サーバサイドフレームワークがクラッシュを処理する際によく見られるように、最上位のルートコンポーネントをラップしてユーザーに “Something went wrong” メッセージを表示してもいいでしょう。各ウィジェットを個別にラップしてアプリケーションの残りの部分をクラッシュから守るのもいいでしょう。 +Error Boundary の粒度はあなた次第です。サーバサイドフレームワークがクラッシュを処理する際によく見られるように、最上位のルートコンポーネントをラップしてユーザーに “Something went wrong” メッセージを表示してもいいでしょう。各ウィジェットを個別にラップしてアプリケーションの残りの部分をクラッシュから守るのもいいでしょう。 ## エラーがキャッチされなかった場合の新しい動作 -この変更には重要な意味があります。 **React 16 から、どの Error Boundaries でもエラーがキャッチされなかった場合に React コンポーネントツリー全体がアンマウントされるようになりました。** +この変更には重要な意味があります。 **React 16 から、どの Error Boundary でもエラーがキャッチされなかった場合に React コンポーネントツリー全体がアンマウントされるようになりました。** この決定については議論がありましたが、我々の経験上、壊れた UI をそのまま表示しておくことは、完全に削除してしまうよりももっと悪いことです。例えば、Messenger のような製品において壊れた UI を表示したままにしておくと、誰かが誤って別の人にメッセージを送ってしまう可能性があります。同様に、支払いアプリで間違った金額を表示することは、何も表示しないよりも悪いことです。 -この変更のため、React 16 に移行すると、これまで気付かれていなかったアプリケーションの既存の不具合が明らかになることでしょう。Error Boundaries を追加することで、問題が発生したときのユーザー体験を向上できます。 +この変更のため、React 16 に移行すると、これまで気付かれていなかったアプリケーションの既存の不具合が明らかになることでしょう。Error Boundary を追加することで、問題が発生したときのユーザー体験を向上できます。 -例えば、Facebook Messenger はサイドバー、情報パネル、会話ログ、メッセージ入力欄といったコンテンツを個別の Error Boundaries でラップしています。これらの UI エリアの一部のコンポーネントがクラッシュしても、残りの部分はインタラクティブなままです。 +例えば、Facebook Messenger はサイドバー、情報パネル、会話ログ、メッセージ入力欄といったコンテンツを個別の Error Boundary でラップしています。これらの UI エリアの一部のコンポーネントがクラッシュしても、残りの部分はインタラクティブなままです。 また、本番環境で発生したキャッチされなかった例外について知って修正できるように、JS エラー報告サービスを利用（もしくは自身で構築）することもお勧めします。 @@ -123,13 +123,13 @@ try {