Suba mapas del código fuente de JavaScript.
Resumen
Si su código fuente de JavaScript del lado del cliente está minificado, suba sus mapas del código fuente a Datadog para desofuscar las trazas de pila. Para cualquier error dado, puede acceder a la ruta del archivo, al número de línea y al fragmento de código para cada marco de la traza de pila relacionada. Datadog también puede vincular los marcos de la pila a su código fuente en su repositorio.
Instrumenta su código
Configure su empaquetador de JavaScript de tal manera que, al minificar su código fuente, se generen mapas de origen que incluyan directamente el código fuente relacionado en el sourcesContent atributo.
Asegúrese de que el tamaño de cada mapa del código fuente aumentado con el tamaño del archivo minificado relacionado no exceda el límite de 500 MB.
Consulta las siguientes configuraciones para empaquetadores de JavaScript populares.
Puede generar mapas del código fuente utilizando el complemento incorporado de webpack llamado SourceMapDevToolPlugin.
Vea la configuración de ejemplo en su 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 está utilizando TypeScript, establezca compilerOptions.sourceMap en true en su archivo tsconfig.json.
Parcel genera mapas del código fuente por defecto al ejecutar el comando de construcción: parcel build <entry file>.
Puede generar mapas del código fuente configurando la opción build.sourcemap en su archivo vite.config.js.
Vea la configuración de ejemplo:
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
build: {
sourcemap: true, // generates .js.map files
minify: 'terser', // or 'esbuild'
}
})
Nota: Si está utilizando TypeScript, asegúrese de que compilerOptions.sourceMap esté establecido en true en su archivo tsconfig.json.
Después de construir su aplicación, los empaquetadores generan un directorio (típicamente llamado dist) con archivos JavaScript minificados ubicados junto a sus correspondientes mapas del código fuente.
Vea el siguiente ejemplo:
./dist
javascript.364758.min.js
javascript.364758.js.map
./subdirectory
javascript.464388.min.js
javascript.464388.js.map
Si la suma del tamaño del archivo para
javascript.364758.min.js y
javascript.364758.js.map excede el límite de
500 MB, redúzcalo configurando su empaquetador para dividir el código fuente en múltiples fragmentos más pequeños. Para más información, consulte
División de Código con WebpackJS.
Suba sus mapas del código fuente
La mejor manera de subir mapas del código fuente es agregar un paso adicional en su pipeline de CI y ejecutar el comando dedicado desde el Datadog CLI. Escanea el directorio dist y sus subdirectorios para cargar automáticamente los mapas del código fuente con los archivos minificados relevantes.
Agregue @datadog/datadog-ci a su archivo package.json (asegúrese de estar utilizando la última versión).
Cree una clave API dedicada de Datadog y expórtela como una variable de entorno llamada DATADOG_API_KEY.
Ejecute el siguiente comando una vez por servicio en su aplicación:
datadog-ci sourcemaps upload /path/to/dist \
--service my-service \
--release-version v35.2395005 \
--minified-path-prefix https://hostname.com/static/js
- Agregue
@datadog/datadog-ci a su archivo package.json (asegúrese de estar utilizando la última versión). - Cree una clave API dedicada de Datadog y expórtela como una variable de entorno llamada
DATADOG_API_KEY. - Configure la CLI para cargar archivos en el sitio exportando dos variables de entorno:
export DATADOG_SITE=export DATADOG_API_HOST=api. - Ejecuta el siguiente comando una vez por servicio en tu aplicación:
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 su CI, la CLI está optimizada para cargar tantos mapas del código fuente como necesite en un corto período de tiempo (típicamente unos pocos segundos).
Nota: Volver a cargar un mapa del código fuente no reemplaza el existente si la versión no ha cambiado.
Los parámetros --service y --release-version deben coincidir con las etiquetas service y version en sus eventos de seguimiento de errores, eventos de RUM y registros del navegador. Para más información sobre cómo configurar estas etiquetas, consulta la documentación de inicialización del SDK del navegador o la documentación de recopilación de registros del navegador.
Si ha definido múltiples servicios en su aplicación, ejecute el comando de CI tantas veces como servicios haya, incluso si tiene un conjunto de mapas de origen para toda la aplicación.
Al ejecutar el comando contra el directorio de ejemplo dist, Datadog espera que su 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 del código fuente con la extensión .js.map funcionan para desminificar correctamente las trazas de pila. Los mapas del código fuente con otras extensiones como .mjs.map son aceptados pero no desminifican las trazas de pila.
Si está sirviendo los mismos archivos fuente de JavaScript desde diferentes subdominios, cargue el mapa del código fuente relacionado una vez y haga que funcione para múltiples subdominios utilizando la ruta de prefijo absoluto en lugar de la URL completa. Por ejemplo, especifique /static/js en lugar de https://hostname.com/static/js.
Vea todos los símbolos subidos y administre sus mapas del código fuente en la página de Explore RUM Debug Symbols.
Vincule los marcos de pila a su código fuente
Si ejecuta datadog-ci sourcemaps upload dentro de un directorio de trabajo de Git, Datadog recopila metadatos del repositorio. El comando datadog-ci recopila la URL del repositorio, el hash del commit actual y la lista de rutas de archivos en el repositorio que se relacionan con sus mapas del código fuente. Para más detalles sobre la recopilación de metadatos de Git, consulte la documentación de datadog-ci.
Datadog muestra enlaces a su código fuente en marcos de pila no minificados.
Solucione errores con facilidad
Sin acceso a la ruta del archivo y al número de línea, un rastro de pila minificado no es útil para solucionar problemas en su base de código. Además, el fragmento de código está minificado (lo que significa que hay una línea larga de código transformado), lo que dificulta más el proceso de solución de problemas.
El siguiente ejemplo muestra un rastro de pila minificado:
Por otro lado, un rastro de pila no minificado le proporciona todo el contexto que necesita para una solución de problemas rápida y sin inconvenientes. Para los marcos de pila que se relacionan con su código fuente, Datadog también genera un enlace directo a su repositorio:
Lectura Adicional
Más enlaces, artículos y documentación útiles:
