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 Modifying RUM Data and Context.

Network errors

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

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.

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. Errors sent with any other source (such as console) will not be 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, 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');
}

Troubleshooting

Script error

For security reasons, browsers hide details from errors triggered by cross-origin scripts. When this happens, the Error Details tab shows an error with the minimal message “Script error.”

For more information about cross-origin scripts and why details are hidden, see CORS and this Note on Global Event Handlers. Some possible reasons for this error include:

• Your JavaScript files are hosted on a different hostname (for instance, example.com includes assets from static.example.com).
• Your website includes JavaScript libraries hosted on a CDN.
• Your website includes third-party JavaScript libraries hosted on the provider’s servers.

Get visibility into cross-origin scripts by following these two steps:

1. Call JavaScript libraries with crossorigin="anonymous".

   With crossorigin="anonymous", the request to fetch the script is performed securely. No sensitive data is forwarded via cookies or HTTP authentication.

2. Configure the Access-Control-Allow-Origin HTTP header.

   The most common value for this header is Access-Control-Allow-Origin: *, which allows all origins to fetch the resource. Instead, restrict which origins can access your resources by setting, for example Access-Control-Allow-Origin: www.example.com.

Further Reading

Additional helpful documentation, links, and articles:

Error TrackingDOCUMENTATION Real User MonitoringBLOG Explore your views within DatadogDOCUMENTATION Build analytics upon your eventsDOCUMENTATION RUM DashboardsDOCUMENTATION