This repository has been archived by the owner. It is now read-only.
[DEPRECATED] This package now lives within the monorepo for our Universal JS notifier "@bugsnag/js" • https://github.com/bugsnag/bugsnag-js
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
bin
dist
example
src
.babelrc
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
CONTRIBUTING.md
ISSUE_TEMPLATE.md
LICENSE.txt
README.md
package-lock.json
package.json

README.md

Deprecation notice

We upgraded our React support in the latest all-in-one javascript notifier package. Check out the blog post for more info.

All projects should upgrade to our universal JS notifier: @bugsnag/js and use the new version of the react plugin: @bugsnag/plugin-react. See the upgrade guide for details on how to upgrade.

This package is now deprecated, but will continue to exist on the npm registry and work with Bugsnag's API for the foreseeable future. However, it will no longer receive updates unless they are critical.

Please upgrade at your earliest convenience.


Bugsnag: React

Documentation Build status NPM

NPM

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

You can opt to install the package from npm, using the instructions below. Alternatively you can load the plugin from our CDN via a <script/> tag.

CDN

<script src="//d2wy8f7a9ursnm.cloudfront.net/v4/bugsnag.min.js"></script>
<script src="//d2wy8f7a9ursnm.cloudfront.net/bugsnag-plugins/v1/bugsnag-react.min.js"></script>

npm

npm i --save bugsnag-js bugsnag-react
# or
yarn add bugsnag-js bugsnag-react

Usage

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

Inline script tag

The script tag creates a global function called bugsnag__react which needs to be passed a reference to the React object. Ensure that React is defined before calling this function.

<script>
  window.bugsnagClient = bugsnag('API_KEY')
</script>
<script>
  // in your react app…
  var ErrorBoundary = bugsnagClient.use(bugsnag__react(React))
  ReactDOM.render(
    <ErrorBoundary>
      <YourApp />
    </ErrorBoundary>,
    document.getElementById('app')
  )
</script>

See the example for more info.

Bundled

// 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 createPlugin from 'bugsnag-react'

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

Support

License

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