Google utilise la technologie IA pour traduire le contenu dans votre langue préférée. Les traductions générées par IA peuvent contenir des erreurs.

Premiers pas avec Crashlytics pour le Web

Sélectionnez une plate-forme :

iOS+ Android NDK Android Web Flutter Unity

Ce guide explique comment faire vos premiers pas avec Firebase Crashlytics dans votre application Web.

Une fois que vous avez configuré le SDK Firebase Crashlytics dans votre application, vous pouvez obtenir des rapports d'erreur complets dans la console Firebase. Avec Crashlytics pour les applications Web, vous obtenez des rapports sur les erreurs.

Avant de commencer

La configuration de Crashlytics nécessite des tâches à la fois dans la console Firebase et dans votre IDE (comme l'ajout de la configuration Firebase de votre application et du SDK Crashlytics). Pour terminer la configuration, vous devez forcer un plantage test afin d'envoyer votre premier rapport d'erreur à Firebase.

Pour configurer manuellement Crashlytics dans votre application Web, assurez-vous d'avoir rempli les conditions préalables suivantes :

Créez un projet Firebase et une application Firebase si vous n'en avez pas déjà. Si ce n'est pas déjà fait, ajoutez Firebase à votre projet JavaScript.
Assurez-vous que votre compte dispose des autorisations de propriétaire sur votre projet. Cela est nécessaire pour activer les API et les rôles IAM requis.
Assurez-vous que votre projet Firebase est associé au forfait Blaze avec paiement à l'usage. Crashlytics pour le Web utilise Cloud Logging pour le stockage de la télémétrie et Cloud Storage pour le stockage des mappages sources, qui sont des produits payants avec un niveau sans frais. En savoir plus sur la tarification de Logging et la tarification de Cloud Storage.

Étape 1 : Activez Crashlytics pour votre application Web

Crashlytics pour le Web utilise Cloud Logging, Error Reporting et Cloud Storage. Vous devez donc activer ces API et configurer les autorisations pour votre projet. Vous pouvez activer Crashlytics pour votre application Web à l'aide de la console Firebase ou de la CLI Firebase.

Utiliser la console Firebase

Dans la console Firebase, accédez à DevOps et engagement > Tableau de bord Crashlytics.
Sélectionnez votre application Web dans le menu déroulant en haut de la page.
Cliquez sur Configurer Crashlytics, puis suivez les instructions à l'écran.

Utiliser la CLI Firebase

Si vous préférez configurer votre projet depuis le terminal ou à l'aide d'un agent de codage IA, vous pouvez utiliser la CLI Firebase :

Assurez-vous d'avoir installé la version 15.35.0 ou ultérieure de la CLI Firebase et d'être authentifié (firebase login). Découvrez comment installer ou mettre à jour la CLI Firebase.
Exécutez la commande suivante pour configurer Crashlytics pour votre application Web :
```
firebase crashlytics:setup \
  --app FIREBASE_APP_ID \
  --project PROJECT_ID
```
Cette commande effectue les étapes de configuration suivantes :
- Vérifie que votre projet est associé au forfait Blaze avec paiement à l'usage et vous invite à passer à ce forfait si nécessaire.
- Active les API Crashlytics et de télémétrie requises (firebasetelemetry.googleapis.com, firebasetelemetryadmin.googleapis.com, firebasecrashlytics.googleapis.com et clienttelemetry.googleapis.com).
- Si la clé API de votre application Web comporte des restrictions d'API, ajoutez clienttelemetry.googleapis.com à ses API autorisées.
- Configure les paramètres de télémétrie Crashlytics pour votre application Web.
- Lorsqu'elle est exécutée de manière interactive, elle vous invite à activer éventuellement les alertes par e-mail pour les problèmes nouveaux et régressés.

Étape 2 : Ajoutez et initialisez le SDK dans votre application

Installez le SDK Crashlytics :
```
npm install firebase
```

Initialisez votre instance FirebaseApp :

Créez un fichier d'utilitaire de configuration central pour utiliser l'initialisation singleton. Pour trouver les valeurs de configuration de votre application Firebase, accédez à la page Paramètres du projet > Général dans la console Firebase, accédez à la fiche Vos applications, puis sélectionnez votre application Web.

// src/lib/firebase.ts
import { initializeApp, getApps, getApp } from '@firebase/app';

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "AUTH_DOMAIN",
  projectId: "PROJECT_ID",
  storageBucket: "STORAGE_BUCKET",
  messagingSenderId: "MESSAGING_SENDER_ID",
  appId: "FIREBASE_APP_ID"
};

