Front-end errors are collected with Real User Monitoring (RUM). The error message and stack trace are included when available.
Front-end errors are split into four different categories depending on their error.origin
:
console.error()
API calls.addError
API that default to custom
.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 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 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). |
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');
}
Additional helpful documentation, links, and articles:
On this Page