รับรายงานข้อขัดข้องที่อ่านได้ในแดชบอร์ด Crashlytics (เว็บ)

เลือกแพลตฟอร์ม iOS+ Android เว็บ Flutter Unity


เว็บแอปจะคอมไพล์ ลดขนาด และสแครมเบิลชื่อเวอร์ชันในเวอร์ชันที่ใช้งานจริงเพื่อเพิ่มประสิทธิภาพการรวมกลุ่มเครือข่าย หากไม่มีแผนที่แหล่งที่มา รายงานข้อขัดข้องในแดชบอร์ด Crashlytics จะแสดงสแต็กเทรซที่ลดขนาดและสร้างความสับสน

หากต้องการถอดรหัสซอร์สโค้ดที่สร้างความสับสนของสแต็กเทรซและแสดงชื่อไฟล์และหมายเลขบรรทัดต้นฉบับในรายงานข้อผิดพลาด ให้ใช้คำสั่ง Firebase CLI เพื่ออัปโหลดซอร์สแมป (ไฟล์ .js.map) ไปยัง Firebase

ข้อกำหนดเบื้องต้น

ก่อนอัปโหลดแผนที่แหล่งที่มา โปรดตรวจสอบว่าคุณได้ติดตั้ง Firebase CLI v15.35.0 หรือใหม่กว่าแล้ว ดูวิธีติดตั้งหรืออัปเดต Firebase CLI

ขั้นตอนที่ 1: เปิดใช้การสร้างแผนที่แหล่งที่มาในบิลด์เฟรมเวิร์ก

กำหนดค่าเฟรมเวิร์กหรือ Bundler ของฟรอนท์เอนด์เพื่อสร้างไฟล์ซอร์สโค้ดเวอร์ชันที่ใช้งานจริง (.js.map) ในระหว่างกระบวนการสร้างแอป โดยทำดังนี้

Angular

ใน Angular คุณต้องกำหนดค่าตัวเลือก sourceMap ภายในไฟล์พื้นที่ทำงาน angular.json หรือส่งแฟล็กการลบล้าง CLI --source-map ดังนี้

ตัวเลือกที่ 1 (แนะนำ): แก้ไข angular.json

เปิดไฟล์ angular.json และค้นหาการกำหนดค่าบิลด์ที่ต้องการกำหนดเป้าหมาย (เช่น development หรือ production) ตั้งค่าพารามิเตอร์ sourceMap ในบล็อก options หรือ configurations ที่ถูกต้อง ดังนี้

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

ตัวเลือกที่ 2: การลบล้างบรรทัดคำสั่ง

หากต้องการแผนที่แหล่งที่มาสำหรับบิลด์การยืนยันแบบครั้งเดียวหรือเซสชันการแก้ไขข้อบกพร่องเท่านั้น ให้เพิ่มแฟล็ก --source-map ต่อท้ายคำสั่งบิลด์ Angular CLI โดยตรง ดังนี้

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 จะจัดเก็บ Bundle เอาต์พุตที่สร้างขึ้นและไฟล์ .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

คำสั่งนี้จะค้นหาไฟล์ .js.map ทั้งหมดซ้ำๆ ภายในเส้นทาง DIRECTORY ที่ระบุ (dist หรือ .next) และอัปโหลดไปยัง Cloud Storage เพื่อทำการแมปสัญลักษณ์

ขั้นตอนที่ 3: จัดการแผนที่แหล่งที่มา

การสร้างการแมปแหล่งที่มาควบคู่ไปกับชิ้นงานเว็บแอปอาจทำให้การแมปแหล่งที่มาปรากฏต่อคำขอเบราว์เซอร์สาธารณะ ซึ่งอาจทำให้ซอร์สโค้ดต้นฉบับรั่วไหลได้ คุณสามารถป้องกันปัญหานี้ได้โดยไม่สูญเสียสแต็กเทรซที่ถอดรหัสแล้วด้วยการกำหนดค่าเว็บเซิร์ฟเวอร์ให้ปฏิเสธการเข้าถึงไฟล์ .js.map แบบสาธารณะ หรือส่งแฟล็ก --clean ไปยัง firebase crashlytics:sourcemap:upload เพื่อลบไฟล์ .js.map ออกจากไดเรกทอรีบิลด์ในเครื่องโดยอัตโนมัติหลังจากอัปโหลดไปยัง Firebase

ทำให้เป็นอัตโนมัติในไปป์ไลน์บิลด์

หากต้องการอัปโหลดแผนที่แหล่งที่มาไปยัง Crashlytics โดยอัตโนมัติและลบไฟล์ .js.map ในเครื่องก่อนการติดตั้งใช้งาน ให้อัปเดตสคริปต์ build ในไฟล์ package.json เพื่อส่งแฟล็ก --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"
}

ขั้นตอนถัดไป

  • ปรับแต่งรายงานข้อขัดข้อง - ดูวิธีรายงานข้อยกเว้นที่จัดการแล้ว เพิ่มคีย์ที่กำหนดเองเพื่อใช้ร่วมกับสแต็กเทรซที่ถอดรหัสแล้ว และกำหนดค่าการสุ่มตัวอย่าง