Customizing error reports

In order to quickly reproduce and fix errors, it is often helpful to send additional application-specific diagnostic “metadata” to your BugSnag dashboard to provide a rich context that is also available for searching and filtering.

You can also amend the events captured by BugSnag to adjust the information shown on the dashboard and even choose not to send the event at all.

Updating events using callbacks

If you’d like to add diagnostic data to reports, or adjust event data conditionally, you can use an onError callback, which will be run immediately after an error is captured or reported:

Bugsnag.start({
  onError: function (event) {
    // Amend event information
    event.errors[0].errorClass = 'com.example.BadClass'

    // Add additional diagnostic information
    event.addMetadata('account', {
      type: 'paid',
      betaAccess: true
    })
  }
})

The callback gives you access to the Event object, so you can inspect and modify the error event which is about to be sent to BugSnag.

Adding and removing callbacks

We recommend adding callbacks through the onError configuration option to ensure that it is registered as soon as BugSnag starts. However, the following methods are provided to allow callbacks to be added and removed whilst the application is running:

var cb = function (event) { /* ... */ };
Bugsnag.addOnError(cb);
// ...
Bugsnag.removeOnError(cb);

Discarding events

If you want to prevent an event from being sent to BugSnag, you can return false within an onError. This would allow for users to opt out of sending error reports, for example:

Bugsnag.start({
  onError: function (event) {
    return !userHasOptedOut()
  }
})

If you’re using an asynchronous callback, to prevent an event from being sent you can asynchronously “return false” with resolve(false)/cb(null, false) depending on the style of function used.

Asynchronous onError callbacks

We recommend using the synchronous interface as shown above, but it is possible to provide an asynchronous onError callback using a Node-style error-first callback, a Promise or an async function.

Anything that can take a long time or cause subsequent errors should be discouraged – if this is a particularly catastrophic error then you want to avoid doing any work that might prevent the report from sending.

Bugsnag.start({
  onError: event =>
    new Promise((resolve, reject) => {
      // doing some asynchronous work, resolving when done
      resolve()
      // if an error happened, you can reject the promise but this error won't
      // prevent the event from being sent (or other callbacks from being run)
      reject(err)
      // to stop the event from being sent resolve with false
      resolve(false)
    })
  }
})

Bugsnag.start({
  onError: (event, cb) =>
    // doing some asynchronous work, calling cb(err, ignore?) when done
    cb(null)
    // if an error happens call cb(err) – this won't prevent
    // the event from being sent
    cb(err)
    // prevent event from sending
    cb(null, false)
  }
})

Bugsnag.start({
  onError: async event =>
    // doing some asynchronous work
    await somethingAsync()
    // you can explicitly return true, or just not return at all (implicitly returning undefined)
    return true
    // to stop the event from being sent return false
    return false
  }
})

Global metadata

If you have metadata that is applicable to all captured events, it can be set globally on the Bugsnag client and will be set on all subsequently generated events. To ensure that events contain metadata as soon as BugSnag starts capturing events, add it to the metadata field on the configuration object.

The top-level key in the map is displayed as a tab in the BugSnag dashboard:

Bugsnag.start({
  metadata: {
    company: {
      name: 'Acme Co.',
      country: 'uk'
    }
  }
})

Metadata can also be managed whilst your application is running using addMetadata and clearMetadata on the Bugsnag client:

Bugsnag.addMetadata('company', {
  name: 'Acme Co.',
  country: 'uk'
})
// ...
Bugsnag.clearMetadata('company');

Adding user data

Information about the user affected by errors can be added to events sent to your BugSnag dashboard by setting the user ID, email and name in Configuration when BugSnag starts:

Bugsnag.start({ 
  user: {
    id: '3',
    name: 'Bugs Nag',
    email: 'bugs.nag@bugsnag.com'
  }
})

In the browser, or in other environments where your process will only be serving a single user (such as a CLI app in Node.js), you can attach user data directly on the Bugsnag instance after BugSnag has started (for example, when the user logs in). This will then be sent along with all subsequent errors.

Bugsnag.setUser('3', 'bugs.nag@bugsnag.com', 'Bugs Nag')

Alternatively, you can set the user for each event through an onError callback:

Bugsnag.start({
  onError: function (event) {
    event.setUser('3', 'bugs.nag@bugsnag.com', 'Bugs Nag')
  }
})

Setting context

BugSnag uses the concept of “contexts” to help display and group your errors. The context represents what was happening in your application at the time an error occurs and is given high visual prominence in the dashboard.

By default, in the browser, BugSnag sets the context for each event to window.location.pathname. If you would like to set this value manually, you can set it in Configuration when BugSnag starts:

Bugsnag.start({ context: 'ctx-id-1234' })

The context can then be amended on the Bugsnag client as/when it changes for all subsequent events:

Bugsnag.setContext('User settings screen')

Alternatively, the context can be amended for each event using an onError callback:

Bugsnag.start({
  onError: function (event) {
    event.context = 'User settings screen'
  }
})

Preventing IP address collection

The client’s IP address is collected by default and used in both the user identifier and Request tab on the dashboard. This can be prevented by setting the collectUserIp: false option.

