Comment intégrer Sentry monitoring avancé 2026

Introduction

Sentry est la référence en observabilité applicative, surpassant les logs basiques par sa capacité à capturer erreurs, ralentissements et flux utilisateur en temps réel. En 2026, avec les apps fullstack comme Next.js 15+, intégrer Sentry n'est plus optionnel : c'est essentiel pour déboguer en production sans downtime. Ce tutoriel avancé vous guide pas à pas pour une implémentation complète – frontend, backend, tracing distribué et métriques custom. Imaginez : un utilisateur clique, une erreur surgit, Sentry capture le stacktrace, le contexte session et les performances API en un dashboard intuitif. Pour un dev senior, cela signifie réduction de 70% du MTTR (Mean Time To Resolution). Nous couvrons configs TypeScript natives, instrumentation auto et optimisations SEO-friendly pour vos issues. Prêt à transformer vos alertes en insights actionnables ? (128 mots)

Prérequis

Node.js 20+ et npm/yarn/pnpm
Next.js 15+ avec App Router (TypeScript)
Compte Sentry.io gratuit (ou self-hosted)
Connaissances avancées en React Server Components et middleware
Vercel ou serveur Node pour déploiement

Création du projet et installation du SDK

terminal

npx create-next-app@latest sentry-app --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
cd sentry-app
npm install @sentry/nextjs@latest
npm install --save-dev @sentry/webpack-plugin@latest
npm run dev

Cette commande initialise un projet Next.js moderne et installe le SDK Sentry officiel, optimisé pour App Router. Le plugin Webpack assure l'upload automatique des sourcemaps en build. Lancez dev pour tester ; évitez les versions outdated qui cassent le tree-shaking.

Configuration de base du projet

Créez un projet Sentry via l'interface (Organization > New Project > Next.js). Récupérez votre DSN (Data Source Name) et authToken. Ajoutez ces variables d'environnement dans .env.local : NEXT_PUBLIC_SENTRY_DSN=votre_dsn et SENTRY_AUTH_TOKEN=votre_token. Cela active l'instrumentation auto pour erreurs client/serveur. Pour l'advanced, préparez release pour corréler builds et erreurs.

Configuration Next.js avec plugin Sentry

next.config.js

const { withSentryConfig } = require('@sentry/nextjs');

const nextConfig = {
  experimental: {
    ppr: true,
  },
  transpilePackages: [],
};

const sentryWebpackPluginOptions = {
  silent: true,
  org: "votre-org",
  project: "votre-projet",
};

module.exports = withSentryConfig(nextConfig, sentryWebpackPluginOptions);

Ce next.config.js intègre le plugin Sentry pour sourcemaps et releases auto en build (npm run build). Remplacez org et project par vos valeurs Sentry. Piège : sans silent: true, les logs polluent ; activez PPR (Partial Prerendering) pour perf 2026 sans conflit.

Config client Sentry (erreurs browser)

src/sentry.client.config.ts

import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 1.0,

  // Capture 20% des transactions pour performance
  profilesSampleRate: 0.2,

  // Ajout de contexte custom
  integrations: [
    Sentry.browserProfilingIntegration(),
    Sentry.replayIntegration({
      maskAllText: false,
      blockAllMedia: true,
    }),
  ],

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for tracing
  beforeSendTransaction: (event) => {
    // Modifiez tags avant envoi
    event.tags = { ...event.tags, env: 'prod' };
    return event;
  },
});

Initialise Sentry côté client avec profiling et session replay. tracesSampleRate: 1.0 trace tout en dev ; baissez en prod. beforeSendTransaction customise events pour filtrage/tagging. Évitez maskAllText: true si vous avez besoin de text pour debug.

Instrumentation serveur et middleware

Important : Importez ces configs dans layout.tsx : import './sentry.client.config'; import './sentry.server.config';. Pour le tracing distribué, un middleware capture spans API. Cela propage traces de client à serveur, idéal pour microservices.

Config serveur Sentry et middleware tracing

src/middleware.ts

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 1.0,
});

export function middleware(request: NextRequest) {
  // Capture performance API
  return Sentry.withServerSpan(
    { op: 'http.server', name: request.nextUrl.pathname },
    () => {
      const response = NextResponse.next();
      Sentry.getCurrentHub()
        ?.getScope()
        ?.setTransactionName(request.nextUrl.pathname);
      return response;
    }
  );
}

