Nhận báo cáo sự cố dễ đọc trong trang tổng quan Crashlytics (Web)

Chọn nền tảng: iOS+ Android Web Flutter Unity


Ứng dụng web biên dịch, rút gọn và xáo trộn tên mã trong phiên bản chính thức để tối ưu hoá việc đóng gói mạng. Nếu không có bản đồ nguồn, báo cáo sự cố trong trang tổng quan Crashlytics sẽ hiển thị dấu vết ngăn xếp đã được rút gọn và làm rối mã nguồn.

Để gỡ rối mã nguồn dấu vết ngăn xếp và hiển thị tên tệp cũng như số dòng ban đầu trong báo cáo lỗi, hãy dùng lệnh CLI Firebase để tải bản đồ nguồn (tệp .js.map) lên Firebase.

Điều kiện tiên quyết

Trước khi tải bản đồ nguồn lên, hãy đảm bảo rằng bạn đã cài đặt Firebase CLI phiên bản 15.35.0 trở lên. Tìm hiểu cách cài đặt hoặc cập nhật CLI Firebase.

Bước 1: Bật tính năng tạo bản đồ nguồn trong bản dựng khung của bạn

Định cấu hình khung hoặc trình đóng gói giao diện người dùng để tạo tệp nguồn (.js.map) chính thức trong quá trình tạo ứng dụng:

Angular

Trong Angular, bạn phải định cấu hình tuỳ chọn sourceMap bên trong tệp không gian làm việc angular.json hoặc truyền cờ ghi đè CLI --source-map:

Cách 1 (nên dùng): Sửa đổi angular.json

Mở tệp angular.json rồi tìm cấu hình bản dựng cụ thể mà bạn muốn nhắm đến (chẳng hạn như development hoặc production). Đặt tham số sourceMap trong khối options hoặc configurations chính xác:

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

Cách 2: Ghi đè dòng lệnh

Nếu bạn chỉ cần bản đồ nguồn cho một bản dựng xác minh một lần hoặc phiên gỡ lỗi, hãy thêm trực tiếp cờ --source-map vào lệnh bản dựng Angular CLI:

ng build --configuration production --source-map

Next.js

Cập nhật tệp next.config.ts (hoặc next.config.js) để bật tính năng tạo bản đồ nguồn của trình duyệt trong quá trình tạo bản dựng chính thức bằng cách đặt productionBrowserSourceMaps thành 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 lưu trữ các gói ứng dụng và tệp .js.map bản đồ nguồn được tạo bên trong thư mục .next trong thư mục gốc của dự án.

React / Vite

Nếu ứng dụng React của bạn sử dụng Vite làm trình đóng gói bản dựng, hãy cập nhật tệp vite.config.ts để phát hành bản đồ nguồn trong các tuỳ chọn bản dựng:

// 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,
  },
});

Theo mặc định, Vite lưu trữ các gói đầu ra được tạo và tệp .js.map trong thư mục dist.

Bước 2: Tải bản đồ nguồn lên bằng Firebase CLI

Sau khi khung của bạn đã tạo các gói phát hành công khai và tạo tệp .js.map, hãy tải bản đồ nguồn lên bằng lệnh firebase crashlytics:sourcemap:upload:

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

Lệnh này tìm kiếm định kỳ tất cả tệp .js.map trong đường dẫn DIRECTORY được cung cấp (dist hoặc .next) và tải các tệp đó lên Cloud Storage để liên kết biểu tượng.

Bước 3: Xử lý bản đồ nguồn

Việc tạo bản đồ nguồn cùng với các thành phần ứng dụng web có thể khiến các thành phần đó bị lộ trước các yêu cầu công khai của trình duyệt, có khả năng làm rò rỉ mã nguồn ban đầu của bạn. Bạn có thể ngăn chặn điều này mà không làm mất dấu vết ngăn xếp đã được gỡ rối bằng cách định cấu hình máy chủ web để từ chối quyền truy cập công khai vào các tệp .js.map hoặc bằng cách truyền cờ --clean đến firebase crashlytics:sourcemap:upload để tự động xoá các tệp .js.map khỏi thư mục bản dựng cục bộ sau khi tải các tệp đó lên Firebase.

Tự động hoá trong quy trình xây dựng

Để tự động tải bản đồ nguồn lên Crashlytics và xoá các tệp .js.map cục bộ trước khi triển khai, hãy cập nhật tập lệnh build trong tệp package.json để truyền cờ --clean đến 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"
}

Các bước tiếp theo

  • Tuỳ chỉnh báo cáo sự cố – Tìm hiểu cách báo cáo các ngoại lệ đã xử lý, thêm khoá tuỳ chỉnh để đi kèm với dấu vết ngăn xếp đã loại bỏ làm rối mã nguồn và định cấu hình lấy mẫu.