// Guarantee singleton initialization across renders or module refreshes
export const app = getApps().length === 0
  ? initializeApp(firebaseConfig)
  : getApp();

Étape 3 : Configurez la capture automatique des erreurs pour votre framework

Les récepteurs d'erreurs de framework automatiques et les traceurs manuels utilisent votre instance FirebaseApp partagée. Sélectionnez votre framework pour configurer la capture automatique des erreurs :

Angular

Intégrez l'environnement d'exécution Angular de détection globale des erreurs et le suivi automatique des routes en ajoutant provideCrashlytics(() => app) aux fournisseurs de votre application dans src/app/app.config.ts :

// src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideCrashlytics } from '@firebase/crashlytics/angular';
import { app } from '../lib/firebase'; // Shared initialization script
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideCrashlytics(() => app)
  ]
};

Next.js

Next.js 15.3 ou version ultérieure (recommandé) : instrumentation du client (instrumentation-client.ts)

Next.js 15.3 et versions ultérieures incluent une instrumentation native côté client via instrumentation-client.ts (ou instrumentation-client.js). Next.js exécute ce fichier dans le navigateur avant le début de l'hydratation React.

Créez src/instrumentation-client.ts (ou instrumentation-client.ts à la racine de votre projet si vous n'utilisez pas de répertoire src/) et initialisez Crashlytics :

// src/instrumentation-client.ts
import { getCrashlytics } from '@firebase/crashlytics';
import { app } from './lib/firebase'; // Shared initialization script

getCrashlytics(app);

Ce fichier unique initialise Crashlytics avant l'hydratation React et enregistre automatiquement les écouteurs d'erreurs globaux (error et unhandledrejection) sans aucune modification de src/app/layout.tsx ni d'aucun composant React.

Next.js < 15.3 : côté client (mise en page du routeur d'application)

Pour les versions de Next.js antérieures à la version 15.3, layout.tsx est un composant serveur par défaut. Comme FirebaseApp n'est pas sérialisable, encapsulez <FirebaseCrashlytics> (de @firebase/crashlytics/react pour initialiser Crashlytics et capturer les erreurs non interceptées) dans un composant client (tel que src/components/CrashlyticsProvider.tsx) marqué avec la directive 'use client' :

// src/components/CrashlyticsProvider.tsx
'use client';

import React from 'react';
import { FirebaseCrashlytics } from '@firebase/crashlytics/react';
import { app } from '../lib/firebase'; // Shared initialization script

export function CrashlyticsProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <FirebaseCrashlytics firebaseApp={app} />
      {children}
    </>
  );
}

Encapsulez ensuite votre mise en page racine avec <CrashlyticsProvider> :

// src/app/layout.tsx
import React from 'react';
import { CrashlyticsProvider } from '../components/CrashlyticsProvider';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <CrashlyticsProvider>
          {children}
        </CrashlyticsProvider>
      </body>
    </html>
  );
}

React (sans React Router)

Encapsulez le composant racine de votre application (généralement src/App.tsx ou src/main.tsx) avec le composant de limite d'erreur <FirebaseCrashlytics>. Il agit en tant que récepteur global, gérant les rejets et les exceptions non gérés du navigateur et de l'interface utilisateur React. Il encapsule toutes les hiérarchies de composants enfants et capture automatiquement les exceptions non interceptées ou les erreurs de routage :

// src/App.tsx
import React from 'react';
import { FirebaseCrashlytics } from '@firebase/crashlytics/react';
import { app } from './lib/firebase'; // Shared initialization script

export default function App({
  children,
}: {
  children?: React.ReactNode;
}) {
  return (
    <FirebaseCrashlytics firebaseApp={app}>
      {children}
    </FirebaseCrashlytics>
  );
}

React Router (v6+)

Si vous utilisez React Router v6 ou une version ultérieure, remplacez le conteneur <Routes> de React Router par <CrashlyticsRoutes>. Cela permet de mapper automatiquement les limites d'erreur entre les routes et de suivre les erreurs à l'aide de noms de chemin d'accès basés sur des modèles, tels que /profile/:userId :

