Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

वेब के लिए Crashlytics का इस्तेमाल शुरू करना

प्लैटफ़ॉर्म चुनें:

iOS+ Android Android NDK वेब Flutter Unity

इस गाइड में, अपने वेब ऐप्लिकेशन में Firebase Crashlytics का इस्तेमाल शुरू करने का तरीका बताया गया है.

अपने ऐप्लिकेशन में Firebase Crashlytics SDK टूल सेट अप करने के बाद, आपको Firebase कंसोल में क्रैश की पूरी रिपोर्ट मिल सकती है. वेब ऐप्लिकेशन के लिए Crashlytics की मदद से, आपको गड़बड़ियों की रिपोर्ट मिलती हैं.

शुरू करने से पहले

Crashlytics को सेट अप करने के लिए, Firebase कंसोल और आईडीई, दोनों में टास्क पूरे करने होंगे. जैसे, अपने ऐप्लिकेशन का Firebase कॉन्फ़िगरेशन और Crashlytics SDK टूल जोड़ना. सेटअप पूरा करने के लिए, आपको Firebase को अपनी पहली क्रैश रिपोर्ट भेजने के लिए, टेस्ट क्रैश को ज़बरदस्ती रोकना होगा.

अपने वेब ऐप्लिकेशन में Crashlytics को मैन्युअल तरीके से सेट अप करने के लिए, पक्का करें कि आपने ये ज़रूरी शर्तें पूरी की हों:

अगर आपके पास पहले से कोई Firebase प्रोजेक्ट और Firebase ऐप्लिकेशन नहीं है, तो उसे बनाएं. अगर आपने पहले से ही A/B टेस्टिंग नहीं बनाई है, तो अपने JavaScript प्रोजेक्ट में Firebase जोड़ें.
पक्का करें कि आपके खाते के पास, आपके प्रोजेक्ट के लिए मालिक की अनुमतियां हों. ज़रूरी एपीआई और IAM भूमिकाओं को चालू करने के लिए, यह ज़रूरी है.
पक्का करें कि आपका Firebase प्रोजेक्ट, इस्तेमाल के हिसाब से पैसे चुकाने वाले ब्लेज़ प्लान पर हो. वेब के लिए Crashlytics, टेलीमेट्री स्टोरेज के लिए Cloud Logging और सोर्स मैप स्टोरेज के लिए Cloud Storage का इस्तेमाल करता है. ये पैसे चुकाकर इस्तेमाल किए जाने वाले प्रॉडक्ट हैं. हालांकि, इन्हें बिना किसी शुल्क के भी इस्तेमाल किया जा सकता है. Logging की कीमत और Cloud Storage की कीमत के बारे में ज़्यादा जानें.

पहला चरण: अपने वेब ऐप्लिकेशन के लिए Crashlytics को चालू करना

वेब के लिए Crashlytics, Cloud Logging, गड़बड़ी की रिपोर्टिंग, और Cloud Storage का इस्तेमाल करता है. इसलिए, आपको ये एपीआई चालू करने होंगे और अपने प्रोजेक्ट के लिए अनुमतियां कॉन्फ़िगर करनी होंगी. Firebase कंसोल या Firebase सीएलआई का इस्तेमाल करके, अपने वेब ऐप्लिकेशन के लिए Crashlytics को चालू किया जा सकता है.

Firebase कंसोल का इस्तेमाल करना

Firebase कंसोल में, DevOps और यूज़र ऐक्टिविटी > Crashlytics डैशबोर्ड पर जाएं.
पेज पर सबसे ऊपर मौजूद ड्रॉप-डाउन सिलेक्टर से अपना वेब ऐप्लिकेशन चुनें.
Crashlytics सेट अप करें पर क्लिक करें और स्क्रीन पर दिए गए निर्देशों का पालन करें.

Firebase सीएलआई का इस्तेमाल करना

अगर आपको टर्मिनल से अपना प्रोजेक्ट कॉन्फ़िगर करना है या एआई कोडिंग एजेंट का इस्तेमाल करना है, तो Firebase सीएलआई का इस्तेमाल करें:

पक्का करें कि आपके पास Firebase सीएलआई का 15.35.0 या इसके बाद का वर्शन इंस्टॉल हो. साथ ही, यह भी पक्का करें कि आपकी पुष्टि (firebase login) हो गई हो. Firebase सीएलआई को इंस्टॉल या अपडेट करने का तरीका जानें.
अपने वेब ऐप्लिकेशन के लिए Crashlytics सेट अप करने के लिए, यह कमांड चलाएं:
```
firebase crashlytics:setup \
  --app FIREBASE_APP_ID \
  --project PROJECT_ID
```
यह कमांड, सेटअप करने के लिए ये चरण पूरे करता है:
- यह पुष्टि करता है कि आपका प्रोजेक्ट, इस्तेमाल के हिसाब से पैसे चुकाने वाले ब्लेज़ प्लान पर है. साथ ही, ज़रूरत पड़ने पर आपको अपग्रेड करने के लिए कहता है.
- ज़रूरी Crashlytics और टेलीमेट्री एपीआई चालू करता है (firebasetelemetry.googleapis.com, firebasetelemetryadmin.googleapis.com, firebasecrashlytics.googleapis.com, और clienttelemetry.googleapis.com).
- अगर आपके वेब ऐप्लिकेशन के एपीआई पासकोड पर एपीआई से जुड़ी पाबंदियां लगी हैं, तो अनुमति वाले एपीआई में clienttelemetry.googleapis.com जोड़ें.
- यह आपके वेब ऐप्लिकेशन के लिए, Crashlytics की टेलीमेट्री सेटिंग कॉन्फ़िगर करता है.
- इंटरैक्टिव तरीके से चलाने पर, यह आपको नई और पुरानी समस्याओं के लिए, ईमेल से सूचनाएं पाने की सुविधा चालू करने का विकल्प देता है.

दूसरा चरण: अपने ऐप्लिकेशन में एसडीके जोड़ना और उसे शुरू करना

Crashlytics एसडीके इंस्टॉल करें:
```
npm install firebase
```
FirebaseApp इंस्टेंस को शुरू करें:

सिंगलटन इनिशलाइज़ेशन का इस्तेमाल करने के लिए, एक सेंट्रल कॉन्फ़िगरेशन यूटिलिटी फ़ाइल बनाएं. अपने Firebase ऐप्लिकेशन के कॉन्फ़िगरेशन की वैल्यू देखने के लिए, Firebase कंसोल में प्रोजेक्ट सेटिंग > सामान्य पेज पर जाएं. इसके बाद, आपके ऐप्लिकेशन कार्ड पर जाएं और अपना वेब ऐप्लिकेशन चुनें.
```
// src/lib/firebase.ts
import { initializeApp, getApps, getApp } from '@firebase/app';

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "AUTH_DOMAIN",
  projectId: "PROJECT_ID",
  storageBucket: "STORAGE_BUCKET",
  messagingSenderId: "MESSAGING_SENDER_ID",
  appId: "FIREBASE_APP_ID"
};

// Guarantee singleton initialization across renders or module refreshes
export const app = getApps().length === 0
  ? initializeApp(firebaseConfig)
  : getApp();
```

तीसरा चरण: अपने फ़्रेमवर्क के लिए, गड़बड़ी अपने-आप कैप्चर होने की सुविधा को कॉन्फ़िगर करना

ऑटोमैटिक फ़्रेमवर्क एरर रिसीवर और मैन्युअल ट्रैकर, दोनों ही आपके शेयर किए गए FirebaseApp इंस्टेंस का इस्तेमाल करते हैं. गड़बड़ी अपने-आप कैप्चर होने की सुविधा को कॉन्फ़िगर करने के लिए, अपना फ़्रेमवर्क चुनें:

Angular

src/app/app.config.ts में अपने ऐप्लिकेशन के प्रोवाइडर में provideCrashlytics(() => app) जोड़कर, Angular के ग्लोबल एरर-कैचिंग रनटाइम और अपने-आप रूट ट्रैकिंग की सुविधा के साथ इंटिग्रेट करें:

// src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideCrashlytics } from '@firebase/crashlytics/angular';
import { app } from '../lib/firebase'; // Shared initialization script
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideCrashlytics(() => app)
  ]
};

Next.js

Next.js 15.3+ (सुझाया गया): क्लाइंट इंस्ट्रुमेंटेशन (instrumentation-client.ts)

Next.js 15.3 और इसके बाद के वर्शन में, instrumentation-client.ts (या instrumentation-client.js) के ज़रिए नेटिव क्लाइंट-साइड इंस्ट्रुमेंटेशन की सुविधा शामिल है. Next.js, React हाइड्रेशन शुरू होने से पहले इस फ़ाइल को ब्राउज़र में एक्ज़ीक्यूट करता है.

src/instrumentation-client.ts बनाएं (या अगर src/ डायरेक्ट्री का इस्तेमाल नहीं किया जा रहा है, तो अपने प्रोजेक्ट रूट में instrumentation-client.ts बनाएं) और Crashlytics को शुरू करें:

// src/instrumentation-client.ts
import { getCrashlytics } from '@firebase/crashlytics';
import { app } from './lib/firebase'; // Shared initialization script

getCrashlytics(app);

यह सिंगल फ़ाइल, React हाइड्रेशन से पहले Crashlytics को शुरू करती है. साथ ही, ग्लोबल एरर लिसनर (error और unhandledrejection) को अपने-आप रजिस्टर करती है. इसके लिए, src/app/layout.tsx या किसी React कॉम्पोनेंट में कोई बदलाव नहीं करना पड़ता.

Next.js < 15.3: क्लाइंट-साइड (ऐप्लिकेशन राऊटर लेआउट)

Next.js के 15.3 से पहले के वर्शन के लिए, layout.tsx डिफ़ॉल्ट रूप से एक सर्वर कॉम्पोनेंट है. FirebaseApp को सीरियलाइज़ नहीं किया जा सकता. इसलिए, <FirebaseCrashlytics> (@firebase/crashlytics/react से, Crashlytics को शुरू करने और ऐसी गड़बड़ियों को कैप्चर करने के लिए जिन्हें पकड़ा नहीं गया है) को क्लाइंट कॉम्पोनेंट (जैसे कि src/components/CrashlyticsProvider.tsx) में रैप करें. इस कॉम्पोनेंट को 'use client' डायरेक्टिव के साथ मार्क किया गया हो:

// src/components/CrashlyticsProvider.tsx
'use client';

import React from 'react';
import { FirebaseCrashlytics } from '@firebase/crashlytics/react';
import { app } from '../lib/firebase'; // Shared initialization script

export function CrashlyticsProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <FirebaseCrashlytics firebaseApp={app} />
      {children}
    </>
  );
}

इसके बाद, अपने रूट लेआउट को <CrashlyticsProvider> से रैप करें:

// src/app/layout.tsx
import React from 'react';
import { CrashlyticsProvider } from '../components/CrashlyticsProvider';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <CrashlyticsProvider>
          {children}
        </CrashlyticsProvider>
      </body>
    </html>
  );
}

React (React Router के बिना)

अपने रूट ऐप्लिकेशन कॉम्पोनेंट (आम तौर पर src/App.tsx या src/main.tsx) को <FirebaseCrashlytics> एरर बाउंड्री कॉम्पोनेंट के साथ रैप करें. यह ग्लोबल रिसीवर के तौर पर काम करता है. यह ब्राउज़र और React यूज़र इंटरफ़ेस (यूआई) से मिलने वाले, अस्वीकार किए गए ऐसे अनुरोधों और अपवादों को मैनेज करता है जिन्हें मैनेज नहीं किया गया है. यह सभी चाइल्ड कॉम्पोनेंट की हैरारकी को रैप करता है. साथ ही, ऐसी गड़बड़ियों को अपने-आप कैप्चर करता है जिन्हें पकड़ा नहीं गया है या जो रूटिंग से जुड़ी हैं:

// src/App.tsx
import React from 'react';
import { FirebaseCrashlytics } from '@firebase/crashlytics/react';
import { app } from './lib/firebase'; // Shared initialization script

export default function App({
  children,
}: {
  children?: React.ReactNode;
}) {
  return (
    <FirebaseCrashlytics firebaseApp={app}>
      {children}
    </FirebaseCrashlytics>
  );
}

React Router (v6+)

अगर React Router v6+ का इस्तेमाल किया जा रहा है, तो React Router के <Routes> कंटेनर को <CrashlyticsRoutes> से बदलें. यह सुविधा, गड़बड़ी की सीमाओं को सभी रास्तों पर अपने-आप मैप करती है. साथ ही, टेंप्लेट वाले पाथ के नामों का इस्तेमाल करके गड़बड़ियों को ट्रैक करती है. जैसे, /profile/:userId:

// src/App.tsx
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { CrashlyticsRoutes } from '@firebase/crashlytics/react-router';
import { app } from './lib/firebase'; // Shared initialization script
import Home from './pages/Home';
import Profile from './pages/Profile';
import Product from './pages/Product';

export default function App() {
  return (
    <BrowserRouter>
      <CrashlyticsRoutes firebaseApp={app}>
        <Route path="/" element={<Home />} />
        <Route path="/profile/:userId" element={<Profile />} />
        <Route path="/product/:productId/details" element={<Product />} />
      </CrashlyticsRoutes>
    </BrowserRouter>
  );
}

TanStack Router

अगर आपका ऐप्लिकेशन TanStack Router का इस्तेमाल करता है, तो Crashlytics को getCrashlytics(app) के साथ शुरू करें. साथ ही, गड़बड़ी की डिफ़ॉल्ट रिकॉर्डिंग को सीधे अपने राऊटर इंस्टेंस कॉन्फ़िगरेशन (defaultOnCatch) में अटैच करें:

import { recordError, getCrashlytics } from '@firebase/crashlytics';
import { app } from './lib/firebase'; // Shared initialization script

import { createRouter } from '@tanstack/react-router';
import { routeTree } from './routeTree.gen';

const crashlytics = getCrashlytics(app);

const router = createRouter({
  routeTree,
  defaultOnCatch: (error, errorInfo) => {
    recordError(crashlytics, error, errorInfo);
  },
});

ध्यान दें: getCrashlytics(app) को कॉल करने पर, विंडो की ऐसी गड़बड़ियों के लिए ग्लोबल लिसनर अपने-आप रजिस्टर हो जाते हैं जिन्हें पकड़ा नहीं गया है. साथ ही, ऐसी गड़बड़ियों के लिए भी ग्लोबल लिसनर अपने-आप रजिस्टर हो जाते हैं जिन्हें हैंडल नहीं किया गया है. वहीं, defaultOnCatch, TanStack राऊटर में कॉम्पोनेंट रेंडरिंग और रूटिंग के दौरान पकड़ी गई गड़बड़ियों को कैप्चर करता है.

(ज़रूरी नहीं) चौथा चरण: ऐप्लिकेशन के वर्शन सेट अप करना

हमारा सुझाव है कि आप अपने वेब ऐप्लिकेशन के बिल्ड में एक साफ़ वर्शन स्ट्रिंग जोड़ें, ताकि आप रिग्रेशन को खास डिप्लॉयमेंट से अलग कर सकें. अपने फ़्रेमवर्क के लिए Crashlytics SDK टूल को शुरू करते समय, CrashlyticsOptions में appVersion पास करें. इसके लिए, रिलीज़ स्ट्रिंग या बिल्ड-टाइम एनवायरमेंट वैरिएबल का इस्तेमाल करें, जैसे कि process.env.NEXT_PUBLIC_APP_VERSION या import.meta.env.VITE_APP_VERSION:

Angular

src/app/app.config.ts में provideCrashlytics को दूसरे आर्ग्युमेंट के तौर पर, appVersion के साथ CrashlyticsOptions ऑब्जेक्ट पास करें:

// src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideCrashlytics } from '@firebase/crashlytics/angular';
import { app } from '../lib/firebase'; // Shared initialization script
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideCrashlytics(() => app, {
      appVersion: 'APP_VERSION'
    })
  ]
};

Next.js

Next.js 15.3+ (सुझाया गया): क्लाइंट इंस्ट्रुमेंटेशन (instrumentation-client.ts)

src/instrumentation-client.ts में getCrashlytics को दूसरे आर्ग्युमेंट के तौर पर appVersion के साथ CrashlyticsOptions ऑब्जेक्ट पास करें:

// src/instrumentation-client.ts
import { getCrashlytics } from '@firebase/crashlytics';
import { app } from './lib/firebase'; // Shared initialization script

getCrashlytics(app, {
  appVersion: 'APP_VERSION'
});

Next.js < 15.3: क्लाइंट-साइड (ऐप्लिकेशन राऊटर लेआउट)

appVersion के साथ crashlyticsOptions को <FirebaseCrashlytics> में पास करें src/components/CrashlyticsProvider.tsx:

// src/components/CrashlyticsProvider.tsx
'use client';

import React from 'react';
import { FirebaseCrashlytics } from '@firebase/crashlytics/react';
import { app } from '../lib/firebase'; // Shared initialization script

const crashlyticsOptions = {
  appVersion: 'APP_VERSION'
};

export function CrashlyticsProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <FirebaseCrashlytics
        firebaseApp={app}
        crashlyticsOptions={crashlyticsOptions}
      />
      {children}
    </>
  );
}

React (React Router के बिना)

appVersion के साथ crashlyticsOptions को <FirebaseCrashlytics> में पास करें src/App.tsx:

// src/App.tsx
import React from 'react';
import { FirebaseCrashlytics } from '@firebase/crashlytics/react';
import { app } from './lib/firebase'; // Shared initialization script

const crashlyticsOptions = {
  appVersion: 'APP_VERSION'
};

export default function App({
  children,
}: {
  children?: React.ReactNode;
}) {
  return (
    <FirebaseCrashlytics
      firebaseApp={app}
      crashlyticsOptions={crashlyticsOptions}
    >
      {children}
    </FirebaseCrashlytics>
  );
}

React Router (v6+)

appVersion के साथ crashlyticsOptions को <CrashlyticsRoutes> में पास करें src/App.tsx:

// src/App.tsx
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { CrashlyticsRoutes } from '@firebase/crashlytics/react-router';
import { app } from './lib/firebase'; // Shared initialization script
import Home from './pages/Home';
import Profile from './pages/Profile';
import Product from './pages/Product';

const crashlyticsOptions = {
  appVersion: 'APP_VERSION'
};

export default function App() {
  return (
    <BrowserRouter>
      <CrashlyticsRoutes
        firebaseApp={app}
        crashlyticsOptions={crashlyticsOptions}
      >
        <Route path="/" element={<Home />} />
        <Route path="/profile/:userId" element={<Profile />} />
        <Route path="/product/:productId/details" element={<Product />} />
      </CrashlyticsRoutes>
    </BrowserRouter>
  );
}

TanStack Router

getCrashlytics में दूसरे आर्ग्युमेंट के तौर पर, appVersion के साथ CrashlyticsOptions ऑब्जेक्ट पास करें:

import { recordError, getCrashlytics } from '@firebase/crashlytics';
import { app } from './lib/firebase'; // Shared initialization script

import { createRouter } from '@tanstack/react-router';
import { routeTree } from './routeTree.gen';

const crashlytics = getCrashlytics(app, {
  appVersion: 'APP_VERSION'
});

const router = createRouter({
  routeTree,
  defaultOnCatch: (error, errorInfo) => {
    recordError(crashlytics, error, errorInfo);
  },
});

पांचवां चरण: टेस्ट क्रैश को ट्रिगर करना

Crashlytics का सेट अप पूरा करने और Firebase कंसोल के Crashlytics डैशबोर्ड में शुरुआती डेटा देखने के लिए, आपको टेस्ट क्रैश को फ़ोर्स करना होगा.

अपने ऐप्लिकेशन में ऐसा कोड जोड़ें जिसका इस्तेमाल करके, टेस्ट क्रैश को ट्रिगर किया जा सके.

अपने React, Next.js या Angular ऐप्लिकेशन में टेस्ट बटन या रूट ट्रिगर जोड़ें. इस पर क्लिक करने पर, रनटाइम से जुड़ी गड़बड़ी का मैसेज दिखता है:
```
// Trigger an unhandled exception on button click or route load
function handleTestCrash() {
  throw new Error("Crashlytics Web SDK Test Unhandled Error!");
}
```
अगर आपने <FirebaseCrashlytics> (React या Next.js), provideCrashlytics (Angular) या <CrashlyticsRoutes> (React Router) की मदद से, गड़बड़ी की जानकारी अपने-आप कैप्चर होने की सुविधा को कॉन्फ़िगर किया है, तो इस गड़बड़ी को थ्रो करने से अपवाद अपने-आप कैप्चर हो जाता है और उसे अपलोड करने के लिए शेड्यूल कर दिया जाता है.
अपना ऐप्लिकेशन बनाएं और चलाएं. इसके बाद, टेस्ट एरर को ट्रिगर करें, ताकि आपका ऐप्लिकेशन Firebase को क्रैश होने की पहली रिपोर्ट भेज सके.
Firebase कंसोल में, DevOps और यूज़र ऐक्टिविटी > Crashlytics डैशबोर्ड पर जाकर, क्रैश की जांच करने वाली रिपोर्ट देखें:
1. पेज पर सबसे ऊपर मौजूद ड्रॉप-डाउन सिलेक्टर से अपना वेब ऐप्लिकेशन चुनें.
2. पेज रीफ़्रेश करें. टेस्ट के दौरान मिली गड़बड़ी, कुछ ही मिनटों में समस्याएं टेबल में दिखने लगेगी.

अगर आपने कंसोल को रीफ़्रेश कर लिया है और पांच से दस मिनट बाद भी आपको टेस्ट क्रैश नहीं दिख रहा है, तो सेटअप से जुड़ी समस्या हल करना लेख पढ़ें.

Crashlytics अब आपके वेब ऐप्लिकेशन में गड़बड़ियों की निगरानी कर रहा है. अपनी सभी रिपोर्ट और आंकड़े देखने और उनकी जांच करने के लिए, Crashlytics डैशबोर्ड पर जाएं.

अगले चरण

ऐसी क्रैश रिपोर्ट पाएं जिन्हें आसानी से पढ़ा जा सके: सोर्स मैप (.js.map) को अपने-आप अपलोड होने की सुविधा सेट अप करें, ताकि आपके प्रोडक्शन स्टैक ट्रेस में ओरिजनल फ़ाइल के नाम और लाइन नंबर दिखें.
क्रैश रिपोर्ट को पसंद के मुताबिक बनाना: हैंडल किए गए अपवादों की रिपोर्ट करने, कस्टम कुंजियां जोड़ने, टेलीमेट्री रिकॉर्ड को फ़ोर्स फ़्लश करने, और सैंपलिंग को कॉन्फ़िगर करने का तरीका जानें.