ওয়েবের জন্য Crashlytics ব্যবহার শুরু করা

প্ল্যাটফর্ম বেছে নিন: iOS+ Android Android NDK ওয়েব Flutter Unity


আপনার ওয়েব অ্যাপে কীভাবে Firebase Crashlytics ব্যবহার শুরু করবেন তা এই নির্দেশিকায় বর্ণনা করা হয়েছে।

আপনার অ্যাপে Firebase Crashlytics SDK সেট-আপ করার পরে, আপনি Firebase কনসোলে ক্র্যাশ সংক্রান্ত বিস্তারিত রিপোর্ট পেতে পারেন। ওয়েব অ্যাপের জন্য Crashlytics-এর মাধ্যমে, আপনি সমস্যার রিপোর্ট পাবেন।

শুরু করার আগে

Crashlytics সেট-আপ করার জন্য Firebase কনসোল এবং আপনার IDE (যেমন, আপনার অ্যাপের Firebase কনফিগারেশন এবং Crashlytics SDK যোগ করা) দুটিতেই টাস্ক সম্পূর্ণ করতে হবে। সেট-আপ সম্পূর্ণ করতে, Firebase-এ আপনার প্রথম ক্র্যাশ রিপোর্ট পাঠাতে, আপনাকে একটি টেস্ট ক্র্যাশ ফোর্স করতে হবে।

আপনার ওয়েব অ্যাপে ম্যানুয়ালি Crashlytics সেট-আপ করতে, আপনি নিম্নলিখিত পূর্বপ্রয়োজনীয়তাগুলি সম্পূর্ণ করেছেন কিনা তা নিশ্চিত করুন:

  • আপনার কাছে আগে থেকে না থাকলে, একটি Firebase প্রোজেক্ট এবং Firebase অ্যাপ তৈরি করুন। আপনি আগে এটি না করে থাকলে, আপনার JavaScript প্রোজেক্টে Firebase যোগ করুন।

  • আপনার প্রোজেক্টে অ্যাকাউন্টের মালিক সংক্রান্ত অনুমতি আছে কিনা তা ভাল করে দেখে নিন। প্রয়োজনীয় API ও IAM ভূমিকা চালু করার জন্য এটি প্রয়োজন।

  • আপনার Firebase প্রোজেক্ট যখন ব্যবহার করবেন তখন পেমেন্ট করুন Blaze প্রাইসিং প্ল্যান-এ আছে কিনা তা নিশ্চিত করুন। ওয়েবের জন্য Crashlytics টেলিমেট্রি স্টোরেজের জন্য Cloud Logging এবং সোর্স ম্যাপ স্টোরেজের জন্য Cloud Storage ব্যবহার করে, যেগুলি হল ফ্রি টিয়ার সহ পেড প্রোডাক্ট। Logging-এর দাম এবং Cloud Storage-এর দাম সম্পর্কে আরও জানুন।

ধাপ ১: আপনার ওয়েব অ্যাপের জন্য Crashlytics চালু করুন

ওয়েবের জন্য Crashlytics, Cloud Logging, Error Reporting এবং Cloud Storage ব্যবহার করে, তাই আপনাকে এইসব API চালু করতে হবে এবং আপনার প্রোজেক্টের জন্য অনুমতি কনফিগার করতে হবে। আপনি Firebase কনসোল বা Firebase CLI ব্যবহার করে আপনার ওয়েব অ্যাপের জন্য Crashlytics চালু করতে পারবেন।

Firebase কনসোল ব্যবহার করুন

  1. Firebase কনসোলে, DevOps ও এনগেজমেন্ট > Crashlytics ড্যাশবোর্ড বিকল্পে যান।

  2. পৃষ্ঠার সবচেয়ে উপরে ড্রপ-ডাউন সিলেক্টর থেকে আপনার ওয়েব অ্যাপ বেছে নিন।

  3. Crashlytics সেট-আপ করুন বিকল্পে ক্লিক করে স্ক্রিনে দেখানো নির্দেশাবলী অনুসরণ করুন।

Firebase CLI ব্যবহার করুন

আপনি যদি টার্মিনাল থেকে আপনার প্রোজেক্ট কনফিগার করতে বা AI কোডিং এজেন্ট ব্যবহার করতে চান, তাহলে আপনি Firebase CLI ব্যবহার করতে পারেন:

  1. আপনার ডিভাইসে Firebase CLI v15.35.0 বা তার পরবর্তী ভার্সন ইনস্টল করা আছে কিনা এবং আপনি যাচাইকরণ (firebase login) করেছেন কিনা তা নিশ্চিত করুন। কীভাবে Firebase CLI ইনস্টল বা আপডেট করবেন তা জানুন।

  2. আপনার ওয়েব অ্যাপের জন্য Crashlytics সেট-আপ করতে নিম্নলিখিত কমান্ড রান করুন:

    firebase crashlytics:setup \
  --app FIREBASE_APP_ID \
  --project PROJECT_ID

    এই কমান্ড নিম্নলিখিত সেট-আপ ধাপগুলি সম্পূর্ণ করে:

    • আপনার প্রোজেক্ট Blaze প্রাইসিং প্ল্যানে আছে কিনা তা যাচাই করে এবং প্রয়োজন হলে আপগ্রেড করার জন্য প্রম্পট করে।

    • প্রয়োজনীয় Crashlytics এবং টেলিমেট্রি API চালু করে (firebasetelemetry.googleapis.com, firebasetelemetryadmin.googleapis.com, firebasecrashlytics.googleapis.com এবং clienttelemetry.googleapis.com)।

    • আপনার ওয়েব অ্যাপের API key-তে API সংক্রান্ত বিধিনিষেধ থাকলে, অনুমোদিত API-তে clienttelemetry.googleapis.com যোগ করে।

    • আপনার ওয়েব অ্যাপের জন্য Crashlytics টেলিমেট্রি সেটিংস কনফিগার করে।

    • ইন্টার‍্যাক্টিভভাবে রান করার সময়, নতুন ও রিগ্রেসড সমস্যার জন্য ইমেল অ্যালার্ট চালু করার জন্য প্রম্পট করে।

ধাপ ২: আপনার অ্যাপে SDK যোগ ও ইনিশিয়ালাইজ করুন

  1. Crashlytics SDK ইনস্টল করুন:

    npm install firebase

  2. আপনার 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

আপনার অ্যাপের প্রোভাইডারে provideCrashlytics(() => app) যোগ করে src/app/app.config.ts-এ 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)-এর মাধ্যমে নেটিভ ক্লায়েন্ট-সাইড ইন্সট্রুমেন্টেশন অন্তর্ভুক্ত থাকে। React হাইড্রেশন শুরু হওয়ার আগে Next.js ব্রাউজারে এই ফাইলটি এক্সিকিউট করে।

src/instrumentation-client.ts (অথবা instrumentation-client.ts আপনার প্রোজেক্ট রুটে, যদি src/ ডিরেক্টরি ব্যবহার না করেন) তৈরি করুন এবং Crashlytics ইনিশিয়ালাইজ করুন:

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

getCrashlytics(app);

এই একটি ফাইল React হাইড্রেশনের আগে Crashlytics শুরু করে এবং src/app/layout.tsx বা যেকোনও React কম্পোনেন্টে কোনও পরিবর্তন না করেই অটোমেটিক গ্লোবাল এরর লিসেনার (error এবং unhandledrejection) রেজিস্টার করে।

Next.js < 15.3: ক্লায়েন্ট-সাইড (অ্যাপ রাউটার লেআউট)

Next.js-এর 15.3-এর আগের ভার্সনের জন্য, ডিফল্ট হিসেবে layout.tsx হল একটি সার্ভার কম্পোনেন্ট। FirebaseApp সিরিয়ালাইজ করা যায় না বলে, <FirebaseCrashlytics> (@firebase/crashlytics/react থেকে Crashlytics ইনিশিয়ালাইজ করতে এবং আনকট সমস্যা ক্যাপচার করতে) 'use client' নির্দেশিকা সহ চিহ্নিত ক্লায়েন্ট কম্পোনেন্টে (যেমন 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

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 UI থেকে হ্যান্ডেল না করা রিজেকশন ও ব্যতিক্রম হ্যান্ডেল করে। এটি সব চাইল্ড কম্পোনেন্ট হায়ারার্কি র‍্যাপ করে এবং অটোমেটিক আনক্যাচড এক্সেপশন বা রাউটিং এরর ক্যাপচার করে:

// 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 রাউটার ব্যবহার করলে, 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);
  },
});

(ঐচ্ছিক) ধাপ ৪: অ্যাপ ভার্সনিং সেট-আপ করুন

আপনার ওয়েব অ্যাপ বিল্ডে একটি স্পষ্ট ভার্সন স্ট্রিং যোগ করার জন্য বিশেষভাবে সাজেস্ট করা হয় যাতে আপনি নির্দিষ্ট ডিপ্লয়মেন্টে রিগ্রেশন আলাদা করতে পারেন। আপনার ফ্রেমওয়ার্কের জন্য 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

দ্বিতীয় আর্গুমেন্ট হিসেবে appVersion সহ CrashlyticsOptions অবজেক্ট getCrashlytics-এ পাস করুন:

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 ড্যাশবোর্ডে প্রাথমিক ডেটা দেখতে, আপনাকে একটি টেস্ট ক্র্যাশ করতে বাধ্য করতে হবে।

  1. আপনার অ্যাপে কোড যোগ করুন যা আপনি টেস্ট ক্র্যাশ করতে ব্যবহার করতে পারেন।

    আপনার 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)-এর মাধ্যমে অটোমেটিক সমস্যা ক্যাপচার করার সুবিধা কনফিগার করে থাকেন, তাহলে এই সমস্যাটি থ্রো করলে অটোমেটিক ব্যতিক্রম ক্যাপচার করে এবং আপলোড করার জন্য শিডিউল করে।

  2. আপনার অ্যাপ তৈরি করে রান করুন, তারপর টেস্ট এরর ট্রিগার করুন যাতে আপনার অ্যাপ Firebase-এ প্রথম ক্র্যাশ রিপোর্ট পাঠায়।

  3. Firebase কনসোলে, DevOps ও এনগেজমেন্ট > Crashlytics ড্যাশবোর্ড বিকল্পে গিয়ে আপনার টেস্ট ক্র্যাশ রিপোর্ট চেক করুন:

    1. পৃষ্ঠার সবচেয়ে উপরে ড্রপ-ডাউন সিলেক্টর থেকে আপনার ওয়েব অ্যাপ বেছে নিন।

    2. পৃষ্ঠাটি রিফ্রেশ করুন। কয়েক মিনিটের মধ্যে সমস্যা টেবিলে আপনার টেস্ট ব্যতিক্রম দেখা যাবে।

আপনি কনসোল রিফ্রেশ করার পরেও যদি পাঁচ থেকে দশ মিনিট পরে টেস্ট ক্র্যাশ দেখতে না পান, তাহলে আপনার সেট-আপের সমস্যার সমাধান করা দেখুন।


Crashlytics এখন আপনার ওয়েব অ্যাপে কোনও সমস্যা আছে কিনা তা মনিটর করছে। আপনার সব রিপোর্ট ও পরিসংখ্যান দেখতে ও খতিয়ে দেখতে Crashlytics ড্যাশবোর্ড দেখুন।

পরবর্তী ধাপ

  • পড়ার যোগ্য ক্র্যাশ রিপোর্ট পান: অটোমেটিক সোর্স ম্যাপ (.js.map) আপলোড করার সুবিধা সেট-আপ করুন যাতে আপনার প্রোডাকশন স্ট্যাক ট্রেস আসল ফাইলের নাম ও লাইন নম্বর দেখায়।
  • ক্র্যাশ রিপোর্ট কাস্টমাইজ করা: কীভাবে হ্যান্ডেল করা ব্যতিক্রম রিপোর্ট করতে হয়, কাস্টম কী যোগ করতে হয়, টেলিমেট্রি রেকর্ড ফোর্স ফ্লাশ করতে হয় এবং স্যাম্পলিং কনফিগার করতে হয় তা জানুন।