Infinite loading collections on Firestore Emulator UI

[davidoort]

[REQUIRED] Environment info

firebase-tools: 12.6.1

Platform: macOS

[REQUIRED] Test case

Run firebase init, select Functions and Emulators, use an existing project, select Typescript, enable linting, install dependencies with npm, setup Authentication, Functions, Firestore, Storage emulators, use default ports, enable Emulator UI.

Once firebase init is finished, uncomment the helloWorld lines of TS code.

Modify the serve npm command in functions/package.json to "serve": "npm run build && firebase emulators:start --only functions,firestore"

Go to http://127.0.0.1:4000/firestore

[REQUIRED] Steps to reproduce

Create a new Firebase project with firebase init, selecting Functions and Emulators as products, choosing TS, connecting to an existing project and running npm run serve to test the helloWorld function.

[REQUIRED] Expected behavior

When I open http://127.0.0.1:4000/firestore I would expect to see an empty firestore database and be able to add data to it.

[REQUIRED] Actual behavior

> npm run build && firebase emulators:start --only functions,firestore --inspect-functions


> build
> tsc

i  emulators: Starting emulators: functions, firestore
⚠  functions: You are running the Functions emulator in debug mode (port=9229). This means that functions will execute in sequence rather than in parallel.
⚠  functions: The following emulators are not running, calls to these services from the Functions emulator will affect production: auth, database, hosting, pubsub, storage
⚠  functions: Your GOOGLE_APPLICATION_CREDENTIALS environment variable points to /Users/dalonso/secrets/giftit-207d2-0f228517529a.json. Non-emulated services will access production using these credentials. Be careful!
⚠  firestore: Cloud Firestore Emulator does not support multiple databases yet.
⚠  firestore: Did not find a Cloud Firestore rules file specified in a firebase.json config file.
⚠  firestore: The emulator will default to allowing all reads and writes. Learn more about this option: https://firebase.google.com/docs/emulator-suite/install_and_configure#security_rules_configuration.
i  firestore: Firestore Emulator logging to firestore-debug.log
✔  firestore: Firestore Emulator UI websocket is running on 9150.
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "/Users/dalonso/git/giftit/GiftitHQ/giftit-backend/functions/ts-firebase-functions/functions" for Cloud Functions...
⚠  functions: Your requested "node" version "18" doesn't match your global version "19". Using node@19 from host.
Serving at port 8948

shutdown requested via /__/quitquitquit

✔  functions: Loaded functions definitions from source: helloWorld.
✔  functions[us-central1-helloWorld]: http function initialized (http://127.0.0.1:5001/giftit-207d2/us-central1/helloWorld).
>  Debugger listening on ws://127.0.0.1:9229/0f833b4e-b16b-441f-892b-5d46df351822
>  For help, see: https://nodejs.org/en/docs/inspector

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://127.0.0.1:4000/               │
└─────────────────────────────────────────────────────────────┘

┌───────────┬────────────────┬─────────────────────────────────┐
│ Emulator  │ Host:Port      │ View in Emulator UI             │
├───────────┼────────────────┼─────────────────────────────────┤
│ Functions │ 127.0.0.1:5001 │ http://127.0.0.1:4000/functions │
├───────────┼────────────────┼─────────────────────────────────┤
│ Firestore │ 127.0.0.1:8080 │ http://127.0.0.1:4000/firestore │
└───────────┴────────────────┴─────────────────────────────────┘
  Emulator Hub running at 127.0.0.1:4400
  Other reserved ports: 4500, 9150

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.
 

[google-oss-bot]

This issue does not have all the information required by the template. Looks like you forgot to fill out some sections. Please update the issue with more information.

[davidoort]

Added the missing test section 👍

[davidoort]

Even when I go to https://github.com/firebase/emulators-codelab and do firebase emulators:start --only functions,firestore --inspect-functions --import=./seed --project demo-something inside codelab-final-state I get the same issue... Pretty annoying to not be able to even get a simple example up and running with the firestore emulator suite

[aalej]

Hey @davidoort, sorry to hear you’re encountering this issue and thanks for providing a detailed report. I’m trying to reproduce the behavior you mentioned, but so far I haven’t encountered any issues with loading the Firestore Emulator UI. I have tried both the test case you provided as well as https://github.com/firebase/emulators-codelab.

I’m currently not sure what could be causing this. To get a better overview, could you pass the --debug flag(e.g. firebase emulators:start --only functions,firestore --inspect-functions --import=./seed --project demo-something --debug) and share your firestore-debug.log and firebase-debug.log files as these should contain additional logs which could help narrow down the cause.

I am using the following to replicate the issue:

• firebase-tools: v12.6.2
• Platform: macOS Ventura 13.6
• Node: v18.16.1

[davidoort]

More detailed environment info:

• firebase-tools: v12.6.1
• Platform: macOS Sonoma 14.0
• Node: v19.9.0

Log files:

firestore-debug.log ui-debug.log

Thanks for the help! I also opened up an issue https://github.com/firebase/emulators-codelab/issues/27 in the codelab repo, they're probably related

[brianmhunt]

Quite possibly related, we're getting this:

on Ubuntu / Node v18.18.0 / firebase-tools 12.7.

The client locks up, and we see this what looks to simply be noise with firebase --debug

 {"metadata":{"emulator":{"name":"firestore"},"message":"Oct 16, 2023 7:13:41 PM io.gapi.emulators.netty.HttpVersionRoutingHandler channelRead\nINFO: Detected non-HTTP/2 connection.\n"}}
[2023-10-16T19:13:47.101Z] Oct 16, 2023 7:13:47 PM io.gapi.emulators.netty.HttpVersionRoutingHandler channelRead
INFO: Detected non-HTTP/2 connection.
 {"metadata":{"emulator":{"name":"firestore"},"message":"Oct 16, 2023 7:13:47 PM io.gapi.emulators.netty.HttpVersionRoutingHandler channelRead\nINFO: Detected non-HTTP/2 connection.\n"}}
[2023-10-16T19:13:47.309Z] Oct 16, 2023 7:13:47 PM io.gapi.emulators.netty.HttpVersionRoutingHandler channelRead
INFO: Detected non-HTTP/2 connection.
 {"metadata":{"emulator":{"name":"firestore"},"message":"Oct 16, 2023 7:13:47 PM io.gapi.emulators.netty.HttpVersionRoutingHandler channelRead\nINFO: Detected non-HTTP/2 connection.\n"}}
[2023-10-16T19:13:53.137Z] Oct 16, 2023 7:13:53 PM io.gapi.emulators.netty.HttpVersionRoutingHandler channelRead
INFO: Detected non-HTTP/2 connection.
 {"metadata":{"emulator":{"name":"firestore"},"message":"Oct 16, 2023 7:13:53 PM io.gapi.emulators.netty.HttpVersionRoutingHandler channelRead\nINFO: Detected non-HTTP/2 connection.\n"}}
[2023-10-16T19:13:59.115Z] Oct 16, 2023 7:13:59 PM io.gapi.emulators.netty.HttpVersionRoutingHandler channelRead
INFO: Detected non-HTTP/2 connection.
 {"metadata":{"emulator":{"name":"firestore"},"message":"Oct 16, 2023 7:13:59 PM io.gapi.emulators.netty.HttpVersionRoutingHandler channelRead\nINFO: Detected non-HTTP/2 connection.\n"}}

This was all working 1-2 weeks ago, and downgrading doesn't seem to help.

Edit Noting that 10.4.0 seems to work fine.

[mpastewski]

I experienced the same issue after upgrading to the newest version of firebase-tools. After I downgraded to 10.4.0, as suggested above, it started working again. I didn't check versions one by one, which is the last working one.

Kindly note that it isn't solely a UI issue. I was importing Firestore from a folder and wasn't able to access it via UI, and also failed to access documents directly (via HTTP request and firebase-admin library in JS), hence the entire DB is malfunctioning.

If you direct me what artifacts you need exactly to reproduce this, please let me know and I'll try my best to comply.

[kroikie]

@aalej I was not able to repro this. Would you mind trying again with 12.7.0?

My setup was: node: 18.12.1 firebase-tools: 12.7.0 MacOS: Ventura 13.6

[mpastewski]

After downgrading to 10.4.0 and fixing the issue with the circular indicator, I also noticed that despite the fact that I can access data in the UI, the user interface will not reflect changes when they are made using the "firebase-admin" library (javascript). I don't know if this is related to this bug or if it's a separate issue.

[aalej]

@kroikie, I tried to reproduce this using the setup below, but so far I haven’t had any luck trying to replicate the issue:

• Node: v18.16.1
• firebase-tools: 12.7.0
• Platform: macOS Ventura 13.6

I also tried using the following Node versions and no issues were encountered when accessing the Firestore Emulator UI: v18.12.1, v18.18.0, and v19.9.0.

[kroikie]

@mpastewski what are you downgrading to 10.4.0? If it is the CLI that is quite an old version at this point. Could you try with 12.7.0 and see if the UI issue is resolved?

[mpastewski]

@kroikie. Yes, I was able to make it work for the time being with firebase-tools 12.7.0 and node 18.18.2.

I will update you if I experience any problems in upcoming days.

[pilis]

I also encountered this problem. It seems to me that it is related to macOS Sonoma 14.0. The problem did not occur before the upgrade

[gregfenton]

Is it possible this has to do with Mac architecture? Is this an Intel vs. Apple Silicon issue?

BTW: I recommend focusing on LTS versions of NodeJS (i.e. the "even numbered" versions), and not the experimental/development versions (i.e. the "odd numbered" versions).

[pilis]

I managed to solve this problem by turning off "Communication Safety" in MacOS settings. (Screen Time > Communication Safety > Communication Safety)

[gregfenton]

I managed to solve this problem by turning off "Communication Safety" in MacOS settings. (Screen Time > Communication Safety > Communication Safety)

Thanks for the info! This page gives a short blurb on the feature.

[sinano1107]

The same problem occurs. macOS Sonoma: 14.2 Node: 21.4.0 Firebase-tools: 13.0.2

Community Safety is not turned on

[gregfenton]

@sinano1107 Note: Node v21 is not a "long term support" version. I would recommend using v20, v18, v16, etc.

[sinano1107]

@sinano1107 Note: Node v21 is not a "long term support" version. I would recommend using v20, v18, v16, etc.

The same problem occurs with v20 and v18. I looked at the network and found that config was loading indefinitely at regular intervals.

[sinano1107]

I don't know why, but the problem has been resolved. I thought a software update had been done, but it was still Sonoma 14.2 as before. Maybe rebooting helped. Thank you very much.

[yasaad]

I'm running into the same issue on an M2 mac with the following versions:

firebase-tools: tried 10.4, 12.7, and 13.0.3 node - tried 18.16.1 and 20.11.0 macOS Sonoma - 14.2.1 (23C71)

[wLotherington]

same issue with same specs as @yasaad

firebase-tools: 13.0.3 node: 20.11.0 macOS: Sonoma 14.2.1 (23C71) java: 20.0.1

https://github.com/firebase/firebase-tools/assets/38896635/bff22755-ad32-413d-a2cf-98d683afe558

[a-malacarne]

I have the same problem with Mac OS Sonoma 14.3. If I set the Firestore port in firebase.json to anything other than 8080, it works. Can anyone else confirm this?

[gregfenton]

I have the same problem with Mac OS Sonoma 14.3. If I set the Firestore port in firebase.json to anything other than 8080, it works. Can anyone else confirm this?

Do you have anything already running on 8080? (lsof -i TCP:8080)

[gregfenton]

@wLotherington are there any errors in your browser's JS console when you do that?

[wLotherington]

re: port 8080 Empty return when I run lsof -i TCP:8080 before spinning up the emulators. After running the emulators, lsof -i TCP:8080 returns the emulator process information.

re: console errors no browser console errors on the emulator ui page.

re: other port I did try specifying a different port number as @a-malacarne suggested, and the firestore emulator worked as expected.

[wLotherington]

I have the same problem with Mac OS Sonoma 14.3. If I set the Firestore port in firebase.json to anything other than 8080, it works. Can anyone else confirm this?

I thought this resolved the issue, but when I set the firestore emulator to a different port on the angular project I'm working on, I ran into some issues. The firestore emulator page loaded and let me create collections/documents, but these don't show up in the connected angular app. I am able to create new collections/documents from the app and they exist on some emulator somewhere, but nowhere I can find in the emulator ui

@a-malacarne - does this match what you're experiencing?

[CalvinJamesHeath]

Im having the same issue, Im on mac os Sonoma 14.3.1 (23D60)

[olearykieran]

having the same problem on mac Sonoma. Changing to connectFirestoreEmulator(db, "localhost", 8181); seemed to have worked for me!

[Merwan1010]

Had the same problem, I just changed the port to 8080 to 8081 on the firebase.json.

    "firestore": {
      "port": 8081,
      "host": "0.0.0.0"
    },