Skip to content

Commit 53c6e4e

Browse files
committed
unify terms into Error Boundary
1 parent 8522156 commit 53c6e4e

File tree

1 file changed

+23
-19
lines changed

1 file changed

+23
-19
lines changed

content/docs/error-boundaries.md

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,32 @@
11
---
22
id: error-boundaries
3-
title: Error Boundaries
3+
title: Error Boundary
44
permalink: docs/error-boundaries.html
55
---
66

77
かつて、コンポーネント内で発生した JavaScript エラーは React の内部状態を破壊し、次のレンダリングで[不可解な](https://github.com/facebook/react/issues/4026) [エラーを](https://github.com/facebook/react/issues/6895) [引き起こして](https://github.com/facebook/react/issues/8579)いました。このようなエラーはアプリケーションコード中のどこか前の段階で発生したエラーによって引き起こされますが、React はエラーをコンポーネント内で適切に処理する方法を提供していなかったため回復できませんでした。
88

99

10+
<<<<<<< HEAD
1011
## Error Boundaries とは {#introducing-error-boundaries}
12+
=======
13+
## Error Boundary とは
14+
>>>>>>> 48729cca... unify terms into Error Boundary
1115
12-
UI の一部に JavaScript エラーがあってもアプリ全体が壊れてはいけません。React ユーザーがこの問題に対応できるように、React 16 では “error boundary” という新しい概念を導入しました。
16+
UI の一部に JavaScript エラーがあってもアプリ全体が壊れてはいけません。React ユーザーがこの問題に対応できるように、React 16 では “Error Boundary” という新しい概念を導入しました。
1317

14-
Error Boundaries**自身の子コンポーネントツリーで発生した JavaScript エラーをキャッチ**し、**エラーを記録**し、クラッシュしたコンポーネントツリーの代わりに**フォールバック用の UI を表示**する React コンポーネントです。Error Boundaries は配下のツリー全体のレンダリング中、ライフサイクルメソッド内、およびコンストラクタ内で発生したエラーをキャッチします。
18+
Error Boundary**自身の子コンポーネントツリーで発生した JavaScript エラーをキャッチ**し、**エラーを記録**し、クラッシュしたコンポーネントツリーの代わりに**フォールバック用の UI を表示**する React コンポーネントです。Error Boundary は配下のツリー全体のレンダリング中、ライフサイクルメソッド内、およびコンストラクタ内で発生したエラーをキャッチします。
1519

1620
> 補足
1721
>
18-
> Error Boundaries は以下のエラーをキャッチ**しません**
22+
> Error Boundary は以下のエラーをキャッチ**しません**
1923
>
2024
> * イベントハンドラ([詳細](#how-about-event-handlers)
2125
> * 非同期コード(例:`setTimeout``requestAnimationFrame` のコールバック)
2226
> * サーバーサイドレンダリング
23-
> * (子コンポーネントではなく)Error Boundaries 自身がスローしたエラー
27+
> * (子コンポーネントではなく)Error Boundary 自身がスローしたエラー
2428
25-
クラスコンポーネントに、ライフサイクルメソッドの [`static getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror)[`componentDidCatch()`](/docs/react-component.html#componentdidcatch) のいずれか(または両方)を定義すると、Error Boundaries になります。`static getDerivedStateFromError()` はエラーがスローされた後にフォールバック UI をレンダリングするために使用します。 `componentDidCatch()` はエラー情報をログに記録するために使用します。
29+
クラスコンポーネントに、ライフサイクルメソッドの [`static getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror)[`componentDidCatch()`](/docs/react-component.html#componentdidcatch) のいずれか(または両方)を定義すると、Error Boundary になります。`static getDerivedStateFromError()` はエラーがスローされた後にフォールバック UI をレンダリングするために使用します。 `componentDidCatch()` はエラー情報をログに記録するために使用します。
2630

2731
```js{7-10,12-15,18-21}
2832
class ErrorBoundary extends React.Component {
@@ -60,29 +64,29 @@ class ErrorBoundary extends React.Component {
6064
</ErrorBoundary>
6165
```
6266

63-
Error Boundaries はコンポーネントに対して JavaScript の `catch {}` ブロックのように動作します。Error Boundaries になれるのはクラスコンポーネントだけです。実用上、一度だけ Error Boundaries を定義してそれをアプリケーションの至るところで使用することがよくあります。
67+
Error Boundary はコンポーネントに対して JavaScript の `catch {}` ブロックのように動作します。Error Boundary になれるのはクラスコンポーネントだけです。実用上、一度だけ Error Boundary を定義してそれをアプリケーションの至るところで使用することがよくあります。
6468

65-
**Error Boundaries は配下のツリー内のコンポーネントで発生したエラーのみをキャッチする**ことに注意してください。Error Boundaries は自身で起こるエラーをキャッチできません。Error Boundaries がエラーメッセージのレンダリングに失敗した場合、そのエラーは最も近い上位の Error Boundaries に伝搬します。この動作もまた、JavaScript の catch {} ブロックの動作と似ています。
69+
**Error Boundary は配下のツリー内のコンポーネントで発生したエラーのみをキャッチする**ことに注意してください。Error Boundary は自身で起こるエラーをキャッチできません。Error Boundary がエラーメッセージのレンダリングに失敗した場合、そのエラーは最も近い上位の Error Boundary に伝搬します。この動作もまた、JavaScript の catch {} ブロックの動作と似ています。
6670

6771
## ライブデモ {#live-demo}
6872

69-
[React 16](/blog/2017/09/26/react-v16.0.html)[Error Boundaries を宣言して利用する例](https://codepen.io/gaearon/pen/wqvxGa?editors=0010)を確認してください。
73+
[React 16](/blog/2017/09/26/react-v16.0.html)[Error Boundary を宣言して利用する例](https://codepen.io/gaearon/pen/wqvxGa?editors=0010)を確認してください。
7074

7175

72-
## Error Boundaries を配置すべき場所 {#where-to-place-error-boundaries}
76+
## Error Boundary を配置すべき場所 {#where-to-place-error-boundaries}
7377

74-
Error Boundaries の粒度はあなた次第です。サーバサイドフレームワークがクラッシュを処理する際によく見られるように、最上位のルートコンポーネントをラップしてユーザーに “Something went wrong” メッセージを表示してもいいでしょう。各ウィジェットを個別にラップしてアプリケーションの残りの部分をクラッシュから守るのもいいでしょう。
78+
Error Boundary の粒度はあなた次第です。サーバサイドフレームワークがクラッシュを処理する際によく見られるように、最上位のルートコンポーネントをラップしてユーザーに “Something went wrong” メッセージを表示してもいいでしょう。各ウィジェットを個別にラップしてアプリケーションの残りの部分をクラッシュから守るのもいいでしょう。
7579

7680

7781
## エラーがキャッチされなかった場合の新しい動作 {#new-behavior-for-uncaught-errors}
7882

79-
この変更には重要な意味があります。 **React 16 から、どの Error Boundaries でもエラーがキャッチされなかった場合に React コンポーネントツリー全体がアンマウントされるようになりました。**
83+
この変更には重要な意味があります。 **React 16 から、どの Error Boundary でもエラーがキャッチされなかった場合に React コンポーネントツリー全体がアンマウントされるようになりました。**
8084

8185
この決定については議論がありましたが、我々の経験上、壊れた UI をそのまま表示しておくことは、完全に削除してしまうよりももっと悪いことです。例えば、Messenger のような製品において壊れた UI を表示したままにしておくと、誰かが誤って別の人にメッセージを送ってしまう可能性があります。同様に、支払いアプリで間違った金額を表示することは、何も表示しないよりも悪いことです。
8286

83-
この変更のため、React 16 に移行すると、これまで気付かれていなかったアプリケーションの既存の不具合が明らかになることでしょう。Error Boundaries を追加することで、問題が発生したときのユーザー体験を向上できます。
87+
この変更のため、React 16 に移行すると、これまで気付かれていなかったアプリケーションの既存の不具合が明らかになることでしょう。Error Boundary を追加することで、問題が発生したときのユーザー体験を向上できます。
8488

85-
例えば、Facebook Messenger はサイドバー、情報パネル、会話ログ、メッセージ入力欄といったコンテンツを個別の Error Boundaries でラップしています。これらの UI エリアの一部のコンポーネントがクラッシュしても、残りの部分はインタラクティブなままです。
89+
例えば、Facebook Messenger はサイドバー、情報パネル、会話ログ、メッセージ入力欄といったコンテンツを個別の Error Boundary でラップしています。これらの UI エリアの一部のコンポーネントがクラッシュしても、残りの部分はインタラクティブなままです。
8690

8791
また、本番環境で発生したキャッチされなかった例外について知って修正できるように、JS エラー報告サービスを利用(もしくは自身で構築)することもお勧めします。
8892

@@ -123,13 +127,13 @@ try {
123127
<Button />
124128
```
125129

126-
Error boundaries は React の宣言型という性質を保持しつつ、期待通りの動作をします。例えば、`componentDidUpdate` メソッドで発生したエラーがツリー内のどこか深い場所にある `setState` によって引き起こされていた場合でも、最も近い Error boundaries にそのことが正しく伝播します。
130+
Error Boundary は React の宣言型という性質を保持しつつ、期待通りの動作をします。例えば、`componentDidUpdate` メソッドで発生したエラーがツリー内のどこか深い場所にある `setState` によって引き起こされていた場合でも、最も近い Error Boundary にそのことが正しく伝播します。
127131

128132
## イベントハンドラについて {#how-about-event-handlers}
129133

130-
Error boundaries はイベントハンドラ内で発生したエラーをキャッチ**しません**
134+
Error Boundary はイベントハンドラ内で発生したエラーをキャッチ**しません**
131135

132-
イベントハンドラ内のエラーから回復するのに Error boundaries は不要です。レンダリングメソッドやライフサイクルメソッドとは異なり、イベントハンドラはレンダリング中には実行されません。そのためイベントハンドラ内でエラーが発生しても、React が画面に表示する内容は変わりません。
136+
イベントハンドラ内のエラーから回復するのに Error Boundary は不要です。レンダリングメソッドやライフサイクルメソッドとは異なり、イベントハンドラはレンダリング中には実行されません。そのためイベントハンドラ内でエラーが発生しても、React が画面に表示する内容は変わりません。
133137

134138
イベントハンドラ内のエラーをキャッチする必要がある場合は、普通の JavaScript の `try` / `catch` 文を使用してください:
135139

@@ -158,10 +162,10 @@ class MyComponent extends React.Component {
158162
}
159163
```
160164

161-
上記の例では、標準の JavaScript を使用して error boundaries を使用していないことに注目してください。
165+
上記の例では、標準の JavaScript を使用して Error Boundary を使用していないことに注目してください。
162166

163167
## React 15からの命名の変更 {#naming-changes-from-react-15}
164168

165-
React 15 は error boundaries を異なるメソッド名(`unstable_handleError`)で非常に限定的にサポートしていました。このメソッドはもう動作しないため、16ベータ版リリース以降はコードを `componentDidCatch` に変更する必要があります。
169+
React 15 は Error Boundary を異なるメソッド名(`unstable_handleError`)で非常に限定的にサポートしていました。このメソッドはもう動作しないため、16ベータ版リリース以降はコードを `componentDidCatch` に変更する必要があります。
166170

167171
この変更について、自動的にコードを移行できる [codemod](https://github.com/reactjs/react-codemod#error-boundaries) が提供されています。

0 commit comments

Comments
 (0)