בדף הזה מפורטות טיפים ודרכים לפתרון בעיות ב-JavaScript שעשויות להתרחש במהלך השימוש ב-SDK של Firebase JavaScript.
נתקלת בבעיות אחרות או שהבעיה שלך לא מופיעה ברשימה? מומלץ לעיין בשאלות הנפוצות הראשיות בנושא Firebase כדי לקבל שאלות נפוצות נוספות בנושא Firebase או שאלות נפוצות ספציפיות למוצרים.
אפשר גם להיכנס למאגר GitHub של Firebase JavaScript SDK כדי למצוא רשימה עדכנית של בעיות שדווחו ודרכים לפתרון בעיות, וגם לדווח על בעיות משלכם.
ה-Admin SDK של מבנים ב-Node.js לא תואם ל-SDK של Firebase JavaScript
ה-Firebase Admin SDK ל-Node.js וה-SDK של Firebase JavaScript הם הטמעות נפרדות שלא משתפות הגדרות של ממשק, כיתה או פונקציה. מכונות של אובייקטים מסוג Admin SDK לא תואמות לפונקציות של Firebase JavaScript SDK.
לדוגמה, מופע של FirebaseApp של Admin SDK שהוענק לפונקציה getDatabase של JavaScript SDK של Firebase יגרום לשגיאה הבאה:
TypeError: Cannot read properties of undefined (reading 'getProvider')
at _getProvider
at getDatabase
זה נכון לגבי כל ממשק ה-API של Firebase JavaScript SDK, ולא רק לגבי Realtime Database.
אותו הדבר נכון גם לגבי שימוש בכיוון ההפוך. אם מנסים להשתמש בסוג Timestamp של Cloud Firestore JS SDK עם Firebase Admin SDK ל-Node.js, מתקבלות שגיאות דומות.
הימנעות משימוש בגרסאות סותרות של SDK של Firebase JavaScript
אם יש כמה גרסאות סותרות של ה-SDK של Firebase JavaScript שמוגדרות כיחסי תלות בפרויקט, הן יגרמו לשגיאות זמן ריצה כשמועברות בין חבילות ה-SDK. לדוגמה, שימוש בספרייה Data Connect עם גרסה לא תואמת של FirebaseApp גורם לשגיאה הבאה:
Error: Component data-connect has not been registered yet
בדרך כלל הבעיה הזו נגרמת כתוצאה מעדכון של תלות באחת מחבילות Firebase SDK, אבל לא בכל החבילות. המצב הזה קורה לעיתים קרובות כשכלי אוטומטי לעדכון יחסי התלות משנה קבוצת משנה של יחסי התלות של Firebase SDK בקובץ yarn.lock או package-lock.json של הפרויקט. מאחר שגרסאות רבות של Firebase JavaScript SDK פועלות יחד, השימוש בגרסאות שונות של ה-SDK גורם לאי-תאימות בסביבת זמן הריצה.
כדי לפתור את הבעיה, מוחקים את הספרייה node_modules/ ואת הקובץ yarn.lock (ב-yarn) או package-lock.json (ב-npm) בפרויקט ומתקינים מחדש את יחסי התלות.
אם השגיאות נמשכות, ממשיכים לנפות את הבאגים באמצעות הפקודה npm ls. הפקודה הזו תתעד את יחסי התלות של הפרויקט כדי שתוכלו לזהות גרסאות סותרות של מודול firebase.
לדוגמה, ביומן הבא מוצג package-using-older-firebase שמייבא גרסת SDK של Firebase JavaScript שנמצאת בסכסוך:
$ 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
שגיאות יכולות להתרחש גם בגלל שילוב של הצהרות require ו-import של CJS ו-ESM באפליקציה. כך נוצרות כמה מכונות של SDK של Firebase JavaScript, שכל אחת מהן שונה מהשנייה, וכתוצאה מכך היכולת של SDK של Firebase JavaScript לפעול עם רכיבים אחרים נפגעת.
כדי לנפות באגים בתרחיש הזה, צריך להגדיל את רמת הפירוט של ה-bundler שבחרתם. לדוגמה, אפשר להשתמש בדגל analyze של esbuild למטרה הזו.
מוודאים ששירותי ה-Workers מקובצים
בדרך כלל, קובצי שירות נוצרים מצינור עיבוד נתונים נפרד משאר אפליקציית האינטרנט, והם לא כלולים בהגדרת ברירת המחדל של חבילות כמו Webpack.
אם אתם משתמשים בגרסה המודולרית של Firebase JavaScript SDK בתוך ה-service worker, עליכם להגדיר את ה-bundler של האפליקציה כך שיכלול את קובץ המקור של ה-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 לאיмпорт שלא תומכים בקובצי שירות, או קבצים שלא קיימים בהיקף של קובץ השירות. לפעמים הכישלונות האלה שקטים וקשה לנפות באגים.
במאמר שימוש ב-bundlers של מודולים עם Firebase מוסבר איך לצרף לאפליקציה את הגרסה המודולרית של ה-SDK של Firebase JavaScript.
לחלופין, אפשר לבטל את הצורך בחבילות על ידי ייבוא חבילות ה-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 נועד במקור לפעול בסביבות דפדפן. ההשקה של מסגרות עיבוד בצד השרת (SSR) מרחיבה את השימוש ב-SDK לסביבות חדשות בסביבת זמן הריצה. סביבות זמן הריצה האלה מספקות קבוצת משנה של כלים וממשקי API שדפדפני אינטרנט מספקים.
לדוגמה, חלק מ-SDK של Firebase דורשים שמירת נתונים במטמון באמצעות IndexedDB, API לשימוש בדפדפן בלבד. יכול להיות שתצטרכו אינטראקציה של משתמשים בתהליכי כניסה מסוימים ב-Firebase Auth, וזה לא אפשרי בסביבות שרת ללא ממשק גרפי. App Check מסתמך על שיטות ניתוח נתונים (heuristics) בדפדפן כדי לאמת את המשתמש לפני יצירת אסימוני App Check.
כשעובדים עם ה-SDK בסביבות החדשות האלה, צריך להשתמש ב-FirebaseServerApp, וריאנט חדש של FirebaseApp שמאפשר לטעון מראש את מכונה של Firebase עם SSR באמצעות נתונים שנאספו מצד הלקוח.
הפונקציה FirebaseServerApp תומכת בשני פרמטרים:
- אסימון מזהה אימות: אם הוא מסופק, Firebase Auth יבצע כניסה אוטומטית של משתמש שכבר אומת, ויכול להיות שהכניסה תהיה לכל אורך הסשן, גם בצד הלקוח וגם בצד השרת.
- אסימון לבדיקה של אפליקציה: אם האסימון מסופק, ערכות ה-SDK האחרות של Firebase משתמשות בו בלי צורך לאתחל מכונה של לקוח App Check (שאין תמיכה בו מחוץ לסביבות דפדפן). הפעולה הזו תאפשר תמיכה ב-SSR במוצרים שבהם App Check מופעל, כמו Cloud Functions, Data Connect, Cloud Firestore, Realtime Database ו-Vertex AI.
דוגמה לשימוש ב-FirebaseServerApp ב-Next.js מופיעה במאמר ייעול פיתוח אפליקציות SSR באמצעות FirebaseServerApp.