איך מקבלים דוחות קריסה קריאים במרכז הבקרה של Crashlytics (אינטרנט)

בחירת פלטפורמה: iOS+‎ Android אינטרנט Flutter Unity


אפליקציות אינטרנט מקמפלות, מצמצמות ומערבלות שמות קוד בסביבת הייצור כדי לשפר את החבילה ברשת. בלי מפות מקור, דוחות הקריסה במרכז הבקרה של Crashlytics מציגים דוחות קריסות מוקטנים ומעורפלים.

כדי לבטל את הערפול של דוחות הקריסות ולהציג את השמות המקוריים של הקבצים ואת מספרי השורות בדוחות Error Reporting, משתמשים בפקודת ה-CLI‏ Firebase כדי להעלות את מפות המקור (קובצי .js.map) ל-Firebase.

דרישות מוקדמות

לפני שמעלים מפות מקור, צריך לוודא שמותקנת גרסה 15.35.0 ואילך של ממשק שורת הפקודה של Firebase. איך מתקינים או מעדכנים את ה-CLI של Firebase

שלב 1: מפעילים את היצירה של מפות מקור ב-build של ה-framework

מגדירים את ה-bundler או את ה-framework של הקצה הקדמי כך שייווצרו קובצי מקור (.js.map) בסביבת הייצור במהלך תהליך ה-build של האפליקציה:

Angular

ב-Angular, צריך להגדיר את האפשרות sourceMap בקובץ סביבת העבודה angular.json או להעביר את דגל ההחלפה --source-map ב-CLI:

אפשרות 1 (מומלצת): שינוי של angular.json

פותחים את הקובץ angular.json ומאתרים את תצורת ה-build הספציפית שרוצים לטרגט (למשל development או production). מגדירים את הפרמטר sourceMap בקטע המדויק של options או configurations:

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

אפשרות 2: שינוי באמצעות שורת הפקודה

אם אתם צריכים מפות מקור רק ל-build חד-פעמי של אימות או לסשן של ניפוי באגים, הוסיפו את הדגל --source-map ישירות לפקודת ה-build של Angular CLI:

ng build --configuration production --source-map

Next.js

מעדכנים את הקובץ next.config.ts (או next.config.js) כדי לאפשר יצירה של מפות מקור בדפדפן במהלך גרסאות build בסביבת הייצור, על ידי הגדרת 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 ברמה הבסיסית (root) של הפרויקט.

React / Vite

אם אפליקציית React משתמשת ב-Vite ככלי לאיסוף ה-build, צריך לעדכן את הקובץ vite.config.ts כדי להפיק מפות מקור באפשרויות ה-build:

// 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: מעלים מפות מקור באמצעות ה-CLI של Firebase

אחרי שה-framework יצר את החבילות בסביבת הייצור ואת קובצי ה-.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 מספריית ה-build המקומית אחרי שהם הועלו ל-Firebase.

אוטומציה בצינור עיבוד הנתונים של ה-build

כדי להעלות באופן אוטומטי מפות מקור ל-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"
}

השלבים הבאים

  • התאמה אישית של דוחות קריסה – איך לדווח על חריגות שטופלו, להוסיף מפתחות בהתאמה אישית לדוחות הקריסות שעברו ביטול ערפול (de-obfuscation) ולהגדיר דגימה.