Tester votre implémentation de Crashlytics (Web)

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


Utilisez ce guide si vous avez suivi le guide de démarrage, mais que vous ne voyez toujours pas de plantages dans le tableau de bord Crashlytics.

Forcer un plantage pour tester votre implémentation

  1. 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.

  2. 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.

  3. 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 test après cinq à dix minutes, consultez la section suivante sur le dépannage de votre configuration.

Résoudre les problèmes de configuration

Si vous avez déclenché un plantage de test et que vous ne voyez toujours pas de rapports dans le tableau de bord Crashlytics après cinq à dix minutes, essayez de relancer le processus de configuration ou de vérifier les configurations de projet suivantes dans la console :

  • Réexécutez le processus de configuration de Crashlytics : vous pouvez réexécuter la commande de configuration de la CLI Firebase (firebase crashlytics:setup) ou terminer la configuration dans la console Firebase, comme décrit à l'étape 1 du guide de démarrage. La réexécution de la configuration active automatiquement les API manquantes et répare le bucket firebase-telemetry Cloud Logging et le récepteur de routage.

  • Vérifiez la facturation et les autorisations IAM : assurez-vous que votre projet Firebase est associé au forfait Blaze avec paiement à l'usage et que votre compte dispose des autorisations de propriétaire sur le projet lors de l'étape de configuration.

  • Vérifiez les restrictions de la clé API firebasetelemetry.googleapis.com : sur la page Identifiants de la console Google Cloud, sélectionnez la clé API configurée dans votre objet firebaseConfig (par exemple, Browser key (auto created by Firebase)). Si des restrictions d'API sont activées pour la clé, vérifiez que l'API Firebase Telemetry (firebasetelemetry.googleapis.com) est incluse dans la liste des API autorisées. Si cette cible est manquante dans une clé API restreinte, les requêtes d'importation réseau échouent avec des erreurs HTTP 403 (Forbidden) dans la console de votre navigateur.

  • Vérifiez les API Google Cloud activées : sur la page API et services activés de la console Google Cloud, vérifiez que l'API Firebase Telemetry (firebasetelemetry.googleapis.com), l'API Firebase Telemetry Admin (firebasetelemetryadmin.googleapis.com), l'API Cloud Logging (logging.googleapis.com) et Cloud Storage (storage.googleapis.com) sont activées pour votre projet.

  • Vérifiez l'Analyse de journaux sur le bucket de journalisation : sur la page Stockage des journaux de la console Google Cloud, vérifiez que le bucket firebase-telemetry (emplacement global) existe et que l'Analyse de journaux est activée. Consultez la page Routeur de journaux pour confirmer que le récepteur firebase-telemetry-routing existe.

Capturer et vider manuellement une exception de test

Si vous souhaitez vérifier immédiatement la transmission de bout en bout sans attendre la mise en lot de la mémoire ou le déchargement de la page, utilisez recordError avec flush :

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

const crashlytics = getCrashlytics(app);

async function triggerImmediateTestCrash() {
  const error = new Error("Crashlytics Web SDK Test Handled Error!");
  // Capture the error with immediate priority and custom diagnostic metadata
  recordError(crashlytics, error, {
    priority: 'IMMEDIATE',
    testEvent: true,
    environment: 'staging_verification'
  });
  // Force an immediate upload before the browser terminates or reloads
  await flush(crashlytics);
  console.log("Test error flushed to Crashlytics successfully.");
}

Étapes suivantes

  • Obtenir des rapports d'erreur lisibles : configurez l'importation automatique des mappages de sources (.js.map) afin 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.