‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

תחילת העבודה עם Crashlytics לאינטרנט

בחירת פלטפורמה:

‫iOS+‎ Android Android NDK אינטרנט Flutter Unity

במדריך הזה מוסבר איך להתחיל להשתמש ב-Firebase Crashlytics באפליקציית האינטרנט.

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

לפני שמתחילים

כדי להגדיר את Crashlytics, צריך לבצע משימות גם במסוף Firebase וגם בסביבת הפיתוח המשולבת (IDE) (למשל, הוספת הגדרות של Firebase לאפליקציה ו-SDK של Crashlytics). כדי לסיים את ההגדרה, צריך לאלץ קריסת בדיקה כדי לשלוח את דוח הקריסה הראשון ל-Firebase.

כדי להגדיר את Crashlytics באופן ידני באפליקציית האינטרנט, צריך לוודא שהשלמתם את הדרישות המוקדמות הבאות:

אם עדיין אין לכם פרויקט ב-Firebase ואפליקציה ב-Firebase, אתם צריכים ליצור אותם. אם עדיין לא עשיתם זאת, הוסיפו את Firebase לפרויקט JavaScript.
מוודאים שלחשבון יש הרשאות בעלים בפרויקט. זה נדרש כדי להפעיל את ממשקי ה-API ואת תפקידי ה-IAM הנדרשים.
מוודאים שהפרויקט ב-Firebase מוגדר לתוכנית התמחור Blaze בתשלום לפי שימוש. ‫Crashlytics לאינטרנט משתמש ב-Cloud Logging לאחסון טלמטריה וב-Cloud Storage לאחסון מפות מקור. אלה מוצרים בתשלום עם מסלול ללא עלות. מידע נוסף על התמחור של Logging ועל התמחור של Cloud Storage.

שלב 1: מפעילים את Crashlytics באפליקציית האינטרנט

‫Crashlytics לאינטרנט משתמש ב-Cloud Logging, ב-Error Reporting וב-Cloud Storage, לכן צריך להפעיל את ממשקי ה-API האלה ולהגדיר הרשאות לפרויקט. אפשר להפעיל את Crashlytics באפליקציית האינטרנט באמצעות מסוף Firebase או ה-CLI של Firebase.

שימוש במסוף Firebase

במסוף Firebase, נכנסים אל DevOps & Engagement (DevOps ומעורבות) > לוח הבקרה של Crashlytics.
בוחרים את אפליקציית האינטרנט מהתפריט הנפתח בחלק העליון של הדף.
לוחצים על הגדרה של Crashlytics ופועלים לפי ההוראות במסך.

שימוש ב-CLI של Firebase

אם אתם מעדיפים להגדיר את הפרויקט מהטרמינל או באמצעות סוכן AI לכתיבת קוד, אתם יכולים להשתמש ב-CLI של Firebase:

מוודאים שמותקנת גרסה 15.35.0 ואילך של Firebase CLI ושהמשתמש מאומת (firebase login). איך מתקינים או מעדכנים את Firebase CLI
מריצים את הפקודה הבאה כדי להגדיר את Crashlytics לאפליקציית האינטרנט:
```
firebase crashlytics:setup \
  --app FIREBASE_APP_ID \
  --project PROJECT_ID
```
הפקודה הזו מבצעת את פעולות ההגדרה הבאות:
- מוודא שהפרויקט שלכם נמצא בתוכנית התמחור Blaze בתשלום לפי שימוש, ומבקש מכם לשדרג אם צריך.
- מפעילים את ממשקי ה-API הנדרשים של Crashlytics ושל נתוני הטלמטריה (firebasetelemetry.googleapis.com,‏ firebasetelemetryadmin.googleapis.com,‏ firebasecrashlytics.googleapis.com ו-clienttelemetry.googleapis.com).
- אם למפתח ה-API של אפליקציית האינטרנט יש הגבלות על ממשקי API, מוסיפים את clienttelemetry.googleapis.com לממשקי ה-API המותרים.
- קביעת הגדרות הטלמטריה של Crashlytics לאפליקציית האינטרנט.
- כשמריצים את הפקודה באופן אינטראקטיבי, מוצגת בקשה להפעיל התראות באימייל על בעיות חדשות ובעיות שחזרו.

שלב 2: מוסיפים את ה-SDK לאפליקציה ומפעילים אותו

מתקינים את ה-SDK של Crashlytics:
```
npm install firebase
```

מאתחלים את המכונה של FirebaseApp:

יוצרים קובץ תצורה מרכזי כדי להשתמש בהפעלה של סינגלטון. כדי למצוא את ערכי ההגדרות האישיות של אפליקציית Firebase, עוברים אל הגדרות הפרויקט > הדף General במסוף Firebase, עוברים לכרטיס Your apps ובוחרים את אפליקציית האינטרנט.

// 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();

שלב 3: הגדרת תיעוד שגיאות אוטומטי למסגרת שלכם

