Descripción general

El complemento de compilación de mapas del código fuente carga automáticamente los mapas del código fuente de JavaScript a Datadog durante su compilación, lo que permite desofuscar los seguimientos de pila en Error Tracking y RUM. Esto reemplaza la necesidad de ejecutar manualmente datadog-ci sourcemaps upload o configurar tuberías de CI/CD para las cargas de mapas del código fuente.

El complemento se conecta al proceso de compilación, descubre todos los archivos .js con los archivos de mapa del código fuente .map correspondientes de la salida de compilación y los carga a Datadog con metadatos de git. Puede asociar mapas del código fuente con eventos por ID de depuración o por servicio y versión.

Requisitos previos

• Una clave de Datadog API, configurada con auth.apiKey o la variable de entorno DATADOG_API_KEY.
• Mapas del código fuente habilitados en la configuración de su empaquetador. El complemento carga los mapas del código fuente pero no los genera. Consulte Upload JavaScript Source Maps para la configuración de generación de mapas del código fuente específica del empaquetador.
• Para cargas por ID de depuración, habilite la inyección de ID de depuración en el complemento de compilación.
• Para cargas por servicio y versión, inicialice el SDK de RUM con los parámetros service y version que coincidan con la configuración del complemento.
• El complemento de compilación de Datadog instalado y registrado en su empaquetador. Consulte Build Plugins para obtener instrucciones de instalación.

Configuración

Las siguientes variables de entorno anulan los valores de configuración:

• DATADOG_SITE o DD_SITE: Anula auth.site para la URL de ingesta.
• DATADOG_SOURCEMAP_INTAKE_URL: Anula directamente la URL de ingesta completa.

Elija un método de coincidencia para la carga de mapas del código fuente: ID de depuración o servicio y versión. Estos métodos de carga son mutuamente excluyentes.

ID de depuración (recomendado)

Los ID de depuración asocian cada paquete de JavaScript con su mapa del código fuente sin depender de la URL del paquete, el servicio o la versión. Utilice este método para nuevas configuraciones.

La compatibilidad con ID de depuración requiere Datadog Build Plugins versión 3.3.0 o posterior.

Configure las siguientes opciones en sourcemaps:

Establezca debugId y upload en true para inyectar ID de depuración y cargar mapas del código fuente durante la compilación:

// webpack.config.js
const { datadogWebpackPlugin } = require('@datadog/webpack-plugin');

module.exports = {
  plugins: [
    datadogWebpackPlugin({
      auth: {
        apiKey: process.env.DATADOG_API_KEY,
        site: 'datadoghq.com', // Optional: defaults to datadoghq.com
      },
      sourcemaps: {
        debugId: true,
        upload: true,
      },
    }),
  ],
};

// vite.config.js
import { datadogVitePlugin } from '@datadog/vite-plugin';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    datadogVitePlugin({
      auth: {
        apiKey: process.env.DATADOG_API_KEY,
        site: 'datadoghq.com', // Optional: defaults to datadoghq.com
      },
      sourcemaps: {
        debugId: true,
        upload: true,
      },
    }),
  ],
});

// esbuild.config.js
const { datadogEsbuildPlugin } = require('@datadog/esbuild-plugin');

require('esbuild').build({
  plugins: [
    datadogEsbuildPlugin({
      auth: {
        apiKey: process.env.DATADOG_API_KEY,
        site: 'datadoghq.com', // Optional: defaults to datadoghq.com
      },
      sourcemaps: {
        debugId: true,
        upload: true,
      },
    }),
  ],
});

// rollup.config.js
import { datadogRollupPlugin } from '@datadog/rollup-plugin';

export default {
  plugins: [
    datadogRollupPlugin({
      auth: {
        apiKey: process.env.DATADOG_API_KEY,
        site: 'datadoghq.com', // Optional: defaults to datadoghq.com
      },
      sourcemaps: {
        debugId: true,
        upload: true,
      },
    }),
  ],
};

// rspack.config.js
const { datadogRspackPlugin } = require('@datadog/rspack-plugin');

module.exports = {
  plugins: [
    datadogRspackPlugin({
      auth: {
        apiKey: process.env.DATADOG_API_KEY,
        site: 'datadoghq.com', // Optional: defaults to datadoghq.com
      },
      sourcemaps: {
        debugId: true,
        upload: true,
      },
    }),
  ],
};

Servicio y versión

Configure el objeto errorTracking.sourcemaps para cargar mapas del código fuente utilizando la coincidencia de servicio y versión:

// webpack.config.js
const { datadogWebpackPlugin } = require('@datadog/webpack-plugin');

module.exports = {
  plugins: [
    datadogWebpackPlugin({
      auth: {
        apiKey: process.env.DATADOG_API_KEY,
        site: 'datadoghq.com', // Optional: defaults to datadoghq.com
      },
      errorTracking: {
        sourcemaps: {
          service: 'my-application',
          releaseVersion: '1.0.0',
          minifiedPathPrefix: 'https://example.com/static/',
        },
      },
    }),
  ],
};

Para mostrar también el código fuente en línea en los seguimientos de pila de Error Tracking, combine las cargas de mapas del código fuente de servicio y versión con el complemento Source Code Context.

Lecturas adicionales

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

Cargar mapas del código fuente de JavaScript (método manual)DOCUMENTACIÓN Error TrackingDOCUMENTACIÓN Repositorio de GitHub de complementos de compilación de DatadogCÓDIGO FUENTE