You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: content/docs/error-boundaries.md
+42-42
Original file line number
Diff line number
Diff line change
@@ -4,25 +4,25 @@ title: Error Boundaries
4
4
permalink: docs/error-boundaries.html
5
5
---
6
6
7
-
In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to [emit](https://github.com/facebook/react/issues/4026)[cryptic](https://github.com/facebook/react/issues/6895)[errors](https://github.com/facebook/react/issues/8579) on next renders. These errors were always caused by an earlier error in the application code, but React did not provide a way to handle them gracefully in components, and could not recover from them.
A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an “error boundary”.
Error boundaries are React components that **catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI**instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.
A class component becomes an error boundary if it defines either (or both) of the lifecycle methods [`static getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror)or[`componentDidCatch()`](/docs/react-component.html#componentdidcatch). Use `static getDerivedStateFromError()`to render a fallback UI after an error has been thrown. Use `componentDidCatch()`to log error information.
@@ -52,61 +52,61 @@ class ErrorBoundary extends React.Component {
52
52
}
53
53
```
54
54
55
-
Then you can use it as a regular component:
55
+
然后你可以将它作为一个常规组件去使用：
56
56
57
57
```js
58
58
<ErrorBoundary>
59
59
<MyWidget />
60
60
</ErrorBoundary>
61
61
```
62
62
63
-
Error boundaries work like a JavaScript `catch {}` block, but for components. Only class components can be error boundaries. In practice, most of the time you’ll want to declare an error boundary component once and use it throughout your application.
Note that **error boundaries only catch errors in the components below them in the tree**. An error boundary can’t catch an error within itself. If an error boundary fails trying to render the error message, the error will propagate to the closest error boundary above it. This, too, is similar to how catch {} block works in JavaScript.
Check out [this example of declaring and using an error boundary](https://codepen.io/gaearon/pen/wqvxGa?editors=0010) with [React 16](/blog/2017/09/26/react-v16.0.html).
## Where to Place Error Boundaries {#where-to-place-error-boundaries}
72
+
## 放置错误边界的位置 {#where-to-place-error-boundaries}
73
73
74
-
The granularity of error boundaries is up to you. You may wrap top-level route components to display a “Something went wrong” message to the user, just like server-side frameworks often handle crashes. You may also wrap individual widgets in an error boundary to protect them from crashing the rest of the application.
74
+
错误边界的粒度由你来决定，可以将其包装在最顶层的路由组件并为用户展示一个 “Something went wrong” 的错误信息，就像服务端框架经常处理崩溃一样。你也可以将单独的部件包装在错误边界以保护应用其他部分不崩溃。
75
75
76
76
77
-
## New Behavior for Uncaught Errors {#new-behavior-for-uncaught-errors}
This change has an important implication. **As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree.**
We debated this decision, but in our experience it is worse to leave corrupted UI in place than to completely remove it. For example, in a product like Messenger leaving the broken UI visible could lead to somebody sending a message to the wrong person. Similarly, it is worse for a payments app to display a wrong amount than to render nothing.
This change means that as you migrate to React 16, you will likely uncover existing crashes in your application that have been unnoticed before. Adding error boundaries lets you provide better user experience when something goes wrong.
For example, Facebook Messenger wraps content of the sidebar, the info panel, the conversation log, and the message input into separate error boundaries. If some component in one of these UI areas crashes, the rest of them remain interactive.
We also encourage you to use JS error reporting services (or build your own) so that you can learn about unhandled exceptions as they happen in production, and fix them.
React 16 prints all errors that occurred during rendering to the console in development, even if the application accidentally swallows them. In addition to the error message and the JavaScript stack, it also provides component stack traces. Now you can see where exactly in the component tree the failure has happened:
<imgsrc="../images/docs/error-boundaries-stack-trace.png"style="max-width:100%"alt="Error caught by Error Boundary component">
95
95
96
-
You can also see the filenames and line numbers in the component stack trace. This works by default in [Create React App](https://github.com/facebookincubator/create-react-app)projects:
<imgsrc="../images/docs/error-boundaries-stack-trace-line-numbers.png"style="max-width:100%"alt="Error caught by Error Boundary component with line numbers">
99
99
100
-
If you don’t use Create React App, you can add [this plugin](https://www.npmjs.com/package/babel-plugin-transform-react-jsx-source) manually to your Babel configuration. Note that it’s intended only for development and **must be disabled in production**.
> Component names displayed in the stack traces depend on the [`Function.name`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name)property. If you support older browsers and devices which may not yet provide this natively (e.g. IE 11), consider including a `Function.name` polyfill in your bundled application, such as [`function.name-polyfill`](https://github.com/JamesMGreene/Function.name). Alternatively, you may explicitly set the [`displayName`](/docs/react-component.html#displayname)property on all your components.
`try` / `catch`is great but it only works for imperative code:
109
+
`try` / `catch`很棒但它仅能用于命令式代码（imperative code）：
110
110
111
111
```js
112
112
try {
@@ -116,21 +116,21 @@ try {
116
116
}
117
117
```
118
118
119
-
However, React components are declarative and specify *what* should be rendered:
119
+
然而，React 组件是声明式的并且具体指出 *什么* 需要被渲染：
120
120
121
121
```js
122
122
<Button />
123
123
```
124
124
125
-
Error boundaries preserve the declarative nature of React, and behave as you would expect. For example, even if an error occurs in a `componentDidUpdate`method caused by a `setState`somewhere deep in the tree, it will still correctly propagate to the closest error boundary.
React doesn't need error boundaries to recover from errors in event handlers. Unlike the render method and lifecycle methods, the event handlers don't happen during rendering. So if they throw, React still knows what to display on the screen.
React 15 included a very limited support for error boundaries under a different method name: `unstable_handleError`. This method no longer works, and you will need to change it to `componentDidCatch`in your code starting from the first 16 beta release.
0 commit comments