Carga de mapas de fuente de JavaScript

Docs > RUM y Session Replay > Guías de Real User Monitoring y Session Replay > Carga de mapas de fuente de JavaScript

Información general

Si el código fuente de tu frontend JavaScript está minificado, carga tus mapas de fuente a Datadog para deenmascarar tus diferentes stack traces. Para cualquier error dado, puedes acceder a la ruta del archivo, el número de línea y el fragmento de código para cada marco del stack trace relacionado. Datadog también puede vincular marcos de stack a tu código fuente en tu repositorio.

Solo pueden desminificarse los errores recopilados por Real User Monitoring (RUM), y logs de Browser Logs Collection.

Instrumentar tu código

Configura tu empaquetador de JavaScript para que, al minificar tu código fuente, genere mapas de fuente que incluyan directamente el código fuente relacionado en el atributo sourcesContent.

Consulta las siguientes configuraciones para los empaquetadores más populares de JavaScript.

Puedes generar mapas de fuente utilizando el complemento webpack integrado llamado SourceMapDevToolPlugin.

Consulta el ejemplo de configuración en tu archivo webpack.config.js:

// ...
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  devtool: false,
  plugins: [
    new webpack.SourceMapDevToolPlugin({
      noSources: false,
      filename: '[file].map'
    }),
    // ...
  ],
  optimization: {
    minimize: true,
    // ...
  },
  // ...
};

Nota: Si utilizas TypeScript, establece compilerOptions.sourceMap en true en tu archivo tsconfig.json.

Parcel genera mapas de fuente por defecto cuando se ejecuta el comando build: parcel build <entry file>.

Tras compilar la aplicación, los empaquetadores generan un directorio (normalmente denominado dist) con los archivos JavaScript minificados junto con sus correspondientes mapas de fuente.

Consulta el siguiente ejemplo:

./dist
    javascript.364758.min.js
    javascript.364758.js.map
    ./subdirectory
        javascript.464388.min.js
        javascript.464388.js.map

Cargar tus mapas de fuente

La mejor manera de cargar mapas de fuente es añadir un paso adicional en tu pipeline de CI y ejecutar el comando dedicado desde la CLI de Datadog. Explora el directorio dist y tus subdirectorios para cargar automáticamente los mapas de fuente con los archivos minificados pertinentes.

Añade @datadog/datadog-ci a tu archivo package.json (asegúrate de estar utilizando la última versión).
Crea una clave de API dedicada de Datadog y expórtala como una variable de entorno denominada DATADOG_API_KEY.

Ejecuta el siguiente comando una vez por servicio en tu aplicación RUM:

datadog-ci sourcemaps upload /path/to/dist \
  --service=my-service \
  --release-version=v35.2395005 \
  --minified-path-prefix=https://hostname.com/static/js

Añade @datadog/datadog-ci a tu archivo package.json (asegúrate de estar utilizando la última versión).
Crea una clave de API dedicada de Datadog y expórtala como una variable de entorno denominada DATADOG_API_KEY.
Configura la CLI para cargar archivos al sitio exportando dos variables de entorno: export DATADOG_SITE= y export DATADOG_API_HOST=api..

Ejecuta el siguiente comando una vez por servicio en tu aplicación RUM:

datadog-ci sourcemaps upload /path/to/dist \
  --service=my-service \
  --release-version=v35.2395005 \
  --minified-path-prefix=https://hostname.com/static/js

Para minimizar la sobrecarga en el rendimiento de tu CI, la CLI está optimizada para cargar tantos mapas de fuente como necesites en un breve espacio de tiempo (normalmente unos segundos).

Nota: Volver a cargar un mapa de fuente no anula el existente si la versión no ha cambiado.

Los parámetros --service y --release-version deben coincidir las etiquetas (tags) service y version en tus eventos RUM y logs de navegador. Para más información sobre cómo configurar estas etiquetas, consulta la documentación de inicialización del SDK del navegador RUM o la documentación de la recopilación de logs de navegador.

Si has definido varios servicios en tu aplicación RUM, ejecuta el comando CI tantas veces como haya servicios, aunque tengas un conjunto de mapas de fuente para toda la aplicación RUM.

Al ejecutar el comando contra el directorio de ejemplo dist, Datadog espera que tu servidor o CDN entregue los archivos JavaScript en https://hostname.com/static/js/javascript.364758.min.js y https://hostname.com/static/js/subdirectory/javascript.464388.min.js.

Solo los mapas de fuente con la extensión .js.map funcionan para desminificar correctamente los stack traces. Los mapas de fuente con otras extensiones como .mjs.map se aceptan, pero no desminifican los stack traces.

Si estás proporcionando los mismos archivos fuente JavaScript desde diferentes subdominios, carga el mapa de fuente relacionado una vez y haz que funcione para múltiples subdominios utilizando la ruta de prefijo absoluta en lugar de la URL completa. Por ejemplo, especifica /static/js en lugar de https://hostname.com/static/js.

Vincular los marcos de stack a tu código fuente

Si ejecutas datadog-ci sourcemaps upload dentro de un directorio de trabajo de Git, Datadog recopila los metadatos del repositorio. El comando datadog-ci recopila la URL del repositorio, el hash de la confirmación actual y la lista de rutas de archivos en el repositorio que se relacionan con tus mapas de fuente. Para más detalles sobre la recopilación de metadatos de Git, consulta la documentación de datadog-ci.

Datadog muestra enlaces a tu código fuente en marcos de stack sin minificar.

Solucionar los errores con facilidad

Sin acceso a la ruta del archivo y al número de línea, un stack trace minificado no es útil para solucionar problemas de tu base de código. Además, el fragmento de código está minificado (lo que significa que hay una sola línea larga de código transformado), lo que dificulta el proceso de solución de problemas.

El siguiente ejemplo muestra un stack trace minificado:

Rastreo de errores de stack trace minificado

Por otro lado, un stack trace sin minificar te proporciona todo el contexto que necesitas para solucionar problemas de forma rápida y fluida. Para los marcos de stack relacionados con tu código fuente, Datadog también genera un enlace directo a tu repositorio: