npm.io
0.1.0 • Published 5d agoCLI

@firebase/crashlytics

Licence
Apache-2.0
Version
0.1.0
Deps
21
Size
2.9 MB
Vulns
0
Weekly
0
Stars
5.2K
SummaryDependencyVersions

Firebase Crashlytics for Web Apps - Setup Guide

Crashlytics for Web Apps is currently in Private Preview and available only for enrolled EAP (Early Access Program) customers. If you are not yet enrolled, please fill out the sign-up form to request access before configuring your application.

We’re excited for you to try out Crashlytics for your web app and share your feedback!

Crashlytics for Next.js, React, Angular, React Router, and TanStack Router apps includes client-side error reporting, de-minified stack traces, and a dedicated dashboard in the Firebase Crashlytics Console.

Crashlytics for web apps uses Cloud Logging for telemetry storage and Cloud Storage for sourcemap storage under the hood, which are paid products with a generous free tier. Learn more about Logging pricing and Storage pricing.

As a private preview customer, your experience is incredibly valuable to our team. Please submit bugs, API feedback, or feature requests directly to our team by emailing crashlytics-web@google.com or filling out this feedback form.

Table of Contents

Agent Setup Prompt

You can ask your coding agent to do everything for you! Use our sample prompt below to set up Crashlytics for your web app automatically.

When you copy this into your coding agent, make sure to do the following before running:

  1. Fill in the correct apiKey and appId for your web app in firebaseConfig, which can be found in the Firebase Console in Settings > General. Note: This assumes you already have a Firebase project created with a web app within.
  2. Point your coding agent to the GitHub README files in packages/crashlytics/.
I would like to set up the Crashlytics JS SDK to my app. My firebase app config is as follows:

const firebaseConfig = {
  apiKey: "<YOUR_FIREBASE_API_KEY>",
  authDomain: "YOUR_PROJECT_NAME.firebaseapp.com",
  projectId: "YOUR_PROJECT_NAME",
  storageBucket: "YOUR_PROJECT_NAME.firebasestorage.app",
  appId: "<YOUR_FIREBASE_APP_ID>"
};

Follow the instructions in the Firebase Crashlytics Web Setup Guide GitHub READMEs for setting up the Crashlytics Web SDK. Start with the Cloud Project Setup (using the Firebase CLI), initialize the SDK, and then follow the Setup Guide for my app’s framework to enable automatic error collection. Do not set up programmatic error capturing for this project. Replace any of the "<SOME_VARIABLE>" values in the instructions with the appropriate values based on my Firebase app config above. Also make sure to set up source map uploading for stack trace de-obfuscation. If you encounter any issues during the setup process, please ask me and I can assist you further. Ensure that you have the necessary permissions to access the Firebase project and that you have the Firebase CLI installed and configured on your machine, logged in as me (ask me to log in on your behalf).

Step 1: Configure Firebase/Cloud Project

Crashlytics for web leverages Google Cloud Logging, Error Reporting, and Storage under the hood. You can configure your project automatically using the Firebase Console (recommended) or the Firebase CLI (particularly useful when using coding agents).

If you are coming from an existing Google Cloud project and have not previously used Firebase with that project, you must accept the Firebase Terms of Service in the Firebase Console before proceeding with project setup.

Option 1: Using Firebase Console (Recommended)
  1. Navigate to the Firebase Console Crashlytics page.
  2. Select your project.
  3. Click Set up and follow the steps in the console.
Option 2: Using Firebase CLI

If you prefer configuring your project via the terminal or using an AI coding agent, run the following command:

firebase crashlytics:setup <YOUR_FIREBASE_APP_ID> --project <YOUR_FIREBASE_PROJECT_ID>

Prerequisites: Requires Firebase CLI v15.34.2 or later, Owner/Editor project permissions, and Blaze billing enabled. Authentication: Ensure you are authenticated and using the correct project:

firebase login
firebase use <YOUR_FIREBASE_PROJECT_ID>

Automated Setup: This command automatically enables the required Telemetry APIs (clienttelemetry.googleapis.com, firebasetelemetry.googleapis.com, firebasetelemetryadmin.googleapis.com, and firebasecrashlytics.googleapis.com), updates API key restrictions for clienttelemetry.googleapis.com (if restricted), provisions the firebase-telemetry Cloud Logging bucket and routing sink, configures telemetry settings for your web app, and optionally sets up email alerts for new and regressed issues.

Step 2: Core SDK Installation & Initialization

Before configuring framework-specific integrations, complete the core package installation and Firebase App singleton setup:

Install Packages

Install the Firebase JS SDK:

npm install firebase
Initialize Firebase App Singleton

Create a central configuration utility file (src/lib/firebase.ts) using the credentials found in the Firebase Console under Settings > General. Both manual trackers and framework interfaces leverage this initialized FirebaseApp instance.

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

const firebaseConfig = {
  apiKey: "<YOUR_FIREBASE_API_KEY>",
  authDomain: "<YOUR_AUTH_DOMAIN>",
  projectId: "<YOUR_FIREBASE_PROJECT_ID>",
  storageBucket: "<YOUR_STORAGE_BUCKET>",
  messagingSenderId: "<YOUR_MESSAGING_SENDER_ID>",
  appId: "<YOUR_FIREBASE_APP_ID>"
};

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

Step 3: Framework-Specific Setup Guides

Make sure you have completed Step 1 (Configure Firebase/Cloud Project) and Step 2 (Core SDK Installation & Initialization) above before proceeding to your framework's setup guide below!

Select the guide matching your application framework:

Step 4: Force an Initial Crash

To verify that your setup is working and that crashes are properly delivered to Firebase Crashlytics, you can force a test crash in your application.

To ensure the crash is triggered on demand (and doesn't block application startup or fail server-side builds), add the following line inside a user interaction handler (such as a button click handler or event listener) in your application:

throw new Error("Test Crash");
Verify the Crash in the Console
  1. Run your application and trigger the crash by performing the action (such as clicking the test button).
  2. Open the Firebase Console Crashlytics dashboard.
  3. Select your project to view the newly logged crash report.

It may take a few minutes for new crash reports to appear in the Firebase Crashlytics console.

Debugging with AI Agents

AI coding agents can assist in diagnosing and resolving web crashes directly within your development environment.

MCP Tools (crashlytics:connect)

Crashlytics provides Model Context Protocol (MCP) tools that let agents query crash data—including issues, report groups, event payloads, and stack traces—without manual copy-pasting.

  • crashlytics:connect Prompt: A guided interactive workflow that prioritizes top issues, investigates de-obfuscated sourcemaps against your local codebase, and helps the agent draft fixes. Learn more in the Crashlytics AI assistance with MCP documentation.
REST API & Web Browser Metadata

You and your agents can also programmatically query the Firebase Crashlytics REST API.

Web error events and report groups expose browser-specific telemetry dimensions to help identify platform anomalies:

Field Description Example
browser.platform Client OS / platform architecture "macintosh", "windows", "linux"
user_agent.name Browser client application name "chrome", "firefox", "safari", "edge"
user_agent.version Major/minor version of the browser client "150"
user_agent.original Raw User-Agent string from the client request "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)..."

Additional Configuration & References

For advanced usage options and project configuration details, consult the following guides: