Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

ウェブ向け Crashlytics を使ってみる

プラットフォームを選択:

iOS+ Android Android NDK ウェブ Flutter Unity

このガイドでは、ウェブアプリで Firebase Crashlytics の使用を開始する方法について説明します。

アプリで Firebase Crashlytics SDK を設定すると、Firebase コンソールで包括的なクラッシュレポートを取得できます。ウェブアプリ向け Crashlytics では、エラーに関するレポートを取得できます。

始める前に

Crashlytics を設定するには、Firebase コンソールと IDE の両方でタスク（アプリの Firebase 構成と Crashlytics SDK の追加など）を行う必要があります。設定を完了するには、強制的にテストクラッシュを発生させて、最初のクラッシュレポートを Firebase に送信する必要があります。

ウェブアプリで Crashlytics を手動で設定するには、次の前提条件を満たしていることを確認してください。

Firebase プロジェクトと Firebase アプリをまだ作成していない場合は、作成します。まだ追加していない場合は、Firebase を JavaScript プロジェクトに追加します。
アカウントにプロジェクトのオーナー権限があることを確認します。これは、必要な API と IAM ロールを有効にするために必要です。
Firebase プロジェクトが従量課金制の Blaze のお支払いプランに登録されていることを確認します。ウェブ用 Crashlytics では、テレメトリーストレージに Cloud Logging、ソースマップストレージに Cloud Storage を使用します。これらは有料プロダクトですが、無料枠が用意されています。Logging の料金と Cloud Storage の料金の詳細を確認する。

ステップ 1: ウェブアプリで Crashlytics を有効にする

Crashlytics for Web は Cloud Logging、Error Reporting、Cloud Storage を使用するため、これらの API を有効にして、プロジェクトの権限を構成する必要があります。ウェブアプリで Crashlytics を有効にするには、Firebase コンソールまたは Firebase CLI を使用します。

Firebase コンソールの使用

Firebase コンソールで、[DevOps とエンゲージメント] > [Crashlytics ダッシュボード] に移動します。
ページ上部のプルダウンセレクタからウェブアプリを選択します。
[Crashlytics を設定] をクリックし、画面上の手順に沿って操作します。

Firebase CLI を使用する

ターミナルからプロジェクトを構成する場合や、AI コーディングエージェントを使用する場合は、Firebase CLI を使用できます。

Firebase CLI v15.35.0 以降がインストールされ、認証されている（firebase login）ことを確認します。Firebase CLI をインストールまたは更新する方法を確認してください。
次のコマンドを実行して、ウェブアプリに Crashlytics を設定します。
```
firebase crashlytics:setup \
  --app FIREBASE_APP_ID \
  --project PROJECT_ID
```
このコマンドによって実行される設定手順は次のとおりです。
- プロジェクトが従量課金制の Blaze のお支払いプランに登録されていることを確認し、必要に応じてアップグレードするよう求められます。
- 必要な Crashlytics API とテレメトリー API（firebasetelemetry.googleapis.com、firebasetelemetryadmin.googleapis.com、firebasecrashlytics.googleapis.com、clienttelemetry.googleapis.com）を有効にします。
- ウェブアプリの API キーに API 制限がある場合は、許可された API に clienttelemetry.googleapis.com を追加します。
- ウェブアプリの Crashlytics テレメトリー設定を構成します。
- インタラクティブに実行すると、新規の問題と再発した問題に関するメール通知アラートを有効にするかどうかを尋ねるプロンプトが表示されます。

ステップ 2: アプリに SDK を追加して初期化する

Crashlytics SDK をインストールします。
```
npm install firebase
```

FirebaseApp インスタンスを初期化します。

シングルトン初期化を使用する中央構成ユーティリティファイルを作成します。Firebase アプリの構成値を確認するには、Firebase コンソールの [プロジェクトの設定] > [全般] ページに移動し、[マイアプリ] カードに移動して、ウェブアプリを選択します。

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

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "AUTH_DOMAIN",
  projectId: "PROJECT_ID",
  storageBucket: "STORAGE_BUCKET",
  messagingSenderId: "MESSAGING_SENDER_ID",
  appId: "FIREBASE_APP_ID"
};

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

