Overview

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

Prerequisites

Download the latest version of the Browser SDK.

Setup

To start sending Error Tracking data from your browser application to Datadog, follow the in-app setup instructions or follow the steps below.

Step 1 - Create the application

1. In Datadog, navigate to the Errors > Settings > Browser and Mobile > Add an Application page and select the JavaScript (JS) application type.
2. Enter a name for your application, then click Create Application. This generates a clientToken and an applicationId for your application.

Step 2 - Choose the right installation method

Choose the installation type for the Browser SDK.

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

datadogRum.init({

   applicationId: '<APP_ID>',
   clientToken: '<CLIENT_TOKEN>',
   service: '<SERVICE>',
   env: '<ENV_NAME>',
   // site: '<SITE>',
   // version: '1.0.0',
   trackUserInteractions: true,
   trackResources: true
});

<script>
  (function(h,o,u,n,d) {
    h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
    d=o.createElement(u);d.async=1;d.src=n
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/us1/v6/datadog-rum.js','DD_RUM')
  window.DD_RUM.onReady(function() {
    window.DD_RUM.init({
      clientToken: '<CLIENT_TOKEN>',
      applicationId: '<APP_ID>',
      // site: '<SITE>',
      service: '<APP_ID>',
      env: '<ENV_NAME>',
      // version: '1.0.0'
    });
  })
</script>

<script
    src="https://www.datadoghq-browser-agent.com/us1/v6/datadog-rum.js"
    type="text/javascript">
</script>
<script>
    window.DD_RUM && window.DD_RUM.init({
      clientToken: '<CLIENT_TOKEN>',
      applicationId: '<APP_ID>',
      // site: '<SITE>',
      service: '<APP_ID>',
      env: '<ENV_NAME>',
      // version: '1.0.0'
    });
</script>

TypeScript (optional)

If you are initializing the SDK in a TypeScript project, use the code snippet below. Types are compatible with TypeScript >= 3.8.2.

import '@datadog/browser-rum/bundle/datadog-rum'

window.DD_RUM.init({
  applicationId: 'XXX',
  clientToken: 'XXX',
  site: 'datadoghq.com',
  trackUserInteractions: true,
  trackResources: true,
  ...
})

Step 3 - Configure environment and settings

1. In the Environment field, define the environment (env) for your application to use unified service tagging.
2. In the Service field, define the service (service) for your application to use unified service tagging.
3. Set the privacy level for user input. See Session Replay Browser Privacy Options for more details.
4. Set a version number (version) for your deployed application in the initialization snippet. For more information, see Tagging.
5. Configure additional parameters as needed. See the Configuration reference section below for all available options.

Step 4 - Deploy your application

Deploy the changes to your application. After your deployment is live, Datadog collects events from your users’ browsers.

Step 5 - Upload source maps (optional but recommended)

Upload your JavaScript source maps to access unminified stack traces. See the source map upload guide.

Step 6 - Visualize your data

Now that you’ve completed the basic setup for Browser Error Tracking, your application is collecting browser errors and you can start monitoring and debugging issues in real-time.

Visualize the data collected in dashboards or create a search query in Error Tracking.

Until Datadog starts receiving data, your application appears as pending on the Applications page.

Step 7 - Link errors with your source code (optional)

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.

For more information, see the Datadog Source Code Integration.

Tagging for Error Tracking

These tags (configured in step 3 above) power Error Tracking functionality:

• Filtering and faceting issues by service and env
• Cross-product correlation with RUM, Logs, and APM for the same service/env
• Matching uploaded source maps through the same service and version you configure during upload

A service is an independent, deployable code repository that maps to a set of pages:

• If your browser application was constructed as a monolith, your Datadog application has one service name for the application.
• If your browser application was constructed as separate repositories for multiple pages, edit the default service names throughout the lifecycle of your application.

Learn more about tagging in Datadog.

Configuration reference

Call the initialization command to start tracking. The below parameters are available.

Required

These parameters are essential for the Browser SDK to function. You must provide both values to initialize Error Tracking.

Core configuration

These parameters define your application’s identity and environment. They’re used for unified service tagging and help organize your data across Datadog products.

Privacy and consent

These parameters control how user data is collected and protected. Configure them based on your privacy requirements and compliance needs.

Tracking and collection

These parameters control what data is automatically collected from user interactions and pageviews. Enable them based on your monitoring needs.

Advanced configuration

These parameters provide fine-grained control over SDK behavior, networking, and performance. Use them for advanced use cases and custom configurations.

Context and storage

These parameters control how user context and application state are preserved across page navigation and browser sessions.

Logs Browser SDK compatibility options

These parameters ensure compatibility when using both the RUM Browser SDK and Logs Browser SDK together. They must have matching configuration values across both SDKs to maintain consistent session tracking and data correlation.

Advanced features (optional)

Manage uploaded source maps

See all uploaded symbols and manage your source maps on the Debug Symbols page.

Note: Source maps are limited in size to 500 MB each.

Next steps

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

Further reading

추가 유용한 문서, 링크 및 기사:

datadog-ci Source codeSOURCE CODE Upload JavaScript source mapsDOCUMENTATION Learn about the Error Tracking ExplorerDOCUMENTATION