Descripción general

El SDK de navegador recopila errores de frontend, incluyendo el mensaje de error y la traza de pila cuando esté disponible. Para clasificar y gestionar estos errores en el producto Error Tracking, consulte Browser Error Tracking.

Cuando el SDK de navegador recopila un error:

• El error se captura como un evento de Error en RUM.
• Retention Filters que tienen como objetivo sesiones que contienen un evento de Error retienen la sesión actual.
• Las métricas de RUM rum.measure.error, rum.measure.session.error y rum.measure.view.error_free se actualizan, independientemente de si la sesión se retiene.
• El error se captura en Error Tracking.

Las Error Tracking rules no se aplican a eventos de Error, y RUM sigue registrando eventos de Error que coinciden con Ignored and Excluded issues en Error Tracking. Para evitar que los errores se registren como eventos de Error, debe descartarlos antes de que se envíen a Datadog utilizando la devolución de llamada beforeSend.

Fuentes de error

Los errores de frontend provienen de varias fuentes diferentes:

• agente: De la ejecución del SDK
• consola: De llamadas a la API console.error()
• personalizado: Enviado con la addError API
• informe: De la ReportingObserver API
• fuente: A partir de excepciones no controladas o rechazos de promesas no controlados en el código fuente

Atributos de error

Para obtener información sobre los atributos predeterminados para todos los tipos de eventos, consulte Datos recopilados. Para obtener información sobre la configuración del muestreo o el contexto global, consulte Modificación de datos y contexto.

Errores de fuente

Los errores de fuente incluyen información a nivel de código sobre el error. Puede encontrar más información sobre los diferentes tipos de error en la documentación de MDN.

Configurar el Error Tracking de WebAssembly

Para rastrear errores de WebAssembly (WASM), instale el plugin WASM del SDK de navegador. Utilice la misma versión para el plugin y el SDK de navegador RUM:

npm install --save-exact \
  @datadog/browser-rum@<VERSION> \
  @datadog/browser-plugin-wasm@<VERSION>

Registre el plugin cuando inicialice RUM:

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

datadogRum.init({
  // ...
  plugins: [makeWasmPlugin()],
});

Inicialice RUM antes de cargar cualquier módulo WASM. El plugin observa los módulos creados con las API WebAssembly del navegador y agrega sus URL y los ID de compilación a los errores que contienen trazas de pila WASM. Esto permite que Datadog seleccione el ID de compilación correcto cuando una aplicación carga múltiples módulos.

Los errores no controlados se recopilan automáticamente. Para reportar un error WASM controlado, pase el objeto Error a addError().

Luego, suba los símbolos de WebAssembly para simbolizar los errores.

Recopile errores manualmente

Haga un seguimiento de las excepciones controladas, los rechazos de promesas controlados y otros errores que el SDK de navegador no rastrea automáticamente con la API addError():

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

Nota: Error Tracking procesa errores que se envían con la fuente establecida en custom, source, report o console, y que contienen una traza de pila. Los errores enviados con cualquier otra fuente (como network) o enviados desde extensiones de navegador no son procesados por 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);
}

Instrumentación de límites de error de React

Puede instrumentar los React error boundaries para hacer un seguimiento de errores de renderizado de React usando la API addError() del SDK de navegador RUM.

Los errores de renderizado recopilados contienen una pila de componentes, la cual se desminifica como cualquier otra traza de pila de errores después de que suba los sourcemaps.

Para instrumentar los límites de error de reacción para su monitoreo, use lo siguiente:

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

class ErrorBoundary extends React.Component {
  ...

  componentDidCatch(error, info) {
    const renderingError = new Error(error.message);
    renderingError.name = `ReactRenderingError`;
    renderingError.stack = info.componentStack;
    renderingError.cause = error;

    datadogRum.addError(renderingError);
  }

  ...
}

class ErrorBoundary extends React.Component {
  ...

  componentDidCatch(error, info) {
    const renderingError = new Error(error.message);
    renderingError.name = `ReactRenderingError`;
    renderingError.stack = info.componentStack;
    renderingError.cause = error;

    DD_RUM.onReady(function() {
       DD_RUM.addError(renderingError);
    });
  }

  ...
}

class ErrorBoundary extends React.Component {
  ...

  componentDidCatch(error, info) {
    const renderingError = new Error(error.message);
    renderingError.name = `ReactRenderingError`;
    renderingError.stack = info.componentStack;
    renderingError.cause = error;

     window.DD_RUM &&
       window.DD_RUM.addError(renderingError);

  }

  ...
}

Solución de problemas

Error de script

Por razones de seguridad, los navegadores ocultan los detalles de los errores provocados por scripts de origen cruzado. Cuando esto sucede, la pestaña Error Details muestra un error con el mensaje mínimo “Script error”.

Para obtener más información sobre los scripts de origen cruzado y por qué se ocultan los detalles, consulte CORS y esta Nota sobre los controladores de eventos globales. Algunas posibles razones para este error incluyen:

• Sus archivos de JavaScript están alojados en un nombre de host diferente (por ejemplo, example.com incluye activos de static.example.com).
• Su sitio web incluye bibliotecas de JavaScript alojadas en una CDN.
• Su sitio web incluye bibliotecas de JavaScript de terceros alojadas en los servidores del proveedor.

Obtenga visibilidad de los scripts de origen cruzado siguiendo estos dos pasos:

1. Llame a las bibliotecas de JavaScript con crossorigin="anonymous".

   Con crossorigin="anonymous", la solicitud para obtener el script se realiza de forma segura. No se reenvían datos confidenciales a través de cookies o autenticación HTTP.

2. Configure el encabezado de respuesta HTTP Access-Control-Allow-Origin:

   • Access-Control-Allow-Origin: * para permitir que todos los orígenes obtengan el recurso.
   • Access-Control-Allow-Origin: example.com para especificar un único origen permitido. Si el servidor admite clientes de múltiples orígenes, debe devolver el origen para el cliente específico que realiza la solicitud.

Lecturas adicionales

Documentación, enlaces y artículos útiles adicionales:

Explore sus errores dentro de DatadogDOCUMENTACIÓN Alerta de forma proactiva sobre problemas impactantesDOCUMENTACIÓN Mida el rendimiento y el impacto en el usuarioDOCUMENTACIÓN