Le monitoring des erreurs en production est un aspect critique du cycle de vie d'une application moderne. Sentry s'impose comme une solution incontournable pour capturer les exceptions côté client, offrant une visibilité en temps réel sur les bugs rencontrés par les utilisateurs. Ce guide détaille l'intégration de Sentry dans des environnements React et Vue.js, avec un focus sur l'automatisation des SourceMaps.

1. Initialisation de l'infrastructure

Avant toute intégration technique, une instance Sentry doit être disponible. Vous pouvez opter pour la version SaaS ou déployer votre propre instance via Docker sur un serveur dédié. Une fois l'organisation et le projet créés dans l'interface d'administration, récupérez le DSN (Data Source Name) et générez un jeton d'authentification (API Token) pour automatiser les déploiements.

2. Intégration dans un projet React

L'intégration commence par l'installation du SDK officiel :

npm install --save @sentry/react @sentry/tracing

Initialisez Sentry au point d'entrée de votre application (généralement index.js ou main.tsx) :

import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";

Sentry.init({
  dsn: "VOTRE_DSN_ICI",
  integrations: [new BrowserTracing()],
  tracesSampleRate: 1.0,
  release: "v1.0.0"
});

3. Automatisation de l'upload des SourceMaps

Pour que les rapports d'erreurs soient lisibles, Sentry a besoin des SourceMaps. Utiliser le plugin Webpack permet d'automatiser l'envoi de ces fichiers lors de la phase de build.

Configuration pour React (Webpack personnalisé)

Voici un exemple de configuraton pour intégrer le plugin Sentry dans le processus de build via un fichier webpack.config.js ou une extension de configuration :

const SentryPlugin = require("@sentry/webpack-plugin");
const path = require("path");

module.exports = {
  // ... autres configurations
  plugins: [
    new SentryPlugin({
      release: "v1.0.0",
      include: path.join(__dirname, "build/static/js"),
      ignore: ["node_modules", "webpack.config.js"],
      urlPrefix: "~/static/js",
      configFile: "sentry.properties"
    }),
  ],
};

Le fichier sentry.properties doit contenir les informations d'authentification :

defaults.url=https://sentry.votre-domaine.com/
defaults.org=ma-societe
defaults.project=mon-projet-react
auth.token=VOTRE_TOKEN_API

4. Configuration spécifique pour Vue.js

Pour un projet utilsiant Vue CLI, la configuration s'effectue dans vue.config.js. Il est recommandé de supprimer les fichiers .map après l'upload pour éviter de les exposer sur le serveur de production.

const SentryWebpackPlugin = require("@sentry/webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      const appVersion = require('./package.json').version;
      
      config.plugins.push(
        new SentryWebpackPlugin({
          release: appVersion,
          include: "./dist/js",
          urlPrefix: "~/js/",
          ignore: ["node_modules"],
        })
      );

      // Suppression des sourcemaps après le build pour la sécurité
      config.plugins.push(
        new CleanWebpackPlugin({
          protectWebpackAssets: false,
          cleanAfterEveryBuildPatterns: ["*.map"],
        })
      );
    }
  }
};

5. Résolution des problèmes d'installation

L'installation de @sentry/webpack-plugin peut échouer dans certains environnements réseau restreints en raison du téléchargement du binaire Sentry CLI. Pour pallier ce problème, vous pouvez spécifier un miroir ou une URL directe dans votre fichier .npmrc :

sentrycli_cdnurl=https://github.com/getsentry/sentry-cli/releases/download/

Une fois configuré, chaque build de production enverra automatiquement les artefacts de débogage vers Sentry. Lorsqu'une exception surviendra, l'interface affichera la ligne de code source exacte au lieu du code minifié, facilitant ainsi grandement le diagnostic.