Présentation

Le plugin de build Source Maps télécharge automatiquement les maps source JavaScript vers Datadog pendant votre build, permettant d’obtenir des traces de pile désobfusquées dans Error Tracking et RUM. Cela évite d’avoir à exécuter manuellement datadog-ci sourcemaps upload ou à configurer des pipelines CI/CD pour les téléchargements de maps source.

Le plugin s’intègre au processus de build, détecte tous les fichiers .js avec les fichiers maps source .map correspondants à partir de la sortie de build, et les télécharge vers Datadog avec les métadonnées git. Il peut associer les maps source aux événements par ID de débogage ou par service et version.

Prérequis

• Une clé d’API Datadog, définie avec auth.apiKey ou la variable d’environnement DATADOG_API_KEY.
• Maps source activées dans la configuration de votre bundler. Le plugin télécharge les maps source mais ne les génère pas. Consultez Importer des maps source JavaScript pour la configuration de génération de maps source spécifique au bundler.
• Pour les téléchargements par ID de débogage, activez l’injection d’ID de débogage dans le plugin de build.
• Pour les téléchargements par service et version, initialisez le SDK RUM avec les paramètres service et version qui correspondent à la configuration du plugin.
• Le plugin de build Datadog installé et enregistré auprès de votre bundler. Consultez Build Plugins pour les instructions d’installation.

Configuration

Les variables d’environnement suivantes remplacent les valeurs de configuration :

• DATADOG_SITE ou DD_SITE : Remplace auth.site pour l’URL d’ingestion.
• DATADOG_SOURCEMAP_INTAKE_URL : Remplace directement l’URL d’ingestion complète.

Choisissez une méthode de correspondance pour le téléchargement des maps source : ID de débogage ou service et version. Ces méthodes de téléchargement sont mutuellement exclusives.

ID de débogage (recommandé)

Les ID de débogage associent chaque bundle JavaScript à sa map source sans dépendre de l’URL du bundle, du service ou de la version. Utilisez cette méthode pour les nouvelles configurations.

La prise en charge des ID de débogage nécessite Datadog Build Plugins version 3.3.0 ou ultérieure.

Configurez les options suivantes dans sourcemaps :

Définissez debugId et upload sur true pour injecter des ID de débogage et télécharger des maps source pendant la build :

// 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,
      },
    }),
  ],
};

Service et version

Configurez l’objet errorTracking.sourcemaps pour télécharger des maps source en utilisant la correspondance de service et de version :

// 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/',
        },
      },
    }),
  ],
};

Pour afficher également le code source en ligne dans les traces de pile d’Error Tracking, associez les téléchargements de maps source de service et de version au plugin Source Code Context.

Pour aller plus loin

Documentation, liens et articles supplémentaires utiles:

Téléchargez les maps source JavaScript (méthode manuelle)DOCUMENTATION Error TrackingDOCUMENTATION Dépôt GitHub des plugins de build DatadogCODE SOURCE