Obtenir des rapports d'erreur lisibles dans le tableau de bord Crashlytics (Web)

Sélectionnez une plate-forme : iOS+ Android Web Flutter Unity


Les applications Web compilent, minifient et brouillent les noms de code en production pour optimiser le regroupement réseau. Sans mappages sources, les rapports d'erreur du tableau de bord Crashlytics affichent des traces de la pile minimisées et obscurcies.

Pour désobscurcir vos traces de la pile et afficher les noms de fichiers et les numéros de ligne d'origine dans vos rapports d'erreurs, utilisez la commande de la CLI Firebase pour importer vos mappages sources (fichiers .js.map) dans Firebase.

Prérequis

Avant d'importer des mappages sources, assurez-vous que la CLI Firebase v15.35.0 ou une version ultérieure est installée. Découvrez comment installer ou mettre à jour la CLI Firebase.

Étape 1 : Activez la génération de mappages sources dans la compilation de votre framework

Configurez votre framework ou bundler d'interface pour générer des fichiers sources de production (.js.map) pendant le processus de compilation de votre application :

Angular

Dans Angular, vous devez configurer l'option sourceMap dans votre fichier d'espace de travail angular.json ou transmettre l'option de remplacement de la CLI --source-map :

Option 1 (recommandée) : modifier angular.json

Ouvrez votre fichier angular.json et localisez la configuration de compilation spécifique que vous souhaitez cibler (par exemple, development ou production). Définissez le paramètre sourceMap sous le bloc options ou configurations exact :

"projects": {
  "APP_NAME": {
    "architect": {
      "build": {
        "options": {
          "sourceMap": true
        },
        "configurations": {
          "production": {
            "sourceMap": {
              "scripts": true,
              "vendor": false
            }
          }
        }
      }
    }
  }
}

Option 2 : Remplacement par ligne de commande

Si vous n'avez besoin de cartes sources que pour une compilation de validation ponctuelle ou une session de débogage, ajoutez l'option --source-map directement à votre commande de compilation de la CLI Angular :

ng build --configuration production --source-map

Next.js

Mettez à jour votre fichier next.config.ts (ou next.config.js) pour activer la génération de mappages sources du navigateur lors des builds de production en définissant productionBrowserSourceMaps sur true :

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // Enable browser source map emission for Crashlytics stack trace de-obfuscation
  productionBrowserSourceMaps: true,
  // ... rest of your Next.js configuration
};

export default nextConfig;

Next.js stocke les bundles client générés et les fichiers de mappage source .js.map dans le répertoire .next à la racine de votre projet.

React / Vite

Si votre application React utilise Vite comme bundler de compilation, mettez à jour votre fichier vite.config.ts pour émettre des mappages sources dans ses options de compilation :

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    // Emit sourcemap files for Crashlytics upload
    sourcemap: true,
  },
});

Par défaut, Vite stocke les bundles de sortie générés et les fichiers .js.map dans le répertoire dist.

Étape 2 : Importez les mappages sources à l'aide de la CLI Firebase

Une fois que votre framework a créé vos bundles de production et généré des fichiers .js.map, importez les mappages sources à l'aide de la commande firebase crashlytics:sourcemap:upload :

firebase crashlytics:sourcemap:upload \
  --project PROJECT_ID \
  --app FIREBASE_APP_ID \
  --debug DIRECTORY

Cette commande recherche de manière récursive tous les fichiers .js.map dans le chemin d'accès DIRECTORY fourni (dist ou .next) et les importe dans Cloud Storage pour le mappage des symboles.

Étape 3 : Gérer les mappages de sources

La génération de cartes sources avec les éléments de votre application Web peut les exposer à des requêtes de navigateur publiques, ce qui peut entraîner la fuite de votre code source d'origine. Vous pouvez éviter cela sans perdre les traces de la pile désobscurcies en configurant votre serveur Web pour qu'il refuse l'accès public aux fichiers .js.map ou en transmettant l'option --clean à firebase crashlytics:sourcemap:upload pour supprimer automatiquement les fichiers .js.map de votre répertoire de compilation local après les avoir importés dans Firebase.

Automatiser dans votre pipeline de compilation

Pour importer automatiquement des mappages sources dans Crashlytics et supprimer les fichiers .js.map locaux avant le déploiement, mettez à jour votre script build dans votre fichier package.json pour transmettre l'option --clean à firebase crashlytics:sourcemap:upload :

Angular

"scripts": {
  "build": "ng build && firebase crashlytics:sourcemap:upload --project PROJECT_ID --app FIREBASE_APP_ID --clean --debug dist"
}

Next.js

"scripts": {
  "build": "next build && firebase crashlytics:sourcemap:upload --project PROJECT_ID --app FIREBASE_APP_ID --clean --debug .next"
}

React / Vite

"scripts": {
  "build": "vite build && firebase crashlytics:sourcemap:upload --project PROJECT_ID --app FIREBASE_APP_ID --clean --debug dist"
}

Étapes suivantes

  • Personnaliser les rapports d'erreur : découvrez comment signaler les exceptions gérées, ajouter des clés personnalisées pour accompagner vos traces de la pile désobscurcies et configurer l'échantillonnage.