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/blog/2017-07-26-error-handling-in-react-16.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -79,11 +79,11 @@ We also encourage you to use JS error reporting services (or build your own) so
79
79
80
80
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:
81
81
82
-
<imgsrc="../images/blog/error-boundaries-stack-trace.png"alt="Component stack traces in error message"style="width: 100%;">
82
+
<imgsrc="../images/docs/error-boundaries-stack-trace.png"alt="Component stack traces in error message"style="width: 100%;">
83
83
84
84
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:
85
85
86
-
<imgsrc="../images/blog/error-boundaries-stack-trace-line-numbers.png"alt="Component stack traces with line numbers in error message"style="width: 100%;">
86
+
<imgsrc="../images/docs/error-boundaries-stack-trace-line-numbers.png"alt="Component stack traces with line numbers in error message"style="width: 100%;">
87
87
88
88
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**.
Copy file name to clipboardExpand all lines: content/docs/error-boundaries.md
+9-9Lines changed: 9 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -51,7 +51,7 @@ The `componentDidCatch()` method works like a JavaScript `catch {}` block, but f
51
51
52
52
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.
53
53
54
-
####componentDidCatch Parameters
54
+
### componentDidCatch Parameters
55
55
56
56
`error` is an error that has been thrown.
57
57
@@ -100,11 +100,11 @@ We also encourage you to use JS error reporting services (or build your own) so
100
100
101
101
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:
102
102
103
-
<imgsrc="../images/docs/error-boundaries-error-log.png"style="max-width:100%"alt="Error caught by Error Boundary component">
103
+
<imgsrc="../images/docs/error-boundaries-stack-trace.png"style="max-width:100%"alt="Error caught by Error Boundary component">
104
104
105
105
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:
106
106
107
-
<imgsrc="../images/docs/error-boundaries-error-log-line-numbers.png"style="max-width:100%"alt="Error caught by Error Boundary component with line numbers">
107
+
<imgsrc="../images/docs/error-boundaries-stack-trace-line-numbers.png"style="max-width:100%"alt="Error caught by Error Boundary component with line numbers">
108
108
109
109
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**.
110
110
@@ -114,17 +114,17 @@ If you don’t use Create React App, you can add [this plugin](https://www.npmjs
114
114
`try` / `catch` is great but it only works for imperative code:
115
115
116
116
```js
117
-
try {
118
-
showButton();
119
-
} catch (error) {
120
-
// ...
121
-
}
117
+
try {
118
+
showButton();
119
+
} catch (error) {
120
+
// ...
121
+
}
122
122
```
123
123
124
124
However, React components are declarative and specify *what* should be rendered:
125
125
126
126
```js
127
-
<Button />
127
+
<Button />
128
128
```
129
129
130
130
Error boundaries preserve the declarative nature of React, and behave as you would expect. For example, even if an error occurs in a `componentDidUpdate` hook caused by a `setState` somewhere deep in the tree, it will still correctly propagate to the closest error boundary.
0 commit comments