Лучшие практики 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 , переданный функции getDatabase Firebase JavaScript SDK, выдает следующую ошибку:

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

Это справедливо для всей поверхности Firebase JavaScript SDK API, а не только для 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 проекта. Поскольку многие 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

Ошибки также могут возникать из-за смешивания операторов require и import CJS и ESM в вашем приложении. При этом создается несколько экземпляров Firebase JavaScript SDK, каждый из которых отличается от другого, что нарушает совместимость Firebase JavaScript SDK. Увеличьте уровень детализации выбранного упаковщика для отладки этого сценария. Например, для этой цели вы можете использовать флаг анализа 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 при работе с рендерингом на стороне сервера.

Firebase JavaScript SDK изначально предназначался для работы в среде браузера. Внедрение инфраструктур серверного рендеринга (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.

См. раздел «Оптимизация разработки приложений SSR с помощью FirebaseServerApp», где приведен пример использования FirebaseServerApp в Next.js.