React Error Boundary

Previous version

This page documents Bugsee React Native SDK 6.x (react-native-bugsee), the current stable release. The new 7.x SDK (@bugsee/react-native) is in beta: see Migrating from 6.x to 7.x to evaluate it, or the 7.x overview to start a new integration.

The Bugsee React Native SDK exports an error boundary component that provides React component APIs to automatically catch and send JavaScript errors from inside a React component tree to Bugsee

import React from "react";
import Bugsee from "react-native-bugsee";

<Bugsee.ErrorBoundary fallback={<p>An error has occurred</p>}>
  <SomeElement />
</Bugsee.ErrorBoundary>

Options

Error boundary component exposes several properties that can be passed in for additional configuration.

fallback (React.ReactNode or Function)

A React element to render when the error boundary catches an error. Can be an actual React element (i.e. ), or a function that returns a React element. If you provide a function, Bugsee will call it with additional info and helpers.

onError (Function)

A function that gets called when the Error Boundary encounters an error. onError is useful if you want to propagate the error into a state management library like Redux, or if you want to check any side effects that could have occurred due to the error.

onReset (Function)

A function that gets called when the Error Boundary is about to reset its state.

Examples

import React from "react";
import Bugsee from "react-native-bugsee";

const DEFAULT_MESSAGE = 'Welcome!';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      message: DEFAULT_MESSAGE,
    };
  }

  render() {
    return (
      <Bugsee.ErrorBoundary
        fallback={({ error, componentStack, resetErrorBoundary }) => (
          <React.Fragment>
            <div>Error encountered</div>
            <div>{error.toString()}</div>
            <div>{componentStack}</div>
            <button onClick={() => {
                this.setState({ message: DEFAULT_MESSAGE });
                {/* When resetErrorBoundary() is called, Fallback component will be removed */}
                {/* and Bugsee ErrorBoundary's children will be rendered in their initial state */}
                resetErrorBoundary();
            }}>Reset</button>
          </React.Fragment>
        )}
      >
        <div>{this.state.message}</div>
        {/* clicking the button below sets an object instead of a string as message prop */}
        {/* which will trigger an error in the component tree */}
        <button onClick={() => this.setState({ message: { this: "is invalid message" } })}>
          Click here to change message!
        </button>
      </Bugsee.ErrorBoundary>
    );
  }
}

export default App;