Лучшие практики Firebase JavaScript SDK

На этой странице представлены советы и рекомендации по устранению неполадок, связанных с JavaScript, которые могут возникнуть при использовании Firebase JavaScript SDK.

Возникли другие проблемы или вы не нашли решение своей проблемы? Обязательно ознакомьтесь с основным разделом часто задаваемых вопросов Firebase, где вы найдете больше вопросов, касающихся Firebase в целом или конкретного продукта.

Вы также можете проверить репозиторий Firebase JavaScript SDK на GitHub, чтобы ознакомиться с актуальным списком сообщенных проблем и способами их решения, а также сообщить о своих собственных проблемах там.

Конструкции Admin SDK для Node.js несовместимы с Firebase JavaScript SDK.

Firebase Admin SDK для Node.js и Firebase JavaScript SDK — это разные реализации, которые не используют общие определения интерфейсов, классов или функций. Экземпляры объектов Admin SDK несовместимы с функциями Firebase JavaScript SDK.

Например, при передаче экземпляра FirebaseApp из Admin SDK в функцию Firebase JavaScript getDatabase возникает следующая ошибка:

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 приводит к аналогичным ошибкам.

Избегайте использования конфликтующих версий 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 проекта. Поскольку многие JavaScript SDK Firebase взаимодействуют друг с другом, использование различных версий SDK приводит к несовместимости во время выполнения.

Для решения этой проблемы удалите каталог node_modules / и файлы yarn.lock (для yarn ) или package-lock.json (для npm ) в вашем проекте, а затем переустановите зависимости.

Если ошибки сохраняются, выполните дальнейшую отладку с помощью команды npm ls . Это позволит записать в лог зависимости вашего проекта, чтобы вы могли выявить конфликтующие версии модуля firebase .

Например, в следующем логе показано, как package-using-older-firebase импортирует конфликтную версию JavaScript SDK Firebase :

$ 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 в вашем приложении. Это создает несколько экземпляров Firebase JavaScript SDK, каждый из которых отличается от другого, что нарушает совместимость Firebase JavaScript SDK. Для отладки этой ситуации увеличьте уровень детализации вашего сборщика. Например, для этой цели можно использовать флаг analyze в esbuild .

Убедитесь, что работники сферы услуг объединены в группы.

Сервис-воркеры часто создаются в отдельном конвейере, отличном от остальной части веб-приложения, и не включаются в конфигурацию сборщиков по умолчанию, таких как Webpack.

Если вы используете модульную версию Firebase JavaScript SDK в своем сервис-воркере, убедитесь, что ваш сборщик приложений настроен на включение исходного файла сервис-воркера. В следующем примере используется npx для сборки сервис-воркера firebase-sw.js в каталог src проекта:

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

Активация сервис-воркера, не входящего в состав пакета, завершится неудачей, если он будет импортировать модули ES, не поддерживающие сервис-воркеры, или файлы, отсутствующие в области видимости сервис-воркера. Иногда эти ошибки происходят незаметно и их сложно отладить.

Дополнительную информацию об интеграции модульной версии Firebase JavaScript SDK в ваше приложение см. в разделе «Использование сборщиков модулей с Firebase» .

В качестве альтернативы, вы можете избежать необходимости в сборке, импортировав compat пакеты Firebase JavaScript SDK из 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 использует эвристические алгоритмы браузера для проверки пользователя перед созданием токенов App Check .

При работе с SDK в этих новых средах используйте FirebaseServerApp — новый вариант FirebaseApp , который позволяет предварительно загрузить экземпляр SSR Firebase данными, собранными на стороне клиента.

FirebaseServerApp поддерживает два параметра:

  • Токен аутентификации : если он предоставлен, Firebase Auth автоматически выполняет вход ранее аутентифицированного пользователя, потенциально охватывая сессию через границу между CSR и SSR.
  • Токен проверки приложений : Если указан, токен используется другими SDK Firebase без необходимости инициализации экземпляра клиента App Check (что не поддерживается вне браузерных сред). Это разблокирует поддержку SSR для продуктов, в которых включена App Check , таких как Cloud Functions , Data Connect , Cloud Firestore , Realtime Database и Vertex AI.

Пример использования FirebaseServerApp в Next.js см. в статье «Упрощение разработки SSR-приложений с помощью FirebaseServerApp».