Carga de mapas de fuente de JavaScript
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.
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
.
Asegúrate de que el tamaño de cada mapa de fuente aumentado con el tamaño del archivo minificado relacionado no supere el límite de 300 MB.
Asegúrate de que el tamaño de cada mapa de fuente aumentado con el tamaño del archivo minificado relacionado no supere el límite de 50 MB.
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
Si la suma del tamaño del archivo de javascript.364758.min.js
y javascript.364758.js.map
excede el límite de 300 MB, reduce el tamaño al configurar el compilador para dividir el código fuente en múltiples fragmentos más pequeños. Para obtener más información, consulta División de código con WebpackJS.
Si la suma del tamaño del archivo de javascript.364758.min.js
y javascript.364758.js.map
excede el límite de 50 MB, reduce el tamaño al configurar el compilador para dividir el código fuente en múltiples fragmentos más pequeños. Para obtener más información, consulta División de código con WebpackJS.
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:
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:
Referencias adicionales
Additional helpful documentation, links, and articles: