Información general

Los errores del front-end se recopilan con el SDK del navegador. El mensaje de error y la traza (trace) del stack tecnológico se incluyen cuando están disponibles.

Fuentes de errores

Los errores de front-end proceden de diversas fuentes:

• Agent: De la ejecución del SDK
• consola: De las llamadas a la API console.error()
• personalizado: Enviado con la APIaddError
• informe: Desde la API ReportingObserver
• Fuente: De excepciones no manejadas o rechazos de promesas no manejadas en el código fuente.

Atributos de errores

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

Errores de origen

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

Recopilación manual de errores

Excepciones manejadas por Monitor, rechazos de promesas manejados y otros errores no rastreados automáticamente por el SDK del navegador con la API addError():

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

Nota: El Seguimiento de errores procesa errores que se envían con la fuente configurada en custom, source o report y que contienen una traza de stack tecnológico. El Seguimiento de errores no procesa errores enviados con cualquier otra fuente (como console) o enviados desde extensiones del navegador.

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

// Enviar un error personalizado con contexto
const error = new Error('Something wrong occurred.');

datadogRum.addError(error, {
    pageStatus: 'beta',
});

// Enviar un error de red
fetch('<SOME_URL>').catch(function(error) {
    datadogRum.addError(error);
})

// Enviar un error de excepción gestionada
try {
    //Some code logic
} catch (error) {
    datadogRum.addError(error);
}

// Enviar un error personalizado con contexto
const error = nuevo Error('Something wrong occurred.');

window.DD_RUM.onReady(function() {
    window.DD_RUM.addError(error, {
        pageStatus: 'beta',
    });
});

// Enviar un error de red
fetch('<SOME_URL>').catch(function(error) {
    window.DD_RUM.onReady(function() {
        window.DD_RUM.addError(error);
    });
})

// Enviar un error de excepción manejado
probar {
    //Alguna lógica de código
} capturar (error) {
    window.DD_RUM.onReady(function() {
        window.DD_RUM.addError(error);
    })
}

// Enviar un error personalizado con contexto
const error = nuevo Error('Something wrong occurred.');

window.DD_RUM && window.DD_RUM.addError(error, {
    pageStatus: 'beta',
});

// Enviar un error de red
fetch('<SOME_URL>').catch(function(error) {
    window.DD_RUM && window.DD_RUM.addError(error);
})

// Enviar un error de excepción manejado
probar {
    //Alguna lógica de código
} capturar (error) {
    window.DD_RUM && window.DD_RUM.addError(error);
}

Instrumentación de límites de error de React

Puedes instrumentar los límites de error de React para monitorizar errores de representación de React utilizando la API addError() del RUM Browser SDK.

Los errores de representación recopilados contienen un stak tecnológico de componentes, que está desminificado como cualquier otra traza de stack de errores después de cargar mapas de origen.

Para instrumentar límites de errores de React para la monitorización, utiliza lo siguiente:

importar { datadogRum } desde '@Datadog/browser-rum';

clase 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);
  }

  ...
}

clase 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(función() {
       DD_RUM.addError(renderingError);
    });
  }

  ...
}

clase 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);

  }

  ...
}

Solucionar problemas

Error de script

Por motivos de seguridad, los navegadores ocultan los detalles de los errores provocados por scripts de origen cruzado. Cuando esto ocurre, la pestaña Detalles del error muestra un error con el mensaje mínimo “Error de script”.

Para más información sobre scripts de origen cruzado y por qué se ocultan los detalles, consulta CORS y esta Nota sobre Global Event Handlers. Algunos posibles motivos de este error incluyen:

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

Obtén visibilidad de los scripts de origen cruzado siguiendo estos dos pasos:

1. Llama a las bibliotecas JavaScript con crossorigin="anonymous".

   Con crossorigin="anonymous", la solicitud para acceder al script se realiza de forma segura. No se transmiten datos sensibles a través de cookies ni autenticación HTTP.

2. Configura 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 varios orígenes, debe devolver el origen del cliente específico que realiza la solicitud.

Referencias adicionales

Más enlaces, artículos y documentación útiles: