feat(react): Add Error Boundary component

[AbhiPrasad]

Following up #2631

Motivation

This PR implements an Error Boundary React component. See https://reactjs.org/docs/error-boundaries.html for more details.

This is an important API for us to support, as error boundaries are the defacto way to catch and deal with errors in React.

Implementation

The implementation was inspired by the way we do error boundaries at Sentry as well as bvaughn's excellent error boundary implementation

The error boundary provides the following options:

type FallbackRender = (fallback: {
  error: Error | null;
  componentStack: string | null;
  resetError(): void;
}) => React.ReactNode;

export type ErrorBoundaryProps = {
  // if we should render Sentry's report dialog or not
  showDialog?: boolean;
  dialogOptions?: Sentry.ReportDialogOptions;
  // If render key changes and there is an error, the component is reset
  renderKey?: string | number;
  // We provide two ways to render a fallback component,
  // rendering just a component takes priority, but we
  // also support rendering using render props.
  fallback?: React.ReactNode | FallbackRender;
   // on error callback
  onError?(error: Error, componentStack: string): void;
  // callback onComponentDidMount
  onMount?(): void;
  // when `resetErrorBoundary` is called from `fallbackRender`
  onReset?(error: Error | null, componentStack: string | null): void;
  // callback onComponentWillUnmount
  onUnmount?(error: Error | null, componentStack: string | null): void;
};

We recommend using fallbackRender to render the fallback component, as it uses a render props approach. This passes resetErrorBoundary as render props, allowing the user to easily reset the error boundary.

The error boundary is available as a standalone component with

<ErrorBoundary>
  <Component />
</ErrorBoundary>

or as a HOC

withErrorBoundary(Component, errorBoundaryProps)

Testing

I switched to @testing-library/react, it's pretty good (and seems to be the standard way to do tests in React now). It's also 209.5 kb minified, while enzyme is 463.2 kb, and the yarn installs definitely add up.

Current test coverage

File	% Stmts	% Branch	% Funcs	% Lines	Uncovered Line #s
All files	91.49	72.73	90	90.91
errorboundary.tsx	88.89	50	77.78	87.5	93,95,101,105,106
profiler.tsx	95	100	100	94.59	53,56

Future

After this gets merged in, we move on to creating a hooks based Profiler. I'm also looking to see how difficult it is to support react-router and similar.

[getsentry-bot]

	Messages
📖	@sentry/browser bundle gzip'ed minified size: (ES5: 17.0732 kB) (ES6: 16.1367 kB)
📖	✅ TSLint passed

Generated by 🚫 dangerJS against 5174791

[HazAT]

Soooo good, so many tests ❤️

Small nits + don't forget Changelog

[AbhiPrasad]

Update: Addressed review comments. Also added a renderKey prop, which will update the component if changed. This provides an easy way for the user to reset errors without having to rely on calling a reset function (for example, if the window.location changes, the component will reset) No longer doing this.

[HazAT]

🥇

[AbhiPrasad]

Hmm so I'm using Sentry.captureException(error, { contexts: { react: { componentStack } } });, and though an error event is created in Sentry, the react context does not show up. Testing with demo here: https://github.com/AbhiPrasad/sentry-react-demo

[billyvg]

LGTM

Are there plans to update our app usage of error boundaries?

[AbhiPrasad]

@billyvg we will be updating the usage of Profiler and ErrorBoundary in getsentry/sentry to test this before we GA the package.