Collecting Browser Errors

Collecting Browser Errors

Front-end errors are collected with Real User Monitoring (RUM). The error message and stack trace are included when available.

Error origins

Front-end errors are split into four different categories depending on their error.origin:

  • network: XHR or Fetch errors resulting from AJAX requests. Specific attributes to network errors can be found in the network errors documentation.
  • source: Unhandled exceptions or unhandled promise rejections (source-code related).
  • console: console.error() API calls.
  • custom: Errors sent with the RUM addError API that default to custom.

Error attributes

For information about the default attributes for all RUM event types, see Data Collected. For information about configuring for sampling or global context see Advanced Configuration.

AttributeTypeDescription
error.sourcestringWhere the error originates from (for example, console or network).
error.typestringThe error type (or error code in some cases).
error.messagestringA concise, human-readable, one-line message explaining the event.
error.stackstringThe stack trace or complementary information about the error.

Network errors

Network errors include information about failing HTTP requests. The following facets are collected:

AttributeTypeDescription
error.resource.status_codenumberThe response status code.
error.resource.methodstringThe HTTP method (for example POST, GET).
error.resource.urlstringThe resource URL.
error.resource.url_hoststringThe host part of the URL.
error.resource.url_pathstringThe path part of the URL.
error.resource.url_queryobjectThe query string parts of the URL decomposed as query params key/value attributes.
error.resource.url_schemestringThe protocol name of the URL (HTTP or HTTPS).
error.resource.provider.namestringThe resource provider name. Default is unknown.
error.resource.provider.domainstringThe resource provider domain.
error.resource.provider.typestringThe resource provider type (for example first-party, cdn, ad, analytics).

Source errors

Source errors include code-level information about the error. More information about the different error types can be found in the MDN documentation.

AttributeTypeDescription
error.typestringThe error type (or error code in some cases).

Collect errors manually

Monitor handled exceptions, handled promise rejections and other errors not tracked automatically by the RUM SDK with the addError() API:

addError(
    error: unknown,
    context?: Context,
    source: ErrorSource.CUSTOM | ErrorSource.NETWORK | ErrorSource.SOURCE = ErrorSource.CUSTOM
);

Note: The Error Tracking feature processes errors sent with source set to custom or source and that contain a stack trace.

import { datadogRum } from '@datadog/browser-rum';

// Send a custom error with context
const error = new Error('Something wrong occurred.');

datadogRum.addError(error, {
    pageStatus: 'beta',
});

// Send a network error
fetch('<SOME_URL>').catch(function(error) {
    datadogRum.addError(error, undefined, 'network');
})

// Send a handled exception error
try {
    //Some code logic
} catch (error) {
    datadogRum.addError(error, undefined, 'source');
}
// Send a custom error with context
const error = new Error('Something wrong occurred.');

DD_RUM.onReady(function() {
    DD_RUM.addError(error, {
        pageStatus: 'beta',
    });
});

// Send a network error
fetch('<SOME_URL>').catch(function(error) {
    DD_RUM.onReady(function() {
        DD_RUM.addError(error, undefined, 'network');
    });
})

// Send a handled exception error
try {
    //Some code logic
} catch (error) {
    DD_RUM.onReady(function() {
        DD_RUM.addError(error, undefined, 'source');
    })
}
// Send a custom error with context
const error = new Error('Something wrong occurred.');

window.DD_RUM && DD_RUM.addError(error, {
    pageStatus: 'beta',
});

// Send a network error
fetch('<SOME_URL>').catch(function(error) {
    window.DD_RUM && DD_RUM.addError(error, undefined, 'network');
})

// Send a handled exception error
try {
    //Some code logic
} catch (error) {
    window.DD_RUM && DD_RUM.addError(error, undefined, 'source');
}

Further Reading