Skip to content

Commit bf70fb6

Browse files
committed
unify terms into Error Boundary
1 parent 7a56e27 commit bf70fb6

File tree

1 file changed

+19
-19
lines changed

1 file changed

+19
-19
lines changed

Diff for: content/docs/error-boundaries.md

+19-19
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
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-
## Error Boundaries とは
10+
## Error Boundary とは
1111

1212
UI の一部に JavaScript エラーがあってもアプリ全体が壊れてはいけません。React ユーザーがこの問題に対応できるように、React 16 では “error boundary” という新しい概念を導入しました。
1313

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

1616
> 補足
1717
>
18-
> Error Boundaries は以下のエラーをキャッチ**しません**
18+
> Error Boundary は以下のエラーをキャッチ**しません**
1919
>
2020
> * イベントハンドラ([詳細](#how-about-event-handlers)
2121
> * 非同期コード(例:`setTimeout``requestAnimationFrame` のコールバック)
2222
> * サーバーサイドレンダリング
23-
> * (子コンポーネントではなく)Error Boundaries 自身がスローしたエラー
23+
> * (子コンポーネントではなく)Error Boundary 自身がスローしたエラー
2424
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()` はエラー情報をログに記録するために使用します。
2626

2727
```js{7-10,12-15,18-21}
2828
class ErrorBoundary extends React.Component {
@@ -60,29 +60,29 @@ class ErrorBoundary extends React.Component {
6060
</ErrorBoundary>
6161
```
6262

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

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

6767
## ライブデモ
6868

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)を確認してください。
7070

7171

72-
## Error Boundaries を配置すべき場所
72+
## Error Boundary を配置すべき場所
7373

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

7676

7777
## エラーがキャッチされなかった場合の新しい動作
7878

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

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

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

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

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

@@ -123,13 +123,13 @@ try {
123123
<Button />
124124
```
125125

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

128128
## イベントハンドラについて
129129

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

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

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

@@ -158,10 +158,10 @@ class MyComponent extends React.Component {
158158
}
159159
```
160160

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

163163
## React 15からの命名の変更
164164

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

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

0 commit comments

Comments
 (0)