Crashlytics ダッシュボードで読み取り可能なクラッシュ レポートを取得する（ウェブ）

プラットフォームを選択: iOS+ Android Web Flutter Unity


ウェブアプリは、ネットワーク バンドルを最適化するために、本番環境でコード名をコンパイル、縮小、スクランブルします。ソースマップがない場合、Crashlytics ダッシュボードのクラッシュ レポートには、縮小および難読化されたスタック トレースが表示されます。

スタック トレースの難読化を解除し、Error Reporting に元のファイル名と行番号を表示するには、Firebase CLI コマンドを使用してソースマップ（.js.map ファイル）を Firebase にアップロードします。

前提条件

ソースマップをアップロードする前に、Firebase CLI v15.35.0 以降がインストールされていることを確認してください。Firebase CLI をインストールまたは更新する方法を学習する。

ステップ 1: フレームワーク ビルドでソースマップの生成を有効にする

アプリのビルドプロセス中に本番環境のソース（.js.map）ファイルを生成するように、フロントエンド フレームワークまたはバンドラを構成します。

Angular

Angular では、angular.json ワークスペース ファイル内で sourceMap オプションを構成するか、--source-map CLI オーバーライド フラグを渡す必要があります。

オプション 1 （推奨）: angular.json を変更する

angular.json ファイルを開き、ターゲットとする特定のビルド構成（development や production など）を見つけます。options ブロックまたは configurations ブロックの下に sourceMap パラメータを設定します。

"projects": {
  "APP_NAME": {
    "architect": {
      "build": {
        "options": {
          "sourceMap": true
        },
        "configurations": {
          "production": {
            "sourceMap": {
              "scripts": true,
              "vendor": false
            }
          }
        }
      }
    }
  }
}

オプション 2: コマンドライン オーバーライド

1 回限りの検証ビルドまたはデバッグ セッションにのみソースマップが必要な場合は、Angular CLI ビルドコマンドに --source-map フラグを直接追加します。

ng build --configuration production --source-map

Next.js

next.config.ts（または next.config.js）ファイルを更新して、productionBrowserSourceMaps を true に設定し、本番環境ビルド中にブラウザのソースマップ生成を有効にします。

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // Enable browser source map emission for Crashlytics stack trace de-obfuscation
  productionBrowserSourceMaps: true,
  // ... rest of your Next.js configuration
};

export default nextConfig;

Next.js は、生成されたクライアント バンドルとソースマップ .js.map ファイルを、プロジェクト ルートの .next ディレクトリに保存します。

React / Vite

React アプリがビルドバンドラーとして Vite を使用している場合は、vite.config.ts ファイルを更新して、ビルド オプション内でソースマップを出力します。

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    // Emit sourcemap files for Crashlytics upload
    sourcemap: true,
  },
});

Vite は、生成された出力バンドルと .js.map ファイルをデフォルトで dist ディレクトリに保存します。

ステップ 2: Firebase CLI を使用してソースマップをアップロードする

フレームワークが本番環境バンドルをビルドし、.js.map ファイルを生成したら、firebase crashlytics:sourcemap:upload コマンドを使用してソースマップをアップロードします。

firebase crashlytics:sourcemap:upload \
  --project PROJECT_ID \
  --app FIREBASE_APP_ID \
  --debug DIRECTORY

このコマンドは、指定された DIRECTORY パス（dist または .next）内のすべての .js.map ファイルを再帰的に検索し、シンボル マッピングのために Cloud Storage にアップロードします。

ステップ 3: ソースマップを処理する

ウェブアプリのアセットとともにソースマップを生成すると、公開ブラウザ リクエストに公開され、元のソースコードが漏洩する可能性があります。難読化解除されたスタック トレースを失うことなくこれを防ぐには、.js.map ファイルへの公開アクセスを拒否するようにウェブサーバーを構成するか、--clean フラグを firebase crashlytics:sourcemap:upload に渡して、Firebase にアップロードした後にローカル ビルド ディレクトリから .js.map ファイルを自動的に削除します。

ビルド パイプラインで自動化する

ソースマップを Crashlytics に自動的にアップロードし、デプロイ前にローカルの .js.map ファイルを削除するには、package.json ファイルの build スクリプトを更新して、--clean フラグを firebase crashlytics:sourcemap:upload に渡します。

Angular

"scripts": {
  "build": "ng build && firebase crashlytics:sourcemap:upload --project PROJECT_ID --app FIREBASE_APP_ID --clean --debug dist"
}

Next.js

"scripts": {
  "build": "next build && firebase crashlytics:sourcemap:upload --project PROJECT_ID --app FIREBASE_APP_ID --clean --debug .next"
}

React / Vite

"scripts": {
  "build": "vite build && firebase crashlytics:sourcemap:upload --project PROJECT_ID --app FIREBASE_APP_ID --clean --debug dist"
}

次のステップ