Trang này cung cấp các mẹo và cách khắc phục sự cố JavaScript mà bạn có thể gặp phải khi sử dụng SDK Firebase JavaScript.
Bạn gặp phải những thách thức khác hoặc không thấy vấn đề của mình? Hãy nhớ tham khảo Câu hỏi thường gặp chính về Firebase để biết thêm thông tin về các câu hỏi thường gặp liên quan đến toàn bộ Firebase hoặc dành riêng cho sản phẩm.
Bạn cũng có thể kiểm tra kho lưu trữ GitHub của SDK Firebase JavaScript để xem danh sách cập nhật về các vấn đề đã báo cáo và cách khắc phục sự cố, đồng thời gửi vấn đề của riêng bạn tại đó.
Admin SDK cho các cấu trúc Node.js không tương thích với SDK Firebase JavaScript
Firebase Admin SDK cho Node.js và Firebase JavaScript SDK là các cách triển khai riêng biệt không dùng chung các định nghĩa về giao diện, lớp hoặc hàm. Các thực thể của đối tượng Admin SDK không tương thích với các hàm SDK Firebase JavaScript.
Ví dụ: một thực thể của Admin SDK's FirebaseApp được truyền đến
Firebase SDK JavaScript getDatabase sẽ tạo ra lỗi sau:
TypeError: Cannot read properties of undefined (reading 'getProvider')
at _getProvider
at getDatabase
Điều này đúng với toàn bộ bề mặt API của SDK Firebase JavaScript, không chỉ với Realtime Database.
Điều này cũng đúng với việc sử dụng theo hướng ngược lại. Việc cố gắng sử dụng loại Timestamp của
Cloud Firestore JS SDK với Firebase Admin SDK cho Node.js
sẽ tạo ra các lỗi tương tự.
Tránh sử dụng các phiên bản xung đột của Firebase JavaScript SDK
Nhiều phiên bản xung đột của Firebase JavaScript SDK được định cấu hình dưới dạng các phần phụ thuộc
trong một dự án sẽ gây ra lỗi thời gian chạy khi các thực thể SDK được truyền giữa các gói SDK. Ví dụ: việc sử dụng thư viện Data Connect với phiên bản FirebaseApp không khớp sẽ gây ra lỗi sau:
Error: Component data-connect has not been registered yet
Vấn đề này thường do việc cập nhật phần phụ thuộc của một nhưng không phải tất cả các gói SDK Firebase. Tình huống này thường xảy ra khi một công cụ cập nhật phần phụ thuộc tự động thay đổi một tập hợp con của các phần phụ thuộc SDK Firebase trong tệp yarn.lock hoặc package-lock.json của dự án. Vì nhiều Firebase JavaScript SDK
tương tác với nhau, nên việc sử dụng nhiều phiên bản SDK sẽ gây ra tình trạng
không tương thích trong thời gian chạy,
Để khắc phục vấn đề này, hãy xoá thư mục node_modules/ và yarn.lock (đối với
yarn) hoặc package-lock.json (đối với npm) trong dự án của bạn rồi cài đặt lại các
phần phụ thuộc.
Nếu vẫn còn lỗi, hãy gỡ lỗi thêm vấn đề bằng lệnh npm ls
command. Lệnh này sẽ ghi lại các phần phụ thuộc của dự án để bạn có thể xác định các phiên bản xung đột của mô-đun firebase.
Ví dụ: nhật ký sau đây cho thấy package-using-older-firebase đang nhập một
phiên bản xung đột của 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
Lỗi cũng có thể xảy ra do việc kết hợp các câu lệnh require và import
trong ứng dụng của bạn. Điều này tạo ra nhiều thực thể của Firebase JavaScript SDK,
mỗi thực thể khác biệt với thực thể còn lại, làm hỏng khả năng tương tác của Firebase JavaScript SDK.
Tăng mức độ chi tiết của trình đóng gói mà bạn chọn để gỡ lỗi tình huống này. Ví dụ: bạn có thể sử dụng cờ phân tích esbuild
cho mục đích này.
Đảm bảo rằng các trình thực thi dịch vụ được đóng gói
Các trình thực thi dịch vụ thường được xây dựng từ một quy trình riêng biệt so với phần còn lại của ứng dụng web và không được đưa vào cấu hình mặc định của các trình đóng gói như Webpack.
Nếu bạn sử dụng phiên bản mô-đun của Firebase JavaScript SDK trong trình thực thi dịch vụ, thì hãy đảm bảo bạn định cấu hình trình đóng gói ứng dụng để đưa tệp nguồn trình thực thi dịch vụ vào. Ví dụ sau đây sử dụng npx để đóng gói trình chạy dịch vụ firebase-sw.js trong thư mục src của dự án:
npx esbuild ./src/firebase-sw.js --bundle --minify --main-fields=webworker,browser,module,main,default --outfile=public/firebase-sw.js
Việc kích hoạt một trình chạy dịch vụ không được đóng gói sẽ không thành công nếu trình chạy đó nhập các mô-đun ES không hỗ trợ trình chạy dịch vụ hoặc các tệp không tồn tại trong phạm vi của trình chạy dịch vụ. Đôi khi, những lỗi này không hiển thị và khó gỡ lỗi.
Hãy xem bài viết Sử dụng trình đóng gói mô-đun với Firebase để biết thêm thông tin về cách đóng gói phiên bản mô-đun của Firebase JavaScript SDK vào ứng dụng.
Ngoài ra, bạn có thể loại bỏ nhu cầu đóng gói bằng cách nhập các gói SDK compat
Firebase JavaScript từ 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();
Sử dụng FirebaseServerApp khi làm việc với tính năng Kết xuất phía máy chủ
SDK Firebase JavaScript ban đầu được dùng để chạy trong môi trường trình duyệt. Việc giới thiệu các khung Kết xuất phía máy chủ (SSR) sẽ đẩy việc sử dụng SDK vào các môi trường thời gian chạy mới. Các thời gian chạy này cung cấp một tập hợp con các công cụ và API mà trình duyệt web cung cấp.
Ví dụ: một số SDK Firebase yêu cầu bộ nhớ đệm dữ liệu bằng IndexedDB, một API chỉ dành cho trình duyệt. Firebase Authentication có thể yêu cầu lượt tương tác của người dùng trong một số quy trình đăng nhập không thể thực hiện trong môi trường máy chủ không có giao diện người dùng. App Check dựa vào phương pháp phỏng đoán của trình duyệt để xác thực người dùng trước khi tạo mã thông báo App Check.
Khi làm việc với SDK trong các môi trường mới này, hãy sử dụng
FirebaseServerApp, một biến thể mới
của FirebaseApp cung cấp phương tiện để tải trước thực thể Firebase SSR
bằng dữ liệu được thu thập từ phía máy khách.
FirebaseServerApp hỗ trợ 2 tham số:
- Mã thông báo mã nhận dạng xác thực: nếu được cung cấp, Firebase Authentication sẽ tự động đăng nhập người dùng đã xác thực trước đó, có thể kéo dài một phiên trên toàn bộ CSR /SSR.
- Mã thông báo Kiểm tra ứng dụng: Nếu được cung cấp, mã thông báo sẽ được các Firebase SDK khác sử dụng mà không cần khởi động một thực thể của ứng dụng App Check (không được hỗ trợ bên ngoài môi trường trình duyệt). Điều này sẽ mở khoá tính năng hỗ trợ SSR cho các sản phẩm đã bật App Check, chẳng hạn như Cloud Functions, Data Connect, Cloud Firestore, Realtime Database, và Vertex AI.
Hãy xem bài viết Tối ưu hoá quá trình phát triển ứng dụng SSR bằng
FirebaseServerApp
để biết ví dụ về cách sử dụng FirebaseServerApp trong Next.js.