Wondering what’s next for npm?Check out our public roadmap! »

    @shopify/react-bugsnag
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.4 • Public • Published

    @shopify/react-bugsnag

    Build Status Build Status License: MIT npm version npm bundle size (minified + gzip)

    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.

    Keywords

    none

    Install

    npm i @shopify/react-bugsnag

    DownloadsWeekly Downloads

    1,798

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    27.2 kB

    Total Files

    49

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar