Error tracking for a Firebase web app

1. Create an Errors project

Sign up (one email, no card), open Errors and create a project for the web app. In the project's settings, the panel headed Point any Sentry SDK here shows a DSN in Sentry's own shape. Copy it whole. A second project for Cloud Functions keeps server errors apart from browser ones, or use one project and tell them apart by environment.

2. The web app on Firebase Hosting

Install the browser SDK, or the package for your framework (@sentry/react, @sentry/vue, @sentry/angular), and initialise it as early as possible in the app's entry file:

import * as Sentry from "@sentry/browser";

Sentry.init({
  dsn: import.meta.env.VITE_ERRORS_DSN, // the Sentry-shaped DSN from your Errors project
  environment: import.meta.env.MODE,
  release: import.meta.env.VITE_RELEASE,
});

That is the only RealUptime-specific line: the DSN. The rest is Sentry's standard setup, so Sentry's own framework guides apply as written. The DSN is not a secret; it can only send events, so it is fine in client code. Deploy with firebase deploy --only hosting as usual.

3. Allow the ingest host

If your site sets a Content Security Policy, the browser will block reports until the ingest host is allowed. On Firebase Hosting, headers live in firebase.json; add the host to connect-src alongside what your policy already allows:

{
  "hosting": {
    "headers": [
      {
        "source": "**",
        "headers": [
          { "key": "Content-Security-Policy", "value": "connect-src 'self' https://ingest.realuptime.io" }
        ]
      }
    ]
  }
}

Skip this step if your site sets no Content-Security-Policy header.

4. Cloud Functions

Errors in Cloud Functions go to the functions logs, where nobody is notified. Sentry publishes @sentry/google-cloud-serverless for Google Cloud Functions; wrap each HTTP function so an uncaught error is reported before the function returns:

const Sentry = require("@sentry/google-cloud-serverless");
const { onRequest } = require("firebase-functions/v2/https");

Sentry.init({ dsn: process.env.ERRORS_DSN });

exports.api = onRequest(
  Sentry.wrapHttpFunction(async (req, res) => {
    // your handler
    res.send("ok");
  }),
);

Set ERRORS_DSN in the function's environment configuration rather than in source. Sentry's Google Cloud Functions guide lists the wrappers for event-driven and CloudEvent functions.

5. Releases and source maps

A production bundle is minified, so its stack traces point at one long line. Set a release in the browser init (a commit hash works) and upload the build's source maps for that release, as described in upload source maps. Frames then show your source file and line. Do not deploy the .map files to Hosting if you would rather not publish your source.

6. Alerts and uptime

Add an alert rule for new issues and regressions, scoped to the production environment, and point it at email, Slack, Google Chat or a webhook. Errors is free for 10,000 events a month. The same account includes Monitor, so add an uptime check on your Hosting URL; Status for a public status page; and Outages, which watches Firebase's own status page. For why Crashlytics has no web SDK, see Crashlytics for web apps.

Flutter web is not covered here yet: we have not tested Sentry's Dart SDK against Errors, and we do not publish setups we have not tested.

Sources: Firebase Crashlytics documentation, Sentry for Google Cloud Functions, Firebase Hosting headers.