// src/App.tsx
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { CrashlyticsRoutes } from '@firebase/crashlytics/react-router';
import { app } from './lib/firebase'; // Shared initialization script
import Home from './pages/Home';
import Profile from './pages/Profile';
import Product from './pages/Product';

export default function App() {
  return (
    <BrowserRouter>
      <CrashlyticsRoutes firebaseApp={app}>
        <Route path="/" element={<Home />} />
        <Route path="/profile/:userId" element={<Profile />} />
        <Route path="/product/:productId/details" element={<Product />} />
      </CrashlyticsRoutes>
    </BrowserRouter>
  );
}

TanStack Router

Si votre application utilise TanStack Router, initialisez Crashlytics avec getCrashlytics(app) et associez l'enregistrement des erreurs par défaut directement dans la configuration de votre instance de routeur (defaultOnCatch) :

import { recordError, getCrashlytics } from '@firebase/crashlytics';
import { app } from './lib/firebase'; // Shared initialization script

import { createRouter } from '@tanstack/react-router';
import { routeTree } from './routeTree.gen';

const crashlytics = getCrashlytics(app);

const router = createRouter({
  routeTree,
  defaultOnCatch: (error, errorInfo) => {
    recordError(crashlytics, error, errorInfo);
  },
});

(Facultatif) Étape 4 : Configurez la gestion des versions de l'application

Nous vous recommandons vivement d'ajouter une chaîne de version claire à vos builds d'application Web afin de pouvoir isoler les régressions dans des déploiements spécifiques. Transmettez appVersion dans CrashlyticsOptions lors de l'initialisation du SDK Crashlytics pour votre framework (à l'aide d'une chaîne de version ou d'une variable d'environnement au moment de la compilation, telle que process.env.NEXT_PUBLIC_APP_VERSION ou import.meta.env.VITE_APP_VERSION) :

Angular

Transmettez un objet CrashlyticsOptions avec appVersion comme deuxième argument à provideCrashlytics dans src/app/app.config.ts :

// src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideCrashlytics } from '@firebase/crashlytics/angular';
import { app } from '../lib/firebase'; // Shared initialization script
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideCrashlytics(() => app, {
      appVersion: 'APP_VERSION'
    })
  ]
};

Next.js

Next.js 15.3 ou version ultérieure (recommandé) : instrumentation du client (instrumentation-client.ts)

Transmettez un objet CrashlyticsOptions avec appVersion comme deuxième argument à getCrashlytics dans src/instrumentation-client.ts :

// src/instrumentation-client.ts
import { getCrashlytics } from '@firebase/crashlytics';
import { app } from './lib/firebase'; // Shared initialization script

getCrashlytics(app, {
  appVersion: 'APP_VERSION'
});

Next.js < 15.3 : côté client (mise en page du routeur d'application)

Transmettez crashlyticsOptions avec appVersion à <FirebaseCrashlytics> dans src/components/CrashlyticsProvider.tsx :

// src/components/CrashlyticsProvider.tsx
'use client';

import React from 'react';
import { FirebaseCrashlytics } from '@firebase/crashlytics/react';
import { app } from '../lib/firebase'; // Shared initialization script

const crashlyticsOptions = {
  appVersion: 'APP_VERSION'
};

export function CrashlyticsProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <FirebaseCrashlytics
        firebaseApp={app}
        crashlyticsOptions={crashlyticsOptions}
      />
      {children}
    </>
  );
}

React (sans React Router)

Transmettez crashlyticsOptions avec appVersion à <FirebaseCrashlytics> dans src/App.tsx :

// src/App.tsx
import React from 'react';
import { FirebaseCrashlytics } from '@firebase/crashlytics/react';
import { app } from './lib/firebase'; // Shared initialization script

const crashlyticsOptions = {
  appVersion: 'APP_VERSION'
};

export default function App({
  children,
}: {
  children?: React.ReactNode;
}) {
  return (
    <FirebaseCrashlytics
      firebaseApp={app}
      crashlyticsOptions={crashlyticsOptions}
    >
      {children}
    </FirebaseCrashlytics>
  );
}

React Router (v6+)

