Praktik terbaik Firebase JavaScript SDK

Halaman ini menawarkan tips dan pemecahan masalah untuk masalah JavaScript yang mungkin Anda alami saat menggunakan Firebase JavaScript SDK.

Ada kesulitan lain atau masalah yang Anda alami tidak dijelaskan di bawah ini? Pastikan Anda membaca FAQ Firebase utama untuk mengetahui lebih lanjut FAQ lintas Firebase atau khusus produk.

Anda juga dapat memeriksa repo GitHub Firebase JavaScript SDK untuk mengetahui daftar terbaru masalah yang dilaporkan dan pemecahan masalah, serta melaporkan masalah Anda sendiri di sana.

Admin SDK untuk konstruksi Node.js tidak kompatibel dengan Firebase JavaScript SDK

Firebase Admin SDK untuk Node.js dan Firebase JavaScript SDK adalah implementasi yang berbeda yang tidak memiliki definisi antarmuka, class, atau fungsi yang sama. Instance objek Admin SDK tidak kompatibel dengan fungsi SDK Firebase JavaScript.

Misalnya, instance FirebaseApp Admin SDK yang diteruskan ke fungsi getDatabase SDK JavaScript Firebase menghasilkan error berikut:

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

Hal ini berlaku untuk seluruh platform Firebase JavaScript SDK API, bukan hanya Realtime Database. Hal ini juga berlaku untuk penggunaan dalam arah yang berlawanan. Mencoba menggunakan jenis Timestamp Cloud Firestore JS SDK dengan Firebase Admin SDK untuk Node.js akan menghasilkan error yang serupa.

Hindari penggunaan versi Firebase JavaScript SDK yang bertentangan

Beberapa versi Firebase JavaScript SDK yang bertentangan yang dikonfigurasi sebagai dependensi dalam project akan menyebabkan error runtime saat instance SDK diteruskan di antara paket SDK. Misalnya, menggunakan library Data Connect dengan versi FirebaseApp yang tidak cocok akan menyebabkan error berikut:

Error: Component data-connect has not been registered yet

Masalah ini biasanya disebabkan oleh update dependensi dari satu, tetapi tidak semua, paket Firebase SDK. Situasi ini sering terjadi saat alat update dependensi otomatis mengubah sebagian dependensi Firebase SDK dalam file yarn.lock atau package-lock.json project. Karena banyak SDK Firebase JavaScript beroperasi satu sama lain, penggunaan berbagai versi SDK menyebabkan inkompatibel runtime,

Untuk memperbaiki masalah ini, hapus direktori node_modules/ dan yarn.lock (untuk yarn) atau package-lock.json (untuk npm) di project Anda dan instal ulang dependensi Anda.

Jika error tetap ada, debug masalah lebih lanjut dengan perintah npm ls. Tindakan ini akan mencatat dependensi project Anda sehingga Anda dapat mengidentifikasi versi modul firebase yang bertentangan.

Misalnya, log berikut menunjukkan package-using-older-firebase mengimpor versi Firebase JavaScript SDK yang bertentangan:

$ 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

Error juga dapat terjadi karena menggabungkan pernyataan require dan import CJS dan ESM di aplikasi Anda. Hal ini akan membuat beberapa instance SDK Firebase JavaScript, masing-masing berbeda dari yang lain, yang merusak interoperabilitas SDK Firebase JavaScript. Tingkatkan panjang teks dari pilihan bundler Anda untuk men-debug skenario ini. Misalnya, Anda dapat menggunakan flag analisis esbuild untuk tujuan ini.

Pastikan pekerja layanan dipaketkan

Pekerja layanan sering kali dibuat dari pipeline terpisah dari seluruh aplikasi web, dan tidak disertakan dalam konfigurasi default bundler seperti Webpack.

Jika Anda menggunakan versi modular SDK Firebase JavaScript dalam pekerja layanan, pastikan Anda mengonfigurasi app bundler untuk menyertakan file sumber pekerja layanan. Contoh berikut menggunakan npx untuk memaketkan pekerja layanan firebase-sw.js di direktori src project:

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

Aktivasi pekerja layanan yang tidak dipaketkan akan gagal jika sumbernya mengimpor modul ES yang tidak mendukung pekerja layanan atau file yang tidak ada dalam cakupan pekerja layanan. Terkadang kegagalan ini tidak terlihat dan sulit di-debug.

Lihat Menggunakan pemaket modul dengan Firebase untuk mengetahui informasi lebih lanjut tentang cara memaketkan versi modular Firebase JavaScript SDK ke dalam aplikasi Anda.

Atau, Anda dapat menghilangkan kebutuhan untuk melakukan bundling dengan mengimpor SDK bundle compat Firebase JavaScript dari 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();

Menggunakan FirebaseServerApp saat menggunakan Rendering Sisi Server

Firebase JavaScript SDK awalnya dimaksudkan untuk berjalan di lingkungan browser. Pengenalan framework Rendering Sisi Server (SSR) mendorong penggunaan SDK ke lingkungan runtime baru. Runtime ini menyediakan subset alat dan API yang disediakan browser web.

Misalnya, beberapa Firebase SDK memerlukan penyimpanan dalam cache data dengan IndexedDB, API khusus browser. Firebase Auth mungkin memerlukan interaksi pengguna dalam alur login tertentu yang tidak mungkin dilakukan di lingkungan server headless. App Check mengandalkan heuristika browser untuk memvalidasi pengguna sebelum membuat token App Check.

Saat menggunakan SDK di lingkungan baru ini, gunakan FirebaseServerApp, varian baru FirebaseApp yang menyediakan cara untuk memuat instance Firebase SSR secara offline dengan data yang dikumpulkan dari sisi klien.

FirebaseServerApp mendukung dua parameter:

  • Token ID Auth: jika disediakan, Firebase Auth akan otomatis memproses login pengguna yang sebelumnya diautentikasi, yang berpotensi mencakup sesi di seluruh pemisahan CSR/SSR.
  • Token App Check: Jika disediakan, token akan digunakan oleh Firebase SDK lainnya tanpa perlu melakukan inisialisasi instance klien App Check (yang tidak didukung di luar lingkungan browser). Tindakan ini akan membuka blokir dukungan SSR untuk produk yang mengaktifkan App Check, seperti Cloud Functions, Data Connect, Cloud Firestore, Realtime Database, dan Vertex AI.

Lihat Menyederhanakan pengembangan aplikasi SSR dengan FirebaseServerApp untuk mengetahui contoh penggunaan FirebaseServerApp di Next.js.