@firebase/crashlytics/react-router

Functions

Function Description
CrashlyticsRoutes({ firebaseApp, crashlyticsOptions, children, ...props }, input) (Public Preview) A wrapper around Routes from react-router-dom that automatically captures errors in route components.This component acts as a replacement for Routes from react-router-dom. It wraps the routes in an error boundary that captures errors thrown during rendering and reports them to Crashlytics. The error boundary is reset on navigation (path changes).

Interfaces

Interface Description
Crashlytics (Public Preview) An instance of the Firebase Crashlytics SDK.Do not create this instance directly. Instead, use getCrashlytics().
CrashlyticsFeature (EXPERIMENTAL) An opaque feature plugin object returned by Crashlytics feature factory functions such as breadcrumbs().
CrashlyticsOptions (Public Preview) Options for initializing the Crashlytics service using getCrashlytics().

function({ firebaseApp, crashlyticsOptions, children, ...props }, ...)

CrashlyticsRoutes({ firebaseApp, crashlyticsOptions, children, ...props }, input)

This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.

A wrapper around Routes from react-router-dom that automatically captures errors in route components.

This component acts as a replacement for Routes from react-router-dom. It wraps the routes in an error boundary that captures errors thrown during rendering and reports them to Crashlytics. The error boundary is reset on navigation (path changes).

Signature:

export declare function CrashlyticsRoutes(input: RoutesProps & {
    firebaseApp: FirebaseApp;
    crashlyticsOptions?: CrashlyticsOptions;
}): React.ReactElement | null;

Parameters

Parameter Type Description
{ firebaseApp, crashlyticsOptions, children, ...props } (not declared)
input RoutesProps & { firebaseApp: FirebaseApp; crashlyticsOptions?: CrashlyticsOptions; }

Returns:

React.ReactElement | null

The rendered routes wrapped in an error boundary.

Example

import { useEffect, useState } from "react";
import { CrashlyticsRoutes } from "firebase/crashlytics/react-router";
import { FirebaseApp, initializeApp } from "firebase/app";

export default function MyApp() {
  const [app, setApp] = useState<FirebaseApp | null>(null);

  useEffect(() => {
    if (getApps().length === 0) {
      const newApp = initializeApp({...});
      setApp(newApp);
    } else {
      setApp(getApp());
    }
  }, []);

  return (
    <>
      {app && (
        <CrashlyticsRoutes firebaseApp={app}>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </CrashlyticsRoutes>
      )}
      ...
    </>
  );
}