Skip to content
Learni
Voir tous les tutoriels
Observabilité et Monitoring

Comment configurer Sentry avancé avec Next.js en 2026

18 minEXPERT
MonitoringNext.jsSentry
Read in English

Introduction

Sentry est devenu l'outil de référence pour le monitoring d'erreurs et la performance applicative. En 2026, son intégration dans Next.js exige une configuration experte incluant le tracing distribué, les source maps chiffrés et les hooks personnalisés. Ce tutoriel vous guide pas à pas vers une mise en place professionnelle et maintenable.

Prérequis

  • Node.js 20+ et Next.js 15+
  • Compte Sentry avec DSN et organisation
  • Connaissances solides en TypeScript et edge runtime
  • Accès au pipeline CI/CD pour l'upload des source maps

Installation du SDK Sentry

terminal
npx @sentry/wizard@latest -i nextjs

La commande installe automatiquement @sentry/nextjs et génère les fichiers de configuration de base adaptés à Next.js 15.

Configuration client avancée

sentry.client.config.ts
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 0.2,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  integrations: [
    Sentry.replayIntegration({
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
  beforeSend(event) {
    if (event.exception?.values?.[0]?.type === 'ChunkLoadError') return null;
    return event;
  },
});

Ce fichier active le tracing, les replays masqués et filtre les erreurs non critiques avant envoi vers Sentry.

Configuration serveur et edge

sentry.server.config.ts
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  tracesSampleRate: 0.2,
  enableTracing: true,
  environment: process.env.VERCEL_ENV || 'development',
});

Configuration dédiée au serveur Node.js et aux middlewares edge avec échantillonnage de traces cohérent.

Mise à jour de next.config.js

next.config.js
const { withSentryConfig } = require('@sentry/nextjs');

/** @type {import('next').NextConfig} */
const nextConfig = {
  // votre config Next.js
};

module.exports = withSentryConfig(nextConfig, {
  org: 'votre-org',
  project: 'votre-projet',
  silent: true,
  widenClientFileUpload: true,
  sourcemaps: { disable: false },
});

withSentryConfig injecte automatiquement les plugins webpack nécessaires à l'upload des source maps en production.

Capture d'erreurs personnalisée

app/api/route.ts
import * as Sentry from '@sentry/nextjs';
import { NextResponse } from 'next/server';

export async function GET() {
  try {
    throw new Error('Erreur métier simulée');
  } catch (error) {
    Sentry.captureException(error, {
      tags: { feature: 'api-users' },
      extra: { userId: '123' },
    });
    return NextResponse.json({ error: 'Erreur interne' }, { status: 500 });
  }
}

Capture manuelle avec tags et contexte métier pour un debugging plus rapide dans le dashboard Sentry.

Bonnes pratiques

  • Toujours masquer les données sensibles avant envoi
  • Utiliser des tags cohérents pour filtrer rapidement les erreurs
  • Configurer des alertes par environnement (production vs staging)
  • Maintenir les source maps privés et chiffrés
  • Surveiller le volume de traces pour maîtriser les coûts

Erreurs courantes à éviter

  • Oublier l'upload des source maps en CI/CD
  • Laisser tracesSampleRate à 1.0 en production
  • Ne pas filtrer les erreurs de type ChunkLoadError
  • Exposer le DSN serveur côté client

Pour aller plus loin

Approfondissez ces techniques avec nos formations dédiées à l'observabilité moderne : https://learni-group.com/formations