New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@shopify/react-bugsnag

Package Overview
Dependencies
Maintainers
24
Versions
46
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@shopify/react-bugsnag

An opinionated wrapper for Bugsnag's React plugin

  • 4.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
3.8K
decreased by-62.15%
Maintainers
24
Weekly downloads
 
Created
Source

@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.

FAQs

Package last updated on 10 Jun 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc