Crashlytics डैशबोर्ड (वेब) में, क्रैश रिपोर्ट को आसानी से पढ़ा जा सकता है

प्लैटफ़ॉर्म चुनें: iOS+ Android वेब Flutter Unity


वेब ऐप्लिकेशन, प्रोडक्शन में कोड नेम को कंपाइल, छोटा, और स्क्रैंबल करते हैं, ताकि नेटवर्क बंडलिंग को ऑप्टिमाइज़ किया जा सके. सोर्स मैप के बिना, Crashlytics डैशबोर्ड में क्रैश रिपोर्ट, स्टैक ट्रेस को छोटा करके और छिपाकर दिखाती हैं.

स्टैक ट्रेस को डी-ऑब्फ़स्केट करने और गड़बड़ी की रिपोर्ट में ओरिजनल फ़ाइल के नाम और लाइन नंबर दिखाने के लिए, Firebase सीएलआई कमांड का इस्तेमाल करके, सोर्स मैप (.js.map फ़ाइलें) Firebase पर अपलोड करें.

ज़रूरी शर्तें

सोर्स मैप अपलोड करने से पहले, पक्का करें कि आपके पास Firebase सीएलआई का 15.35.0 या इसके बाद का वर्शन इंस्टॉल हो. Firebase सीएलआई को इंस्टॉल या अपडेट करने का तरीका जानें.

पहला चरण: अपने फ़्रेमवर्क बिल्ड में सोर्स मैप जनरेट करने की सुविधा चालू करना

ऐप्लिकेशन बनाने की प्रोसेस के दौरान, प्रोडक्शन सोर्स (.js.map) फ़ाइलें जनरेट करने के लिए, अपने फ़्रंटएंड फ़्रेमवर्क या बंडलर को कॉन्फ़िगर करें:

Angular

Angular में, आपको अपनी angular.json फ़ाइल फ़ोल्डर फ़ाइल में sourceMap विकल्प को कॉन्फ़िगर करना होगा या --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 सीएलआई का इस्तेमाल करके सोर्स मैप अपलोड करना

फ़्रेमवर्क से प्रोडक्शन बंडल बनाने और .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 पर अपलोड करता है.

तीसरा चरण: सोर्स मैप मैनेज करना

अपने वेब ऐप्लिकेशन की ऐसेट के साथ सोर्स मैप जनरेट करने से, वे सार्वजनिक ब्राउज़र अनुरोधों के लिए उपलब्ध हो सकते हैं. इससे आपका ओरिजनल सोर्स कोड लीक हो सकता है. डी-ऑब्फ़स्केट किए गए स्टैक ट्रेस को खोए बिना, इसे रोका जा सकता है. इसके लिए, अपने वेब सर्वर को इस तरह कॉन्फ़िगर करें कि वह .js.map फ़ाइलों के सार्वजनिक ऐक्सेस को अस्वीकार कर दे. इसके अलावा, firebase crashlytics:sourcemap:upload को --clean फ़्लैग पास करके, Firebase पर अपलोड करने के बाद, अपनी लोकल बिल्ड डायरेक्ट्री से .js.map फ़ाइलों को अपने-आप मिटाया जा सकता है.

अपनी बिल्ड पाइपलाइन में ऑटोमेट करना

सोर्स मैप को 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"
}

अगले चरण