@shopify/react-bugsnag

An opinionated wrapper for Bugsnag's React plugin with smart defaults and support for universal server-side-rendered applications.

Installation

yarn add @shopify/react-bugsnag

QuickStart

• Create a new project on bugsnag and get your API key

const API_KEY = 'api-key-from-bugsnag';

• Create a bugsnag client instance

import {createBugsnagClient} from '@shopify/react-bugsnag';

const API_KEY = 'api-key-from-bugsnag';
const client = createBugsnagClient({apiKey: API_KEY});

• Wrap your React tree with the <Bugsnag /> component

import React from 'react';
import {createBugsnagClient, Bugsnag} from '@shopify/react-bugsnag';

const API_KEY = 'api-key-from-bugsnag';
const client = createBugsnagClient({apiKey: API_KEY});

function App() {
  return <Bugsnag client={client}>{/* app code */}</Bugsnag>;
}

Your application should now report runtime errors in the production and staging environments to bugsnag. You are also now able to use useErrorLogger anywhere in your application tree in order to manually log to bugsnag.

API

Bugsnag

<Bugsnag client={client} />

The primary API for this library, the <Bugsnag /> component handles rendering @bugsnag/react-plugin's provider intelligently when the plugin is present on the given client. It also automatically omits the <ErrorBoundary /> when used during Server-Side-Rendering as it relies on DOM globals and would otherwise break. The <Bugsnag /> component also renders a ErrorLoggerContext.Provider with the given client as the value.

note: This component does not care how the client index was created, whether via the default APIs from @bugsnag/js or using the defaults provided by this package's createBugsnagClient function.

createBugsnagClient

createBugsnagClient({apiKey: 'some-key'});

Creates a bugsnag client and passes it a number of sane default configuration options. It must be passed an apiKeybut all other configutation is optional.

The default configuration options are equivalent to:

  releaseStage: process.env.NODE_ENV,
  autoTrackSessions: false,
  enabledReleaseStages: ['production', 'staging'],
  maxBreadcrumbs: 40,
  plugins: [new ReactPlugin()],

useErrorLogger

const logger = useErrorLogger();
logger.notify(new Error('manually notifying'));

This API provides a way for any component to manually notify. This is ideal for flows such as fetch requests where the error may be handled in the code but you wish to send an error to bugsnag regardless.