ステップ 3: フレームワークのエラーの自動キャプチャを構成する

自動フレームワークエラーレシーバーと手動トラッカーは、どちらも共有の FirebaseApp インスタンスを使用します。自動エラーキャプチャを構成するフレームワークを選択します。

Angular

src/app/app.config.ts のアプリのプロバイダに provideCrashlytics(() => app) を追加して、Angular のグローバルエラーキャッチランタイムと自動ルートトラッキングを統合します。

// src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideCrashlytics } from '@firebase/crashlytics/angular';
import { app } from '../lib/firebase'; // Shared initialization script
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideCrashlytics(() => app)
  ]
};

Next.js

Next.js 15.3 以降（推奨）: クライアントの計測（instrumentation-client.ts）

Next.js 15.3 以降には、instrumentation-client.ts（または instrumentation-client.js）を介したネイティブのクライアントサイド計測が含まれています。Next.js は、React のハイドレーションが開始される前に、ブラウザでこのファイルを実行します。

src/instrumentation-client.ts（src/ ディレクトリを使用していない場合は、プロジェクトのルートに instrumentation-client.ts）を作成し、Crashlytics を初期化します。

// src/instrumentation-client.ts
import { getCrashlytics } from '@firebase/crashlytics';
import { app } from './lib/firebase'; // Shared initialization script

getCrashlytics(app);

この単一のファイルは、React のハイドレーションの前に Crashlytics を初期化し、src/app/layout.tsx や React コンポーネントを変更することなく、グローバルエラーリスナー（error と unhandledrejection）を自動的に登録します。

Next.js < 15.3: クライアントサイド（App Router レイアウト）

15.3 より前の Next.js バージョンでは、layout.tsx はデフォルトでサーバーコンポーネントです。FirebaseApp はシリアル化できないため、'use client' ディレクティブでマークされたクライアントコンポーネント（src/components/CrashlyticsProvider.tsx など）で <FirebaseCrashlytics>（@firebase/crashlytics/react から Crashlytics を初期化し、キャッチされていないエラーをキャプチャする）をラップします。

// src/components/CrashlyticsProvider.tsx
'use client';

import React from 'react';
import { FirebaseCrashlytics } from '@firebase/crashlytics/react';
import { app } from '../lib/firebase'; // Shared initialization script

export function CrashlyticsProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <FirebaseCrashlytics firebaseApp={app} />
      {children}
    </>
  );
}

次に、ルートレイアウトを <CrashlyticsProvider> でラップします。

// src/app/layout.tsx
import React from 'react';
import { CrashlyticsProvider } from '../components/CrashlyticsProvider';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <CrashlyticsProvider>
          {children}
        </CrashlyticsProvider>
      </body>
    </html>
  );
}

React（React Router なし）

ルートアプリコンポーネント（通常は src/App.tsx または src/main.tsx）を <FirebaseCrashlytics> エラー境界コンポーネントでラップします。これはグローバルレシーバーとして機能し、ブラウザと React UI からの未処理の拒否と例外を処理します。すべての子コンポーネント階層をラップし、キャッチされなかった例外やルーティングエラーを自動的にキャプチャします。

// src/App.tsx
import React from 'react';
import { FirebaseCrashlytics } from '@firebase/crashlytics/react';
import { app } from './lib/firebase'; // Shared initialization script

export default function App({
  children,
}: {
  children?: React.ReactNode;
}) {
  return (
    <FirebaseCrashlytics firebaseApp={app}>
      {children}
    </FirebaseCrashlytics>
  );
}

React Router（v6 以降）

React Router v6 以降を使用している場合は、React Router の <Routes> コンテナを <CrashlyticsRoutes> に置き換えます。これにより、ルート全体のエラー境界が自動的にマッピングされ、/profile/:userId などのテンプレート化されたパス名を使用してエラーが追跡されます。

// src/App.tsx
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { CrashlyticsRoutes } from '@firebase/crashlytics/react-router';
import { app } from './lib/firebase'; // Shared initialization script
import Home from './pages/Home';
import Profile from './pages/Profile';
import Product from './pages/Product';

export default function App() {
  return (
    <BrowserRouter>
      <CrashlyticsRoutes firebaseApp={app}>
        <Route path="/" element={<Home />} />
        <Route path="/profile/:userId" element={<Profile />} />
        <Route path="/product/:productId/details" element={<Product />} />
      </CrashlyticsRoutes>
    </BrowserRouter>
  );
}

TanStack Router

アプリで TanStack Router を使用している場合は、getCrashlytics(app) を使用して Crashlytics を初期化し、ルーターインスタンス構成（defaultOnCatch）内にデフォルトのエラー記録を直接アタッチします。

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

import { createRouter } from '@tanstack/react-router';
import { routeTree } from './routeTree.gen';

const crashlytics = getCrashlytics(app);

const router = createRouter({
  routeTree,
  defaultOnCatch: (error, errorInfo) => {
    recordError(crashlytics, error, errorInfo);
  },
});

（省略可）ステップ 4: アプリのバージョニングを設定する

ウェブアプリのビルドに明確なバージョン文字列を追加することを強くおすすめします。これにより、リグレッションを特定のデプロイに分離できます。フレームワークの Crashlytics SDK を初期化するときに、CrashlyticsOptions で appVersion を渡します（リリース文字列またはビルド時の環境変数（process.env.NEXT_PUBLIC_APP_VERSION や import.meta.env.VITE_APP_VERSION など）を使用）。

Angular

appVersion を含む CrashlyticsOptions オブジェクトを 2 番目の引数として src/app/app.config.ts の provideCrashlytics に渡します。

// src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideCrashlytics } from '@firebase/crashlytics/angular';
import { app } from '../lib/firebase'; // Shared initialization script
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideCrashlytics(() => app, {
      appVersion: 'APP_VERSION'
    })
  ]
};

Next.js

Next.js 15.3 以降（推奨）: クライアントの計測（instrumentation-client.ts）

appVersion を含む CrashlyticsOptions オブジェクトを 2 番目の引数として src/instrumentation-client.ts の getCrashlytics に渡します。

// src/instrumentation-client.ts
import { getCrashlytics } from '@firebase/crashlytics';
import { app } from './lib/firebase'; // Shared initialization script

getCrashlytics(app, {
  appVersion: 'APP_VERSION'
});

Next.js < 15.3: クライアントサイド（App Router レイアウト）

appVersion を指定した crashlyticsOptions を src/components/CrashlyticsProvider.tsx の <FirebaseCrashlytics> に渡します。

// src/components/CrashlyticsProvider.tsx
'use client';

import React from 'react';
import { FirebaseCrashlytics } from '@firebase/crashlytics/react';
import { app } from '../lib/firebase'; // Shared initialization script

const crashlyticsOptions = {
  appVersion: 'APP_VERSION'
};

export function CrashlyticsProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <FirebaseCrashlytics
        firebaseApp={app}
        crashlyticsOptions={crashlyticsOptions}
      />
      {children}
    </>
  );
}

React（React Router なし）

appVersion を指定した crashlyticsOptions を src/App.tsx の <FirebaseCrashlytics> に渡します。

// src/App.tsx
import React from 'react';
import { FirebaseCrashlytics } from '@firebase/crashlytics/react';
import { app } from './lib/firebase'; // Shared initialization script

const crashlyticsOptions = {
  appVersion: 'APP_VERSION'
};

export default function App({
  children,
}: {
  children?: React.ReactNode;
}) {
  return (
    <FirebaseCrashlytics
      firebaseApp={app}
      crashlyticsOptions={crashlyticsOptions}
    >
      {children}
    </FirebaseCrashlytics>
  );
}

React Router（v6 以降）

appVersion を指定した crashlyticsOptions を src/App.tsx の <CrashlyticsRoutes> に渡します。

