在 Crashlytics 信息中心内获取易于理解的崩溃报告（Web 版）

选择平台： iOS+ Android Web Flutter Unity


Web 应用会在生产环境中编译、缩减和混淆代码名称，以优化网络捆绑。如果没有源代码映射，Crashlytics 信息中心内的崩溃报告会显示缩减了大小且经过混淆处理的堆栈轨迹。

如需对堆栈轨迹进行去混淆处理，并在 Error Reporting (when used with Stackdriver) 中显示原始文件名和行号，请使用 Firebase CLI 命令将源映射（.js.map 文件）上传到 Firebase。

前提条件

在上传源代码映射之前，请确保您已安装 Firebase CLI v15.35.0 或更高版本。了解如何安装或更新 Firebase CLI。

第 1 步：在框架 build 中启用源映射生成

配置前端框架或打包工具，以便在应用构建过程中生成生产源代码 (.js.map) 文件：

Angular

在 Angular 中，您必须在 angular.json 工作区文件中配置 sourceMap 选项，或传递 --source-map CLI 替换标志：

方法 1（推荐）：修改 angular.json

打开 angular.json 文件，找到要定位到的特定 build 配置（例如 development 或 production）。在确切的 options 或 configurations 代码块下设置 sourceMap 参数：

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

方法 2：命令行替换

如果您只需要为一次性验证 build 或调试会话生成源代码映射，请直接将 --source-map 标志附加到 Angular CLI build 命令：

ng build --configuration production --source-map

Next.js

更新 next.config.ts（或 next.config.js）文件，通过将 productionBrowserSourceMaps 设置为 true，在生产 build 期间启用浏览器源映射生成：

// 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 步：处理源映射

在生成 Web 应用资源的同时生成源代码映射，可能会使这些资源暴露于公共浏览器请求中，从而可能导致原始源代码泄露。您可以采取以下措施来防止这种情况，同时保留去混淆处理的堆栈轨迹：将 Web 服务器配置为拒绝公开访问 .js.map 文件，或者将 --clean 标志传递给 firebase crashlytics:sourcemap:upload，以便在将 .js.map 文件上传到 Firebase 后自动从本地 build 目录中删除这些文件。

在构建流水线中实现自动化

如需在部署前自动将源代码映射上传到 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"
}

后续步骤

  • 自定义崩溃报告 - 了解如何报告已处理的异常、添加自定义键以配合去混淆堆栈轨迹，以及配置采样。