Transmettez crashlyticsOptions avec appVersion à <CrashlyticsRoutes> dans src/App.tsx :

// src/App.tsx
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { CrashlyticsRoutes } from '@firebase/crashlytics/react-router';
import { app } from './lib/firebase'; // Shared initialization script
import Home from './pages/Home';
import Profile from './pages/Profile';
import Product from './pages/Product';

const crashlyticsOptions = {
  appVersion: 'APP_VERSION'
};

export default function App() {
  return (
    <BrowserRouter>
      <CrashlyticsRoutes
        firebaseApp={app}
        crashlyticsOptions={crashlyticsOptions}
      >
        <Route path="/" element={<Home />} />
        <Route path="/profile/:userId" element={<Profile />} />
        <Route path="/product/:productId/details" element={<Product />} />
      </CrashlyticsRoutes>
    </BrowserRouter>
  );
}

TanStack Router

Transmettez un objet CrashlyticsOptions avec appVersion comme deuxième argument à getCrashlytics :

import { recordError, getCrashlytics } from '@firebase/crashlytics';
import { app } from './lib/firebase'; // Shared initialization script

import { createRouter } from '@tanstack/react-router';
import { routeTree } from './routeTree.gen';

const crashlytics = getCrashlytics(app, {
  appVersion: 'APP_VERSION'
});

const router = createRouter({
  routeTree,
  defaultOnCatch: (error, errorInfo) => {
    recordError(crashlytics, error, errorInfo);
  },
});

Étape 5 : Forcer un plantage de test

Pour terminer la configuration de Crashlytics et afficher les données initiales dans le tableau de bord Crashlytics de la console Firebase, vous devez forcer un plantage de test.

Ajoutez du code à votre application pour forcer un plantage de test.

Ajoutez un bouton de test ou un déclencheur de routage à votre application React, Next.js ou Angular qui génère une erreur d'exécution lorsque l'utilisateur clique dessus :
```
// Trigger an unhandled exception on button click or route load
function handleTestCrash() {
  throw new Error("Crashlytics Web SDK Test Unhandled Error!");
}
```
Si vous avez configuré la capture automatique des erreurs avec <FirebaseCrashlytics> (React ou Next.js), provideCrashlytics (Angular) ou <CrashlyticsRoutes> (React Router), le déclenchement de cette erreur capture automatiquement l'exception et planifie son importation.
Créez et exécutez votre application, puis déclenchez l'erreur de test pour que votre application envoie son premier rapport d'erreur à Firebase.
Dans la console Firebase, accédez au tableau de bord DevOps et engagement > Crashlytics pour vérifier votre rapport d'erreur de test :
1. Sélectionnez votre application Web dans le menu déroulant en haut de la page.
2. Actualisez la page. Votre exception de test devrait apparaître dans le tableau Problèmes d'ici quelques minutes.

Si vous avez actualisé la console et que vous ne voyez toujours pas le plantage de test après cinq à dix minutes, consultez Résoudre les problèmes de configuration.

Crashlytics surveille désormais votre application Web pour détecter les erreurs. Accédez au tableau de bord Crashlytics pour afficher et examiner tous vos rapports et statistiques.

Étapes suivantes

Obtenir des rapports d'erreur lisibles : configurez l'importation automatique des mappages sources (.js.map) pour que les traces de la pile de production affichent les noms de fichiers et les numéros de ligne d'origine.
Personnaliser les rapports d'erreur : découvrez comment signaler les exceptions gérées, ajouter des clés personnalisées, forcer l'effacement des enregistrements de télémétrie et configurer l'échantillonnage.

Premiers pas avec Crashlytics pour le Web Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Avant de commencer

Étape 1 : Activez Crashlytics pour votre application Web

Utiliser la console Firebase

Utiliser la CLI Firebase

Étape 2 : Ajoutez et initialisez le SDK dans votre application

Étape 3 : Configurez la capture automatique des erreurs pour votre framework

Angular

Next.js

React (sans React Router)

React Router (v6+)

TanStack Router

(Facultatif) Étape 4 : Configurez la gestion des versions de l'application

Angular

Next.js

React (sans React Router)

React Router (v6+)

TanStack Router

Étape 5 : Forcer un plantage de test

Étapes suivantes

Premiers pas avec Crashlytics pour le Web