// src/App.tsx
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { CrashlyticsRoutes } from '@firebase/crashlytics/react-router';
import { app } from './lib/firebase'; // Shared initialization script
import Home from './pages/Home';
import Profile from './pages/Profile';
import Product from './pages/Product';

const crashlyticsOptions = {
  appVersion: 'APP_VERSION'
};

export default function App() {
  return (
    <BrowserRouter>
      <CrashlyticsRoutes
        firebaseApp={app}
        crashlyticsOptions={crashlyticsOptions}
      >
        <Route path="/" element={<Home />} />
        <Route path="/profile/:userId" element={<Profile />} />
        <Route path="/product/:productId/details" element={<Product />} />
      </CrashlyticsRoutes>
    </BrowserRouter>
  );
}

TanStack Router

appVersion を含む CrashlyticsOptions オブジェクトを 2 番目の引数として getCrashlytics に渡します。

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

import { createRouter } from '@tanstack/react-router';
import { routeTree } from './routeTree.gen';

const crashlytics = getCrashlytics(app, {
  appVersion: 'APP_VERSION'
});

const router = createRouter({
  routeTree,
  defaultOnCatch: (error, errorInfo) => {
    recordError(crashlytics, error, errorInfo);
  },
});

ステップ 5: テストクラッシュを強制的に発生させる

Crashlytics の設定を完了し、Firebase コンソールの Crashlytics ダッシュボードで最初のデータを確認するには、強制的にテストクラッシュを発生させる必要があります。

強制的にテストクラッシュを発生させるためのコードをアプリに追加します。

React、Next.js、Angular アプリにテストボタンまたはルートトリガーを追加します。このボタンまたはトリガーをクリックすると、ランタイムエラーがスローされます。
```
// Trigger an unhandled exception on button click or route load
function handleTestCrash() {
  throw new Error("Crashlytics Web SDK Test Unhandled Error!");
}
```
<FirebaseCrashlytics>（React または Next.js）、provideCrashlytics（Angular）、<CrashlyticsRoutes>（React Router）を使用して自動エラーキャプチャを構成した場合、このエラーをスローすると、例外が自動的にキャプチャされ、アップロードがスケジュールされます。
アプリをビルドして実行し、テストエラーをトリガーして、アプリから Firebase に最初のクラッシュレポートが送信されるようにします。
Firebase コンソールで、[DevOps & Engagement] > [Crashlytics ダッシュボード] に移動して、テストクラッシュレポートを確認します。
1. ページ上部のプルダウンセレクタからウェブアプリを選択します。
2. ページを更新すると、数分以内に、テスト例外が [問題] テーブルに表示されます。

コンソールを更新し、5 ～ 10 分経過してもテストクラッシュが表示されない場合は、設定のトラブルシューティングをご覧ください。

Crashlytics がウェブアプリのエラーをモニタリングするようになりました。すべてのレポートと統計情報を参照して調査するには、Crashlytics ダッシュボードにアクセスします。

次のステップ

読み取り可能なクラッシュレポートを取得する: ソースマップ（.js.map）の自動アップロードを設定して、本番環境のスタックトレースに元のファイル名と行番号が表示されるようにします。
クラッシュレポートをカスタマイズする: 処理された例外を報告する方法、カスタムキーを追加する方法、テレメトリーレコードを強制的にフラッシュする方法、サンプリングを構成する方法について説明します。

ウェブ向け Crashlytics を使ってみる コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

始める前に

ステップ 1: ウェブアプリで Crashlytics を有効にする

Firebase コンソールの使用

Firebase CLI を使用する

ステップ 2: アプリに SDK を追加して初期化する

ステップ 3: フレームワークのエラーの自動キャプチャを構成する

Angular

Next.js

React（React Router なし）

React Router（v6 以降）

TanStack Router

（省略可）ステップ 4: アプリのバージョニングを設定する

Angular

Next.js

React（React Router なし）

React Router（v6 以降）

TanStack Router

ステップ 5: テスト クラッシュを強制的に発生させる

次のステップ

ウェブ向け Crashlytics を使ってみる

ステップ 5: テストクラッシュを強制的に発生させる