שיטות מומלצות ל-Firebase JavaScript SDK

בדף הזה מופיעים טיפים לפתרון בעיות ב-JavaScript שאתם עשויים להיתקל בהן במהלך השימוש ב-SDK‏ Firebase JavaScript.

נתקלתם בבעיות אחרות או שהבעיה שלכם לא מופיעה כאן? כדאי לעיין בשאלות הנפוצות הראשיות בנושא Firebase כדי לקבל מידע נוסף על Firebase או על מוצרים ספציפיים.

אפשר גם לעיין בFirebase JavaScriptמאגר ה-SDK ב-GitHub כדי לראות רשימה עדכנית של בעיות שדווחו ופתרונות לבעיות, ולדווח שם על בעיות משלכם.

‫Admin SDK for Node.js constructs לא תואם ל-Firebase JavaScript SDK

‫Firebase Admin SDK ל-Node.js ו-Firebase JavaScript SDK הם הטמעות נפרדות שלא חולקות הגדרות של ממשק, מחלקה או פונקציה. מופעים של אובייקטים מסוג Admin SDK לא תואמים לפונקציות של Firebase JavaScript SDK.

לדוגמה, מופע של Admin SDK שמועבר לפונקציית Firebase JavaScript SDK getDatabase יפיק את השגיאה הבאה:FirebaseApp

TypeError: Cannot read properties of undefined (reading 'getProvider')
 at _getProvider
 at getDatabase

זה נכון לגבי כל Firebase JavaScript SDK API surface, ולא רק לגבי Realtime Database. הדבר נכון גם לגבי שימוש בכיוון ההפוך. כשמנסים להשתמש בסוג Cloud Firestore של JS SDK Timestamp עם Firebase Admin SDK עבור Node.js, מתקבלות שגיאות דומות.

לא כדאי להשתמש בגרסאות סותרות של Firebase JavaScript SDK

אם מוגדרות כמה גרסאות סותרות של Firebase JavaScript SDK כתלויות בפרויקט, יתרחשו שגיאות בזמן הריצה כשמועברים מופעים של SDK בין חבילות SDK. לדוגמה, שימוש בספרייה Data Connect עם גרסה לא תואמת של FirebaseApp גורם לשגיאה הבאה:

Error: Component data-connect has not been registered yet

הבעיה הזו נגרמת בדרך כלל בגלל עדכון של תלות באחד מחבילות Firebase SDK, אבל לא בכולן. המצב הזה קורה בדרך כלל כשכלי אוטומטי לעדכון תלויות משנה משנה קבוצת משנה של תלויות משנה של Firebase SDK בקובץ yarn.lock או package-lock.json של הפרויקט. מכיוון שערכות SDK רבות של Firebase JavaScript פועלות יחד, השימוש בגרסאות שונות של ערכות ה-SDK גורם לחוסר תאימות בזמן הריצה,

כדי לפתור את הבעיה, צריך למחוק את הספרייה node_modules/ ואת yarn.lock (עבור yarn) או package-lock.json (עבור npm) בפרויקט ולהתקין מחדש את התלות.

אם השגיאות נמשכות, אפשר להשתמש בפקודה npm ls כדי לבצע ניפוי באגים נוסף בבעיה. הפעולה הזו תרשום ביומן את התלות של הפרויקט, כדי שתוכלו לזהות גרסאות סותרות של מודול firebase.

לדוגמה, ביומן הבא מוצג package-using-older-firebase שמייבא גרסה מתנגשת של Firebase JavaScript SDK:

$ npm ls firebase --all
your-app@0.0.0
├── firebase@11.2.0
├─┬ @angular/fire@19.0.0
│ ├── firebase@11.2.0 deduped
│ └─┬ rxfire@6.1.0
│   └── firebase@10.14.1 deduped
└─┬ package-using-older-firebase@0.1.0
  └─── firebase@10.14.1

יכול להיות ששגיאות יתרחשו גם בגלל שילוב של הצהרות CJS ו-ESM‏ require ו-import באפליקציה. השילוב הזה יוצר כמה מופעים של Firebase JavaScript SDK, שכל אחד מהם שונה מהאחרים, ולכן הוא פוגע ביכולת הפעולה ההדדית של Firebase JavaScript SDK. כדי לנפות באגים בתרחיש הזה, צריך להגדיל את רמת הפירוט של חבילת ה-bundler שבחרתם. לדוגמה, אפשר להשתמש בסימן esbuild analyze למטרה הזו.

מוודאים שקבצי ה-service worker נכללים בחבילה

קובצי Service Worker נבנים בדרך כלל מצינור נפרד משאר אפליקציית האינטרנט, והם לא נכללים בהגדרת ברירת המחדל של כלי חבילה כמו Webpack.

אם אתם משתמשים בגרסה המודולרית של Firebase JavaScript SDK ב-service worker, אתם צריכים לוודא שהגדרתם את כלי חבילת האפליקציה כך שיכלול את קובץ המקור של ה-service worker. בדוגמה הבאה נעשה שימוש ב-npx כדי לארוז את ה-service worker של firebase-sw.js בספרייה src של הפרויקט:

npx esbuild ./src/firebase-sw.js --bundle --minify --main-fields=webworker,browser,module,main,default --outfile=public/firebase-sw.js

ההפעלה של קובץ service worker שלא נכלל בחבילה תיכשל אם הוא מייבא מודולים של ES שלא תומכים בקובצי service worker או קבצים שלא קיימים בהיקף של קובץ service worker. לפעמים הכשלים האלה לא מורגשים וקשה לאתר את מקור הבעיה.

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

לחלופין, אפשר לייבא את חבילות ה-SDK‏ compat Firebase JavaScript מ-CDN כדי שלא יהיה צורך בחבילות.

// Give the service worker access to Firebase Messaging.
// Replace 10.13.2 with the version of the Firebase JS SDK you're using
// in your app.
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  ...
});

// Retrieve an instance of Firebase Messaging so that it can handle
// background messages.
const messaging = firebase.messaging();

שימוש ב-FirebaseServerApp כשעובדים עם רינדור בצד השרת

ה-SDK‏ Firebase JavaScript נועד במקור לפעול בסביבות דפדפן. ההשקה של מסגרות Server-Side Rendering‏ (SSR) מאפשרת להשתמש ב-SDK בסביבות זמן ריצה חדשות. סביבות זמן הריצה האלה מספקות קבוצת משנה של כלים וממשקי API שדפדפני אינטרנט מספקים.

לדוגמה, חלק מערכות ה-SDK של Firebase דורשות אחסון במטמון של נתונים באמצעות IndexedDB, שהוא API שפועל רק בדפדפן. יכול להיות ש-Firebase Auth ידרוש אינטראקציה של המשתמש בתהליכי כניסה מסוימים, ואי אפשר לבצע אותה בסביבות שרת ללא ממשק גרפי. ‫App Check מסתמך על היוריסטיקה של הדפדפן כדי לאמת את המשתמש לפני יצירת טוקנים של App Check.

כשעובדים עם ה-SDK בסביבות החדשות האלה, צריך להשתמש ב-FirebaseServerApp, גרסה חדשה של FirebaseApp שמספקת את האמצעים לטעינה מראש של מופע Firebase של SSR עם נתונים שנאספו בצד הלקוח.

הפונקציה FirebaseServerApp תומכת בשני פרמטרים:

• טוקן מזהה של אימות: אם מסופק, Firebase Auth מבצע כניסה אוטומטית של משתמש שאומת בעבר, ויכול להיות שהסשן יתפרס על פני חלוקת ה-CSR/SSR.
• App Check Token: אם מספקים את הטוקן, ערכות SDK אחרות של Firebase משתמשות בו בלי צורך לאתחל מופע של לקוח App Check (שלא נתמך מחוץ לסביבות דפדפן). השינוי הזה מאפשר תמיכה ב-SSR במוצרים שבהם App Check מופעל, כמו Cloud Functions, Data Connect, Cloud Firestore, Realtime Database ו-Vertex AI.

דוגמה לשימוש ב-FirebaseServerApp ב-Next.js מופיעה במאמר Streamline SSR app development with FirebaseServerApp.