export const config = {
  matcher: '/((?!_next/static|_next/image|favicon.ico|.*pdf|.*svg).*)',
};

Ce middleware wrappe requests en spans Sentry pour tracing end-to-end. withServerSpan auto-capture timings ; matcher exclut assets statiques. Piège : oubliez getCurrentHub et les traces se perdent. Parfait pour analyser bottlenecks API.

Config serveur dédiée

src/sentry.server.config.ts

import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 1.0,

  // Auto-instrument Next.js
  integrations: [
    new Sentry.Integrations.ServerRuntimeDetection(),
    new Sentry.Integrations.Modules(),
    new Sentry.Integrations.Http({ tracing: true }),
    new Sentry.Integrations.ContextLines(),
    new Sentry.Integrations.LocalVariables(),
  ],

  // Patch Node globals
  integrations: [new Sentry.Integrations.Otel()],

  beforeSend(event) {
    // Filtre PII
    if (event.exception) {
      event.exception.values?.forEach((exc) => {
        exc.stacktrace?.frames?.forEach((frame) => {
          frame.filename = frame.filename?.replace(/auth_token=[^\s]+/, 'auth_token=***');
        });
      });
    }
    return event;
  },
});

Active OpenTelemetry et HTTP tracing côté serveur. beforeSend scrubbe données sensibles comme tokens. Ajoutez LocalVariables pour vars debug en prod (limité). Évitez overload : tracesSampleRate <0.5 en high-traffic.

Ajout de contexte utilisateur et breadcrumbs

Pour contextualiser erreurs, utilisez Sentry.setUser et addBreadcrumb dans components. Cela lie issues à sessions réelles, boostant résolution x3.

Exemple d'usage avec contexte dans une page

src/app/page.tsx

import * as Sentry from '@sentry/nextjs';

import { headers } from 'next/headers';

export default async function Home() {
  'use server';
  const userId = headers().get('x-user-id') || 'anonymous';

  // Contexte utilisateur
  Sentry.setUser({ id: userId, ip_address: 'auto' });
  Sentry.setTag('feature', 'dashboard');

  // Breadcrumb pour actions
  Sentry.addBreadcrumb({
    category: 'auth',
    message: 'User login attempt',
    level: Sentry.Severity.Info,
  });

  // Simule erreur pour test
  if (Math.random() < 0.1) {
    throw new Error('Test Sentry capture');
  }

  return <div>Bienvenue ! Erreurs monitorées par Sentry.</div>;
}

Injecte user context et breadcrumbs dans RSC. 'use server' assure exécution serveur. Testez avec erreur random ; en prod, wrappez async ops. Piège : oubliez headers() dynamique, context se perd en SSR.

Bonnes pratiques

Sampling intelligent : tracesSampleRate: 0.1 en prod, 1.0 en staging ; utilisez beforeSend pour filtrer noise.
Releases & Sourcemaps : Toujours tagger builds (sentry-cli releases new v1.0) pour stacktraces originaux.
Alertes custom : Configurez Slack/Teams via Sentry UI sur metrics clés (LCP >2s).
PII Scrubbing : Activez globalement + custom beforeSend pour GDPR.
Profiling : Limitez à 20% (profilesSampleRate) pour éviter quota exceed.

Erreurs courantes à éviter

DSN mal placée : NEXT_PUBLIC_ seulement pour client ; serveur utilise sans prefix.
Pas de sourcemaps : Build sans plugin → stacktraces minifiés illisibles.
Tracing incomplet : Oubli middleware → spans client/serveur déconnectés.
Over-sampling : 100% traces en prod sature quota (500k events/mois gratuit).
Ignore dev errors : Ajoutez debug: false et environment: process.env.NODE_ENV.

Pour aller plus loin

Approfondissez avec OpenTelemetry + Sentry pour microservices. Intégrez Prometheus/Grafana pour metrics hybrides. Découvrez nos formations Learni sur l'observabilité : Next.js Expert et DevOps Avancé. Rejoignez la communauté Discord Learni pour Q&A live.

Comment intégrer Sentry pour un monitoring avancé en 2026