測試 Crashlytics 導入作業 (網頁)

選取平台: iOS+ Android Web Flutter Unity


如果您已按照入門指南操作,但 Crashlytics 資訊主頁仍未顯示當機資料,請參閱本指南。

強制當機以測試導入成果

  1. 在應用程式中加入程式碼,強制造成測試當機。

    在 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) 設定自動擷取錯誤,擲回這項錯誤會自動擷取例外狀況,並排定上傳時間。

  2. 建構並執行應用程式,然後觸發測試錯誤,讓應用程式將第一份當機報告傳送至 Firebase。

  3. 在 Firebase 控制台中,依序前往 「DevOps & Engagement」>「Crashlytics dashboard」 ,查看測試當機報告:

    1. 從頁面頂端的下拉式選單中選取網頁應用程式。

    2. 重新整理頁面。測試例外狀況應該會在幾分鐘內顯示在「Issues」(問題) 表格中。

如果重新整理控制台後,五到十分鐘內仍未看到測試當機,請參閱下一節,瞭解如何排解設定問題。

排解設定問題

如果您觸發了測試當機,但五到十分鐘後仍未在Crashlytics資訊主頁中看到報告,請嘗試重新執行設定流程,或在控制台中驗證下列專案設定:

  • 重新執行 Crashlytics 設定流程:您可以放心重新執行 Firebase CLI 設定指令 (firebase crashlytics:setup),或按照入門指南第 1 步所述,在 Firebase 控制台中完成設定。重新執行設定會自動啟用缺少的 API,並修復 firebase-telemetry Cloud Logging bucket 和轉送接收器。

  • 檢查帳單和 IAM 權限:確認 Firebase 專案採用即付即用 Blaze 定價方案,且執行設定步驟時,您的帳戶具備專案的擁有者權限。

  • 驗證 firebasetelemetry.googleapis.com API 金鑰限制:在 Google Cloud 控制台的「Credentials」(憑證) 頁面中,選取 firebaseConfig 物件中設定的 API 金鑰 (例如 Browser key (auto created by Firebase))。如果金鑰已啟用 API 限制,請確認允許的 API 清單中包含 Firebase Telemetry API (firebasetelemetry.googleapis.com)。如果受限制的 API 金鑰缺少這個目標,網路的上傳要求就會失敗,瀏覽器控制台會顯示 HTTP 403 (禁止) 錯誤。

  • 檢查已啟用的 Google Cloud API:在 Google Cloud 控制台的「Enabled APIs & services」(已啟用的 API 和服務) 頁面中,確認專案已啟用 Firebase Telemetry API (firebasetelemetry.googleapis.com)、Firebase Telemetry Admin API (firebasetelemetryadmin.googleapis.com)、Cloud Logging API (logging.googleapis.com) 和 Cloud Storage (storage.googleapis.com)。

  • 驗證記錄檔 bucket 的記錄檔分析功能:在 Google Cloud 控制台的「Logs Storage」(記錄檔儲存空間) 頁面中,確認 firebase-telemetry bucket (global 位置) 存在且已啟用記錄檔分析功能,並查看「Log Router」(記錄檔路由器) 頁面,確認 firebase-telemetry-routing 接收器存在。

手動擷取及清除測試例外狀況

如要立即驗證端對端傳輸,而不等待記憶體批次處理或頁面卸載,請搭配使用 recordError 和 flush:

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

const crashlytics = getCrashlytics(app);

async function triggerImmediateTestCrash() {
  const error = new Error("Crashlytics Web SDK Test Handled Error!");
  // Capture the error with immediate priority and custom diagnostic metadata
  recordError(crashlytics, error, {
    priority: 'IMMEDIATE',
    testEvent: true,
    environment: 'staging_verification'
  });
  // Force an immediate upload before the browser terminates or reloads
  await flush(crashlytics);
  console.log("Test error flushed to Crashlytics successfully.");
}

後續步驟

  • 取得可讀的當機報告:設定自動上傳來源對應 (.js.map),讓實際工作環境堆疊追蹤顯示原始檔案名稱和行號。

  • 自訂當機報告:瞭解如何回報已處理的例外狀況、新增自訂鍵、強制清除遙測記錄,以及設定取樣。