Network request monitoring

To help identify network issues affecting your users, you can install the plugin-network-instrumentation package to intercept network requests and report failed requests as error events for ranges of status codes.

Installation

Install the plugin from the npm registry using npm or yarn:

npm install --save @bugsnag/plugin-network-instrumentation
# or
yarn add @bugsnag/plugin-network-instrumentation

Basic configuration

Configure the plugin by passing it to Bugsnag.start:

const Bugsnag = require('@bugsnag/js')
const BugsnagPluginNetworkInstrumentation =
  require('@bugsnag/plugin-network-instrumentation')

Bugsnag.start({
  apiKey: 'YOUR_API_KEY',
  plugins: [BugsnagPluginNetworkInstrumentation({
    httpErrorCodes = [400, 401, { min: 500: max 599 }]
  })]
})

By default, the interceptor will log all requests as breadcrumbs, including failed requests (such as connectivity errors), but will only report responses with HTTP status codes in the 400-499 range as error events.

Controlling captured data

The plugin captures request and response header data including URLs, headers and status codes.

Headers and query string parameters are captured as maps of key-value pairs and will be redacted according to the redactedKeys configuration option.

It is also possible to capture the request and response bodies for text-based payloads, although this is not enabled by default to avoid potential size and confidentiality issues. See the Capturing payload bodies section below for details.

The plugin also exposes a callback for the request and response, so that you can modify the data captured before it is sent. The provided request and response objects contain the data that will be reported in the event. These callbacks can be used to redact further sensitive information from the payload or transform the URL for grouping purposes:

Bugsnag.start({
  // ...
  plugins: [BugsnagPluginNetworkInstrumentation({
    onHttpError: ({ request, response }) => {
      if (request.url.startsWith('http://example.domain.com')) {
        request.url = 'http://example.domain.com/REDACTED';
        if (response.statusCode === 404) {
            return false;
        }
      }
      return true;
    }
  })]
})

Capturing payload bodies

To capture request and response bodies, use maxRequestSize and maxResponseSize with a maximum size in bytes. This is disabled (0) by default.

Bugsnag.start({
  // ...
  maxRequestSize: 1024,
  maxResponseSize: 2048,
})

As reading a response body is a one-time operation for fetch, response bodies are only captured for XMLHttpRequest requests. Bodies larger than this size will be truncated.