Descripción general
El SDK del navegador de Datadog habilita el Real User Monitoring (RUM) para tus aplicaciones web, proporcionando una visibilidad integral de la experiencia del usuario y el rendimiento de la aplicación. Con RUM, puedes monitorear los tiempos de carga de páginas, las interacciones del usuario, la carga de recursos y los errores de la aplicación en tiempo real.
RUM te ayuda a:
- Monitorea la experiencia del usuario con métricas de rendimiento detalladas para cargas de página, acciones del usuario y solicitudes de recursos
- Realiza el seguimiento del recorrido del usuario a través de tu aplicación con capacidades de reproducción de sesión
- Identifica cuellos de botella en el rendimiento y correlaciona el rendimiento del frontend y del backend con trazas de APM
El SDK del navegador es compatible con todos los navegadores modernos de escritorio y móviles y proporciona la recolección automática de métricas clave de rendimiento, interacciones del usuario y errores de la aplicación. Después de la configuración, puedes gestionar tus configuraciones de RUM por aplicación en Datadog y visualizar los datos recolectados en tableros y en el RUM Explorer.
This page describes how to instrument your web applications with the Datadog Browser SDK. The Browser SDK supports Real User Monitoring (RUM), Error Tracking, Session Replay, and Product Analytics.
The Browser SDK supports all modern desktop and mobile browsers.
Setup
Choose your setup method:
- Server-side auto-instrumentation: Automatically inject the RUM SDK into HTML responses through your web server or proxy.
- Agentic Onboarding (in Preview): Use AI coding agents (Cursor, Claude Code) to automatically instrument your application with one prompt.
- Manual client-side setup (below): Manually add the SDK to your application code.
Manual client-side setup
Create the application in the UI
- In Datadog, navigate to Digital Experience > Add an Application and select the JavaScript (JS) application type.
- Enter a name for your application, then click Create Application. This generates a
clientTokenand anapplicationIdfor your application.
Install the Browser SDK
Choose the installation method for the Browser SDK.
Installing through Node Package Manager (npm) registry is recommended for modern web applications. The Browser SDK is packaged with the rest of your frontend JavaScript code. It has no impact on page load performance. However, the SDK may miss errors, resources, and user actions triggered before the SDK is initialized. Datadog recommends using a matching version with the Browser Logs SDK.
Add @datadog/browser-rum to your package.json file, for example if you use npm cli:
npm install --save @datadog/browser-rum
-Installing through CDN async is recommended for web applications with performance targets. The Browser SDK loads from Datadog's CDN asynchronously, ensuring the SDK download does not impact page load performance. However, the SDK may miss errors, resources, and user actions triggered before the SDK is initialized.
Add the generated code snippet to the head tag of every HTML page you want to monitor in your application.
<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,d.crossOrigin=''
- n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
- })(window,document,'script','https://www.datadoghq-browser-agent.com/us1/v7/datadog-rum.js','DD_RUM')
-</script>
-<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,d.crossOrigin=''
- n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
- })(window,document,'script','https://www.datadoghq-browser-agent.com/eu/v7/datadog-rum.js','DD_RUM')
-</script>
-<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,d.crossOrigin=''
- n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
- })(window,document,'script','https://www.datadoghq-browser-agent.com/ap1/v7/datadog-rum.js','DD_RUM')
-</script>
-<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,d.crossOrigin=''
- n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
- })(window,document,'script','https://www.datadoghq-browser-agent.com/ap2/v7/datadog-rum.js','DD_RUM')
-</script>
-<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,d.crossOrigin=''
- n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
- })(window,document,'script','https://www.datadoghq-browser-agent.com/us3/v7/datadog-rum.js','DD_RUM')
-</script>
-<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,d.crossOrigin=''
- n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
- })(window,document,'script','https://www.datadoghq-browser-agent.com/us5/v7/datadog-rum.js','DD_RUM')
-</script>
-<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,d.crossOrigin=''
- n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
- })(window,document,'script','https://www.datadoghq-browser-agent.com/datadog-rum-v7.js','DD_RUM')
-</script>
-Installing through CDN sync is recommended for collecting all events. The Browser SDK loads from Datadog's CDN synchronously, ensuring the SDK loads first and collects all errors, resources, and user actions. This method may impact page load performance.
Add the generated code snippet to the head tag (in front of any other script tags) of every HTML page you want to monitor in your application. Placing the script tag higher and loading it synchronously ensures Datadog RUM can collect all performance data and errors.
<script
- src="https://www.datadoghq-browser-agent.com/us1/v7/datadog-rum.js"
- type="text/javascript"
- crossorigin>
-</script>
-<script
- src="https://www.datadoghq-browser-agent.com/eu/v7/datadog-rum.js"
- type="text/javascript"
- crossorigin>
-</script>
-<script
- src="https://www.datadoghq-browser-agent.com/ap1/v7/datadog-rum.js"
- type="text/javascript"
- crossorigin>
-</script>
-<script
- src="https://www.datadoghq-browser-agent.com/ap2/v7/datadog-rum.js"
- type="text/javascript"
- crossorigin>
-</script>
-<script
- src="https://www.datadoghq-browser-agent.com/us3/v7/datadog-rum.js"
- type="text/javascript"
- crossorigin>
-</script>
-<script
- src="https://www.datadoghq-browser-agent.com/us5/v7/datadog-rum.js"
- type="text/javascript"
- crossorigin>
-</script>
-<script
- src="https://www.datadoghq-browser-agent.com/datadog-rum-v7.js"
- type="text/javascript">
-</script>
-Initialize the Browser SDK
The SDK should be initialized as early as possible in the app lifecycle. This ensures all measurements are captured correctly.
In the initialization snippet, set an environment name, service name, and client token. See the full list of initialization parameters.
import { datadogRum } from '@datadog/browser-rum';
-
-datadogRum.init({
- applicationId: '<APP_ID>',
- clientToken: '<CLIENT_TOKEN>',
- // `site` refers to the Datadog site parameter of your organization
- // see https://docs.datadoghq.com/getting_started/site/
- site: '<DATADOG_SITE>',
- // service: 'my-web-application',
- // env: 'production',
- // version: '1.0.0',
-});
-
-Types are compatible with TypeScript >= 3.8.2. For earlier versions of TypeScript, import JavaScript sources and use global variables to avoid any compilation issues.
import '@datadog/browser-rum/bundle/datadog-rum'
-
-window.DD_RUM.init({
- ...
-})
-<script>
- window.DD_RUM.onReady(function() {
- window.DD_RUM.init({
- clientToken: '<CLIENT_TOKEN>',
- applicationId: '<APP_ID>',
- // `site` refers to the Datadog site parameter of your organization
- // see https://docs.datadoghq.com/getting_started/site/
- site: '<DATADOG_SITE>',
- // service: 'my-web-application',
- // env: 'production',
- // version: '1.0.0',
- });
- })
-</script>
-<script>
- window.DD_RUM && window.DD_RUM.init({
- clientToken: '<CLIENT_TOKEN>',
- applicationId: '<APP_ID>',
- // `site` refers to the Datadog site parameter of your organization
- // see https://docs.datadoghq.com/getting_started/site/
- site: '<DATADOG_SITE>',
- // service: 'my-web-application',
- // env: 'production',
- // version: '1.0.0',
-
- });
-</script>
-Configure tracking consent (GDPR compliance)
To be compliant with GDPR, CCPA, and similar regulations, the Browser SDK lets you provide the tracking consent value at initialization.
Configure Content Security Policy (CSP)
If you're using the Datadog Content Security Policy (CSP) integration on your site, see the CSP documentation for additional setup steps.
Establecer tasas de muestreo de sesiones
Para controlar los datos que tu aplicación envía a Datadog RUM, puedes especificar una tasa de muestreo para las sesiones RUM al inicializar el SDK del navegador. Por ejemplo, para muestrear el 80% de las sesiones, establece sessionSampleRate en 80:
datadogRum.init({
- applicationId: '<APP_ID>',
- clientToken: '<CLIENT_TOKEN>',
- site: '<DATADOG_SITE>',
- sessionSampleRate: 80,
- sessionReplaySampleRate: 20,
- // ... other configuration options
-});
-Para más información, consulte Browser RUM & Session Replay Sampling.
Comienza a monitorear tu aplicación
Ahora que has completado la configuración básica para RUM, tu aplicación está recopilando errores del navegador y puedes comenzar a monitorear y depurar problemas en tiempo real.
Visualiza los datos recopilados en tableros o crea una consulta de búsqueda en el RUM Explorer.
Tu aplicación aparece como pendiente en la página de Aplicaciones hasta que Datadog comience a recibir datos.
Próximos pasos
Consulta Configuración Avanzada.
