دریافت گزارش‌های خرابی خوانا در داشبورد Crashlytics (وب)

انتخاب پلاتفرم: iOS+ Android Web Flutter Unity


برنامه‌های وب نام‌های کد را در تولید کامپایل، کوچک، و درهم می‌کنند تا بسته‌بندی شبکه را بهینه‌سازی کنند. بدون نگاشت‌های منبع، گزارش‌های خرابی در داشبورد Crashlytics ردیابی‌های پشته‌ای کوچک‌شده و مبهم را نشان می‌دهند.

برای لغو مبهم‌سازی ردیابی‌های پشته و نمایش نام‌های فایل اصلی و شماره‌های خط در گزارش‌های خطا، از فرمان Firebase CLI برای بارگذاری نقشه‌های منبع (فایل‌های .js.map) در Firebase استفاده کنید.

پیش‌نیازها

قبل‌از بارگذاری نقشه‌های منبع، مطمئن شوید که Firebase CLI نسخه ۱۵.۳۵.۰ یا جدیدتر را نصب کرده‌اید. با نحوه نصب یا به‌روزرسانی Firebase CLI آشنا شوید.

مرحله ۱: تولید نگاشت منبع را در ساخت چارچوبتان فعال کنید

چارچوب یا بسته‌بندی‌کننده پیش‌نمای خود را برای تولید فایل‌های منبع تولید (.js.map) درطول فرایند ساخت برنامه پیکربندی کنید:

Angular

در Angular، باید گزینه sourceMap را در فایل فضای کاری angular.json پیکربندی کنید یا پرچم لغو CLI --source-map را ارسال کنید:

گزینه ۱ (توصیه‌شده): اصلاح angular.json

فایل angular.json را باز کنید و پیکربندی ساخت خاصی را که می‌خواهید هدف قرار دهید (مانند development یا production) پیدا کنید. پارامتر sourceMap را دقیقاً زیر بلوک options یا configurations تنظیم کنید:

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

گزینه ۲: لغو خط فرمان

اگر فقط برای یک جلسه اشکال‌زدایی یا ساخت درستی‌سنجی یک‌باره به نقشه‌های منبع نیاز دارید، پرچم --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 به‌طور پیش‌فرض بسته‌های برونداد تولیدشده و فایل‌های .js.map را در دایرکتوری dist ذخیره می‌کند.

مرحله ۲: بارگذاری نقشه‌های منبع بااستفاده از 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 بارگذاری می‌کند.

مرحله ۳: مدیریت نقشه‌های منبع

تولید نقشه‌های منبع در کنار دارایی‌های برنامه وب شما می‌تواند آن‌ها را درمعرض درخواست‌های مرورگر عمومی قرار دهد و احتمالاً باعث لو رفتن کد منبع اصلی شما شود. می‌توانید بدون ازدست دادن ردیابی‌های پشته ابهام‌زدایی‌شده، با پیکربندی کردن وب‌سرور خود برای رد کردن دسترسی عمومی به فایل‌های .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"
}

مراحل بعدی

  • سفارشی‌سازی گزارش‌های خرابی — با نحوه گزارش کردن استثناهای رسیدگی‌شده، افزودن کلیدهای سفارشی برای همراهی ردگیری‌های پشته ابهام‌زدایی‌شده، و پیکربندی نمونه‌برداری آشنا شوید.