Bugsnag

Bugsnag monitors application stability so you can make data-driven decisions on whether you should be building new features, or fixing bugs.

How to use

Here we use Bugsnag. The installation method is as follows below.

Step 1: Set up Bugsnag configs

Adding file & code in ./src/lib/bugsnag.js

// Vendors
import Bugsnag from '@bugsnag/js';
import BugsnagPluginReact from '@bugsnag/plugin-react';
import * as React from 'react';

Bugsnag.start({
  apiKey: `${process.env.NEXT_PUBLIC_BUGSNAG_API_KEY}`,
  appVersion: `${process.env.NEXT_PUBLIC_BUGSNAG_VERSION}`,
  releaseStage: `${process.env.NEXT_PUBLIC_BUGSNAG_APP_STAGE}`,
  enabledReleaseStages: ['staging', 'production'],
  autoDetectErrors: false,
  // When autoDetectErrors is true, this option
  // sets which kinds of errors to detect
  enabledErrorTypes: {
    unhandledExceptions: false,
    unhandledRejections: false,
  },
  enabledBreadcrumbTypes: ['navigation', 'request', 'process', 'log', 'user', 'state', 'error', 'manual'],
  autoTrackSessions: false,
  // beforeSend callbacks have been renamed to onError
  // and now receive an event parameter rather than report
  onError: (event) => {
    try {
      // potentially buggy code goes here
      // for this example, we're just throwing an error explicitly, but you do not need this syntax in your try clause.
    } catch (event) {
      Bugsnag.notify(event, {
        context: 'Don’t worry - I handled it.',
      });
    }
  },
  redactedKeys: [],
  metadata: {},
  onSession: (session) => {
    // a callback to run each time a session is created
  },
  onBreadcrumb: (breadcrumb) => {
    // a callback to run each time a breadcrumb is created
  },
  // plugins must now be supplied in config rather than via client.use()
  plugins: [new BugsnagPluginReact()],
});

const ErrorBoundary = Bugsnag.getPlugin('react').createErrorBoundary(React);

export { ErrorBoundary };

Step 2: Import ErrorBoundary in to ./src/pages/_app.js

Here it works for the first initial bugsnag.

// Vendors
import React from 'react';

// Lib
import { ErrorBoundary } from '@/bugsnag';

const App = (props) => {
    ...
    return (
        // HOC
        <ErrorBoundary>
            ...
        </ErrorBoundary>
    );
};

export default App;