Monitoring avec Sentry (Frontend)

Introduction

Sentry est intégré au frontend Nuxt pour le monitoring des erreurs et des performances en production. Il permet de capturer automatiquement les erreurs JavaScript côté client et serveur, d'enregistrer les sessions utilisateurs avec replay, et de suivre les releases pour faciliter le debugging.

Vue d'ensemble

Sentry est configuré séparément pour le client et le serveur Nuxt :

• Client : Capture les erreurs dans le navigateur, enregistre les sessions avec replay
• Serveur : Capture les erreurs côté serveur lors du SSR et des API routes

La configuration utilise le module @sentry/nuxt qui simplifie l'intégration avec Nuxt 4.

Configuration

Fichiers de configuration

Deux fichiers de configuration distincts gèrent l'initialisation de Sentry :

Client (sentry.client.config.ts) :

import * as Sentry from "@sentry/nuxt";

Sentry.init({
  dsn: useRuntimeConfig().public.sentryDsn,
  release: useRuntimeConfig().public.sentryRelease,
  environment: useRuntimeConfig().public.sentryEnvironment,
  debug: false,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  integrations: [
    Sentry.replayIntegration({
      maskAllText: false,
      blockAllMedia: false,
    }),
  ],
});

Serveur (sentry.server.config.ts) :

import * as Sentry from "@sentry/nuxt";

if (process.env.NUXT_PUBLIC_SENTRY_DSN) {
  Sentry.init({
    dsn: process.env.NUXT_PUBLIC_SENTRY_DSN,
    release: process.env.NUXT_PUBLIC_SENTRY_RELEASE || "dev",
    environment: process.env.NUXT_PUBLIC_SENTRY_ENVIRONMENT || "dev",
    debug: false,
  });
}

Configuration Nuxt

Dans nuxt.config.ts, la configuration Sentry inclut les options d'upload des source maps :

sentry: {
  sourceMapsUploadOptions: {
    org: "dotsafe",
    project: "save-france-front",
    url: "https://sentry.dotsafe.fr/",
  },
},

Les variables d'environnement sont définies dans runtimeConfig.public :

runtimeConfig: {
  public: {
    sentryDsn: "",
    sentryRelease: "",
    sentryEnvironment: "",
  },
},

Variables d'environnement

Les variables suivantes doivent être configurées :

• NUXT_PUBLIC_SENTRY_DSN : DSN de votre projet Sentry
• NUXT_PUBLIC_SENTRY_RELEASE : Version/release de l'application (ex: 1.0.0 ou hash de commit)
• NUXT_PUBLIC_SENTRY_ENVIRONMENT : Environnement (dev, staging, production)

Fonctionnalités

Session Replay

Le replay de session est activé avec :

• Sample rate normal : 10% des sessions (replaysSessionSampleRate: 0.1)
• Sample rate sur erreur : 100% des sessions avec erreur (replaysOnErrorSampleRate: 1.0)

Cela permet de visualiser exactement ce que l'utilisateur a fait avant qu'une erreur ne se produise.

Source Maps

Les source maps sont uploadées automatiquement vers Sentry lors du build pour permettre un debugging avec le code source original au lieu du code minifié.

User Feedback (optionnel)

Une intégration de feedback utilisateur est disponible mais commentée dans la configuration. Pour l'activer :

Sentry.feedbackIntegration({
  autoInject: true,
  showBranding: false,
  colorScheme: "light",
  triggerLabel: "Donner mon avis",
  // ... autres options
}),

Utilisation en développement

En développement, Sentry peut être désactivé en ne définissant pas NUXT_PUBLIC_SENTRY_DSN. Le module ne s'initialisera pas côté serveur si la variable n'est pas présente.

Pour activer le mode debug temporairement :

debug: true,

Bonnes pratiques

• Ne jamais commiter les DSN avec des tokens valides dans le code source
• Utiliser des variables d'environnement pour toutes les configurations sensibles
• Configurer des releases distinctes pour chaque déploiement pour faciliter le tracking
• Utiliser des environnements différents (dev, staging, prod) pour filtrer les erreurs
• Ajuster les sample rates selon le volume de trafic pour éviter les coûts excessifs
• Désactiver le replay en développement pour économiser les ressources

Liens utiles

• Documentation Sentry Nuxt
• Configuration Session Replay
• Source Maps Upload

Résumé

• Intégration Sentry pour le monitoring frontend et backend Nuxt
• Session Replay activé pour 10% des sessions et 100% des erreurs
• Upload automatique des source maps pour un debugging efficace
• Configuration séparée client/serveur avec variables d'environnement
• Module @sentry/nuxt pour une intégration simplifiée avec Nuxt 4