Skip to content

Commit

Permalink
Move section, more minor changes
Browse files Browse the repository at this point in the history
  • Loading branch information
gaearon committed Jul 27, 2017
1 parent b464379 commit f99ae14
Showing 1 changed file with 12 additions and 12 deletions.
24 changes: 12 additions & 12 deletions docs/_posts/2017-07-26-error-handling-in-react-16.md
Expand Up @@ -55,18 +55,6 @@ The `componentDidCatch()` method works like a JavaScript `catch {}` block, but f

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.

## Component Stack Traces

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:

<figure>[![Component stack trace in the console](/react/img/blog/error-boundaries-stack-trace.png)]</figure>

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:

<figure>[![Component stack trace in the console with filenames and line numbers](/react/img/blog/error-boundaries-stack-trace-line-numbers.png)]</figure>

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: it’s intended only for development and must be disabled in production).

## Live Demo

Check out [this example of declaring and using an error boundary](https://codepen.io/gaearon/pen/wqvxGa?editors=0010) with [React 16 beta](https://github.com/facebook/react/issues/10294).
Expand All @@ -87,6 +75,18 @@ For example, Facebook Messenger wraps content of the sidebar, the info panel, th

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.

## Component Stack Traces

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:

<img src="/react/img/blog/error-boundaries-stack-trace.png" alt="Component stack traces in error message" style="width: 100%;">

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:

<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%;">

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**.

## Why Not Use `try` / `catch`?

`try` / `catch` is great but it only works for imperative code:
Expand Down

0 comments on commit f99ae14

Please sign in to comment.