plugin-react

@bugsnag/plugin-react

A @bugsnag/js plugin for React. Learn more about error reporting for React applications with Bugsnag.

This package enables you to integrate Bugsnag's error reporting with React's error boundaries. It creates and configures an <ErrorBoundary/> component which will capture and report unhandled errors in your component tree. You either use the <ErrorBoundary/> directly, or extend it to provide some fallback UI for your users.

Reported errors will contain useful debugging info from Reacts's internals such as the component name where the error originated, and the component stack.

Installation

npm i --save @bugsnag/js @bugsnag/plugin-react
# or
yarn add @bugsnag/js @bugsnag/plugin-react

Usage

Depending on how your application is structured, usage differs slightly:

// initialize bugsnag ASAP, before other imports
import bugsnag from '@bugsnag/js'
const bugsnagClient = bugsnag('API_KEY')

import ReactDOM from 'react-dom'
import React from 'react'
import bugsnagReact from '@bugsnag/plugin-react'
bugsnagClient.use(bugsnagReact, React)

// wrap your entire app tree in the ErrorBoundary provided
const ErrorBoundary = bugsnagClient.getPlugin('react');
ReactDOM.render(
  <ErrorBoundary>
    <YourApp />
  </ErrorBoundary>,
  document.getElementById('app')
)

Support

• Check out the documentation
• Search open and closed issues for similar problems
• Report a bug or request a feature

License

The Bugsnag JS library and official plugins are free software released under the MIT License. See LICENSE.txt for details.