גם מקלטי השגיאות האוטומטיים של ה-framework וגם המעקבים הידניים משתמשים במופע המשותף של FirebaseApp. בוחרים את ה-framework כדי להגדיר תיעוד שגיאות אוטומטי:

Angular

כדי לשלב את Angular עם זמן הריצה הגלובלי לזיהוי שגיאות ועם מעקב אוטומטי אחרי נתיבים, מוסיפים את provideCrashlytics(() => app) לספקים של האפליקציה ב-src/app/app.config.ts:

// 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)

גרסה 15.3 ואילך של Next.js כוללת כלים מקוריים בצד הלקוח באמצעות instrumentation-client.ts (או instrumentation-client.js). Next.js מריץ את הקובץ הזה בדפדפן לפני שמתחיל תהליך ההידרציה של React.

יוצרים את 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);

הקובץ היחיד הזה מאתחל את Crashlytics לפני ההידרציה של React ורושם באופן אוטומטי מאזינים גלובליים לשגיאות (error ו-unhandledrejection) בלי לשנות את src/app/layout.tsx או רכיב React כלשהו.

‫Next.js < 15.3: בצד הלקוח (פריסת App Router)

בגרסאות של 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}
    </>
  );
}

לאחר מכן, עוטפים את פריסת הבסיס (root layout) באמצעות <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 ואילך, החליפו את מאגר <Routes> של React Router ב-<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);
  },
});

(אופציונלי) שלב 4: הגדרת ניהול גרסאות של האפליקציה

מומלץ מאוד להוסיף מחרוזת גרסה ברורה לגרסאות ה-build של אפליקציית האינטרנט, כדי שתוכלו לבודד רגרסיות לפריסות ספציפיות. מעבירים את appVersion ב-CrashlyticsOptions כשמפעילים את ה-SDK של Crashlytics למסגרת (באמצעות מחרוזת גרסה או משתנה סביבה בזמן ה-build, כמו process.env.NEXT_PUBLIC_APP_VERSION או import.meta.env.VITE_APP_VERSION):

Angular

מעבירים אובייקט CrashlyticsOptions עם appVersion כארגומנט השני אל provideCrashlytics ב-src/app/app.config.ts:

// 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)

מעבירים אובייקט CrashlyticsOptions עם appVersion כארגומנט השני אל getCrashlytics ב-src/instrumentation-client.ts:

// 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: בצד הלקוח (פריסת App Router)

העברת crashlyticsOptions עם appVersion אל <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)

העברת crashlyticsOptions עם appVersion אל <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+)‎

העברת crashlyticsOptions עם appVersion אל <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

מעבירים אובייקט CrashlyticsOptions עם appVersion כארגומנט השני אל 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);
  },
});

שלב 5: אילוץ קריסה לבדיקה

כדי לסיים את ההגדרה של Crashlytics ולראות נתונים ראשוניים במרכז הבקרה של Crashlytics במסוף Firebase, צריך לאלץ קריסה לבדיקה.

מוסיפים לאפליקציה קוד שמאפשר לאלץ קריסה לבדיקה.

מוסיפים לאפליקציה ב-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 & Engagement (DevOps ומעורבות) > לוח הבקרה של Crashlytics כדי לבדוק את דוח הקריסה לבדיקה:
1. בוחרים את אפליקציית האינטרנט מהתפריט הנפתח בחלק העליון של הדף.
2. רענון הדף החריגה לבדיקה אמורה להופיע בטבלה Issues תוך כמה דקות.

אם רעננתם את המסוף ועדיין לא רואים את קריסת הבדיקה אחרי 5 עד 10 דקות, עיינו בקטע פתרון בעיות בהגדרה.

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

השלבים הבאים

קבלת דוחות קריסה קריאים: הגדירו העלאה אוטומטית של מפות מקור (.js.map) כדי שדוחות הקריסות בסביבת הייצור יציגו את שמות הקבצים ומספרי השורות המקוריים.
התאמה אישית של דוחות קריסה: איך לדווח על חריגות שטופלו, להוסיף מפתחות בהתאמה אישית, לאלץ ניקוי של רשומות טלמטריה ולהגדיר דגימה.

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

לפני שמתחילים

שלב 1: מפעילים את Crashlytics באפליקציית האינטרנט

שימוש במסוף Firebase

שימוש ב-CLI של Firebase

שלב 2: מוסיפים את ה-SDK לאפליקציה ומפעילים אותו

שלב 3: הגדרת תיעוד שגיאות אוטומטי למסגרת שלכם

Angular

Next.js

React (ללא React Router)

React Router (v6+)‎

TanStack Router

(אופציונלי) שלב 4: הגדרת ניהול גרסאות של האפליקציה

Angular

Next.js

React (ללא React Router)

React Router (v6+)‎

TanStack Router

שלב 5: אילוץ קריסה לבדיקה

השלבים הבאים

תחילת העבודה עם Crashlytics לאינטרנט