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, global context, or custom user actions, see Advanced Configuration.

Attribute	Type	Description
`error.source`	string	Where the error originates from (for example, `console` or `network`).
`error.type`	string	The error type (or error code in some cases).
`error.message`	string	A concise, human-readable, one-line message explaining the event.
`error.stack`	string	The stack trace or complementary information about the error.

Network errors

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

Attribute	Type	Description
`error.resource.status_code`	number	The response status code.
`error.resource.method`	string	The HTTP method (for example `POST`, `GET`).
`error.resource.url`	string	The resource URL.
`error.resource.url_host`	string	The host part of the URL.
`error.resource.url_path`	string	The path part of the URL.
`error.resource.url_query`	object	The query string parts of the URL decomposed as query params key/value attributes.
`error.resource.url_scheme`	string	The protocol name of the URL (HTTP or HTTPS).
`error.resource.provider.name`	string	The resource provider name. Default is `unknown`.
`error.resource.provider.domain`	string	The resource provider domain.
`error.resource.provider.type`	string	The 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.

Attribute	Type	Description
`error.type`	string	The 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.

Dropdown

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');
}

Datadog Docs