Browser Error Tracking

Docs > RUM & Session Replay > Error Tracking for Web and Mobile Applications > Browser Error Tracking

Overview

Error Tracking processes errors collected from the browser by the Browser SDK. Whenever a source, custom, or report error containing a stack trace is collected, Error Tracking processes and groups it under an issue, or group of similar errors.

Setup

If you have not set up the Browser SDK yet, follow the in-app setup instructions or see the Browser setup documentation.

Download the latest version of the Browser SDK.
Configure your application’s version, env, and service when initializing the SDK.
Upload your JavaScript source maps to access unminified stack traces.

Link errors with your source code

In addition to sending source maps, the Datadog CLI reports Git information such as the commit hash, repository URL, and a list of tracked file paths in the code repository.

Error Tracking can use this information to correlate errors with your source code, allowing you to pivot from any stack trace frame to the related line of code in GitHub, GitLab and Bitbucket.

Linking from stack frames to source code is supported in the Datadog CLI version 0.12.0 version and later.

For more information, see the Datadog Source Code Integration.

Limitations

Collect errors manually

You can monitor handled exceptions, handled promise rejections, and other errors that the Browser SDK does not automatically track. Learn more about Collecting Browser Errors.

To manually collect errors, use the addError() API:

addError(
    error: unknown,
    context?: Context
);

Note: Error Tracking processes errors that are sent with the source set to custom, source or report, and contain a stack trace. Errors sent with any other source (such as console) or sent from browser extensions are not processed by Error Tracking.

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

// Send a handled exception error
try {
    //Some code logic
} catch (error) {
    datadogRum.addError(error);
}

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

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

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

// Send a handled exception error
try {
    //Some code logic
} catch (error) {
    window.DD_RUM.onReady(function() {
        window.DD_RUM.addError(error);
    })
}

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

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

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

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