Note that by not collecting IPs, reports will all appear to come from the same user unless a user ID is specified. We strongly recommend that you supply a user ID so you can prioritize bugs by the number of users affected. Libraries such as Fingerprintjs can be used to create an anonymous, unique, but reproducible identifiers.

To prevent IP collection but set user IDs:

Bugsnag.start({
  collectUserIp: false,
  onError: function (event) {
    var userId = getMyUserIdentifier() // a custom user resolver
    event.setUser(userId)
  }
})

If the user ID value is known when configuring BugSnag, you can set user right away:

Bugsnag.start({
  collectUserIp: false,
  user: { id: '1234' }
})

For more information on these top-level values, see the configuration options documentation for user and request.

The Event object

An Event object represents an error captured by BugSnag and is available as a parameter on an onError callback. The following properties and methods are available for you to query and update the captured data:

addFeatureFlag

Declare a single feature flag or experiment with variant as an optional second parameter.

event.addFeatureFlag('Checkout button color', 'Blue')
event.addFeatureFlag('New checkout flow')

For more information, see Feature flags & experiments.

addFeatureFlags

Declare multiple feature flags or experiments.

event.addFeatureFlags([
  { name: 'Checkout button color', variant: 'Blue' },
  { name: 'Special offer', variant: 'Free Coffee' },
  { name: 'New checkout flow' },
])

For more information, see Feature flags & experiments.

addMetadata

Adds the specified key and value in the specified section, which is shown as a tab on the BugSnag dashboard.

Data can be added key-by-key with a value that is a primitive type, map or array:

event.addMetadata('company', 'name', 'Acme Co.')

Alternatively a whole map of key-value pairs can be added for a section:

event.addMetadata('company', {
  name: "Acme Co.",
  country: "uk"
})

Metadata set on the event will be combined with global metadata set on the Bugsnag client, with properties on the Event taking precedence.

apiKey

The API key used for events sent to BugSnag. Even though the API key is set when BugSnag is initialized, you may choose to send certain events to a different BugSnag project:

event.apiKey = 'YOUR-API-KEY'

app

Information set by the notifier about your application can be found in event.app:

These values can be accessed and amended if necessary:

event.app.type = 'worker'

breadcrumbs

An array of breadcrumbs leading up to the event can be found in event.breadcrumbs[].

Each breadcrumb consists of the following:

These values can be accessed and amended if necessary:

event.breadcrumbs[0].message = 'Left homepage'

clearFeatureFlag

Remove a single feature flag or experiment.

event.clearFeatureFlag('Checkout button color')

For more information, see Feature flags & experiments.

clearFeatureFlags

Remove all feature flags and experiments.

event.clearFeatureFlags()

For more information, see Feature flags & experiments.

clearMetadata

Removes all the data from the specified section or from a key in the section:

// Remove a metadata field
event.clearMetadata('company', 'name')
// or
event.clearMetadata('company')

context

The context represents what was happening in your application at the time an error occurs.

event.context = 'User settings screen'

See Setting context for more information.

device

Information set by the notifier about the device on which the event occurred can be found in event.device:

These values can be accessed and amended if necessary:

event.device.locale = 'de-DE'

errors

event.errors is an array of one or more Error objects. The first item in the list represents the thrown object. Each subsequent item represents the error that was set as the cause of the preceding one.

An Error object contains the following information:

event.errors[0].errorClass = 'MyError'

In an Error object, the stacktrace is an array of the following Stackframe objects:

These values can be accessed and amended if necessary:

// Sets the `inProject` property to `false` for anything with "vendor" in the path
event.errors[0].stacktrace.forEach(function (frame) {
  var inProject = !/\/vendor\//.test(frame.file)
  // If you set one stackframe.inProject you should set them all
  frame.inProject = inProject
})

getFeatureFlags

Returns a list of feature flags active at the time of the event.

var features = event.getFeatureFlags()

For more information, see Feature flags & experiments.

getMetadata

Returns a map of data in the specified section and optionally key:

var company = event.getMetadata('company')
// or
var companyName = event.getMetadata('company', 'name')

getUser

Returns the current user information:

var userId = event.getUser().id
var userEmail = event.getUser().email
var userName = event.getUser().name

groupingHash

Set the grouping hash of the event to override the default grouping on the dashboard. All events with the same grouping hash will be grouped together into one error. This is an advanced usage of the library and mis-using it will cause your events not to group properly in your dashboard.

event.groupingHash = event.errors[0].errorClass

By default, events are grouped by the statement in your code that raised the error. We try to use the surrounding code to identify the statement, but if that’s not possible we fall back to using line number and filename as an approximation.

request

Information automatically set by the notifier about the web page on which the event occurred:

These values can be accessed and amended if necessary:

event.request.url = 'https://domain.com/page'

originalError

The error object that caused the event in your application.

if (event.originalError instanceof Error) // ...

setUser

Sets the current user information.

event.setUser('3', 'bugs.nag@bugsnag.com', 'Bugs Nag')

null can be used as a parameter value to clear the user attribute.

severity

The seriousness of the error, selected from the options info, warning and error, listed in order of increasing severity:

event.severity = 'warning'

unhandled

By default this is true if the event was automatically detected by BugSnag and false if it was reported manually via Bugsnag.notify. See our product pages for more information on handled vs unhandled events.

event.unhandled = true