Add Babel plugin note to Error boundaries post (#10313)
* Add Babel plugin note to Error boundaries post * Added section with screenshots * Add context to Component stack traces * Update 2017-07-26-error-handling-in-react-16.md * Move section, more minor changes * Change pics
Fernando Montoya committed
Jul 27, 2017 at 17:25 UTC
95cec9927c736aaef4b08fac7d559c1e52b59e5d
3 files changed
+13
-1
docs/_posts/2017-07-26-error-handling-in-react-16.md
+13
-1
@@ -32,7 +32,7 @@ class ErrorBoundary extends React.Component {
32
// You can also log the error to an error reporting service
33
logErrorToMyService(error, info);
34
}
35
-
35
+
36
render() {
37
if (this.state.hasError) {
38
// You can render any custom fallback UI
@@ -75,6 +75,18 @@ For example, Facebook Messenger wraps content of the sidebar, the info panel, th
75
76
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.
77
78
+## Component Stack Traces
79
+
80
+React 16 prints all errors 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
+
82
+<img src="/react/img/blog/error-boundaries-stack-trace.png" alt="Component stack traces in error message" style="width: 100%;">
83
+
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
+
86
+<img src="/react/img/blog/error-boundaries-stack-trace-line-numbers.png" alt="Component stack traces with line numbers in error message" style="width: 100%;">
87
+
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**.
89
+
90
## Why Not Use `try` / `catch`?
91
92
`try` / `catch` is great but it only works for imperative code:
docs/img/blog/error-boundaries-stack-trace-line-numbers.png
Binary files /dev/null and b/docs/img/blog/error-boundaries-stack-trace-line-numbers.png differ
docs/img/blog/error-boundaries-stack-trace.png
Binary files /dev/null and b/docs/img/blog/error-boundaries-stack-trace.png differ