Functionality of Sentry's Error Boundary in React

[filiptammergard]

Hello!

We are using Sentry heavily in our organization, but one thing I can't seem to understand is exactly what added benefit I would get from using <Sentry.ErrorBoundary>.

The docs say:

automatically catch and send JavaScript errors from inside a React component tree to Sentry.

https://docs.sentry.io/platforms/javascript/guides/react/features/error-boundary/

But that's the default behavior, right? Errors from inside a React component tree are always sent to Sentry. So why would I use <Sentry.ErrorBoundary>?

[AbhiPrasad]

Because with the error boundary you get the react component stack attached to your error. Sentry also makes this part of the exception object, so they will get sourcemapped!

Here's a example from the Sentry codebase. The main stacktrace:

and then the stacktrace from the component stack that represents the component chain to the component that threw the error

This extra context is useful when trying to figure out what HOC/parent components were involved when rendering the component that threw the error.

[filiptammergard]

Thanks, interesting! What would have been shown here instead if <Sentry.ErrorBoundary> was not used?

Is it recommended to have one top-level <Sentry.ErrorBoundary> or use it in every place you'd want to have an error boundary?

[AbhiPrasad]

What would have been shown here instead if <Sentry.ErrorBoundary> was not used

You would not get component stack error stacktrace.

Is it recommended to have one top-level <Sentry.ErrorBoundary> or use it in every place you'd want to have an error boundary?

Generally I recommend using the Sentry.ErrorBoundary just like how you would a regular React Error Boundary. As per the React docs:

You don’t need to wrap every component into a separate error boundary. When you think about the granularity of error boundaries, consider where it makes sense to display an error message. For example, in a messaging app, it makes sense to place an error boundary around the list of conversations. It also makes sense to place one around every individual message. However, it wouldn’t make sense to place a boundary around every avatar.

[filiptammergard]

Thanks a lot!

[filiptammergard]

In other words, one top-level <Sentry.ErrorBoundary> is enough and I can just replace all my <ErrorBoundary> with <Sentry.ErrorBoundary>!

[AbhiPrasad]

Yup you should be able to replace all existing usages of ErrorBoundary with the Sentry.ErrorBoundary component!