[REQUIRED] Environment info

firebase-tools:
8.4.3

Platform:
Catalina 10.15.5

[REQUIRED] Test case

Firebase Emulation Suite
Using Javascript or the Android SDK to create a new document that is in at LEAST two new collections(root collection + sub collection).
/firstCollection/document1/secondCollection/document2

[REQUIRED] Steps to reproduce

1. Init a new Firebase project
   firebase init functions
2. Add the following index.js

const firebase_admin = require('firebase-admin');

const admin = require("firebase-admin");
admin.initializeApp();
// create fourth level document
admin.firestore().collection("firstLevel").doc('secondLevel').collection("thirdLevel").doc("fourthLevel").set({
  hello: 'world'
});

3. Start the Firebase Emulator Suite
   firebase emulators:start --only firestore,functions

[REQUIRED] Expected behavior

The document should show up at http://localhost:4000 in the Firestore tab

[REQUIRED] Actual behavior

Nothing shows up in the Firebase Emulation Suite Firestore tab BUT the data can be read with the Android SDK (the document has been created).

[ADDITIONAL INFO]

It works when creating documents that are at the second level. The following index.js code works (the document shows up in the Firestore tab)

const firebase_admin = require('firebase-admin');

const admin = require("firebase-admin");
admin.initializeApp();
// create second level document
admin.firestore().collection("firstLevel").doc("secondLevel").set({
  hello: 'world'
});

It also works if a second level document(in a collection) is first created, then a new document in a sub collection is added(fourth level).

Everything works in Firestore production.

After running this command: firebase emulators:start

i emulators: Starting emulators: functions, firestore
✔ hub: emulator hub started at http://localhost:4400
⚠ Your requested "node" version "10" doesn't match your global version "12"
✔ functions: functions emulator started at http://localhost:5001
⚠ 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 started at http://localhost:8080
i firestore: For testing set FIRESTORE_EMULATOR_HOST=localhost:8080
i functions: Watching "/home/lbazan/Documents/sourcecode/--/--/functions" for Cloud Functions...
✔ functions[addJob]: http function initialized (http://localhost:5001/----/---/addJob).
✔ emulators: All emulators started, it is now safe to connect.

I'm going to my browser and just I'm able to see this one: "OK".

I have this configuration:
firebase.json

{
"functions": {
"predeploy": [
"npm --prefix "$RESOURCE_DIR" run lint",
"npm --prefix "$RESOURCE_DIR" run build"
],
"source": "functions"
},
"emulators": {
"functions": {
"port": 5001
},
"firestore": {
"port": 8080
}
}
}

package.json

{
"name": "functions",
"scripts": {
"lint": "tslint --project tsconfig.json",
"build": "tsc",
"serve": "npm run build && firebase emulators:start --only functions",
"shell": "npm run build && firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"engines": {
"node": "10"
},
"main": "lib/index.js",
"dependencies": {
"@types/cors": "^2.8.6",
"cors": "^2.8.5",
"firebase-admin": "^8.9.0",
"firebase-functions": "^3.3.0",
"webpack": "^4.43.0"
},
"devDependencies": {
"@firebase/testing": "^0.20.11",
"firebase-functions-test": "^0.1.6",
"ts-loader": "^8.0.1",
"tslint": "^5.12.0",
"typescript": "^3.2.2",
"webpack-cli": "^3.3.12",
"webpack-node-externals": "^2.5.0"
},
"private": true
}

any idea what could be the issue?

https://firebase.googleblog.com/2020/09/cloud-firestore-not-equal-queries.html

In firebase.json, it is possible to specify 0.0.0.0 for host for each emulator. This tells an emulator to listen on all IPv4 interfaces (including 127.0.0.1, the device's public network IP, etc.).

{
  // ...
  "emulators": {
    "firestore": {"host": "0.0.0.0", "port": 8080},
  }
}

However, with this setup, the Emulator UI attempts to send requests http://0.0.0.0:8080 to reach Firestore in the Firestore viewer. This is invalid since 0.0.0.0 is a non-routable address but some browsers / platforms (such as Chrome on Linux) special cases it to mean the same as 127.0.0.1. On other browsers / platforms (such as Chrome on Windows), this fails with errors like net::ERR_ADDRESS_INVALID.

Instead, the Emulator UI should change it to 127.0.0.1 when constructing the URL. Similarly, the Emulator UI should connect to ::1 (IPv6 local) when :: (IPv6 zero) is specified.

Running command: npm --prefix "$RESOURCE_DIR" run build
npm ERR! missing script: build

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\rensi\AppData\Roaming\npm-cache_logs\2020-11-15T20_35_10_937Z-debug.log
events.js:292
throw er; // Unhandled 'error' event

I have this version:

• [email protected]
  updated 1 package in 108.722s

Often Emulator is used before changing a schema or while running a test script.

It would be wonderful if we could add a button to say grab and export of production data (dev, stage,prod) and load up to the local emulator.

My thought is to have a button that opens the Storage Bucket within your project where you are

Then you could bring that down locally and place it into your local import folder and fire up the emulator again.

This way you have a solid copy of the data you would need to start from.

Viewing the firestore UI is always empty. My tests are passing and successfully using firestore. Creating a collection with a document in the UI returns to a empty database UI. Navigating to the collection via the URL returns an empty collection.

I'm on version 8.7.0 of firebase cli. Starting the emulators with firestore emulators:start.

Config:

    "firestore": {
        "rules": "firestore.rules"
    },
    "emulators": {
        "hosting": {
            "port": 5000
        },
        "firestore": {
            "port": "8080"
        },
        "ui": {
            "enabled": true,
            "host": "0.0.0.0",
            "port": 4000
        }
    }

This is likely a react app starting issue. I am using WSL / Ubuntu 16.04.

Upon running:

firebase emulators:exec --project sample --only database,firestore --import test-data 'npm start'

I get a window that says:

This isn't a major inconvenience, since I can just open the URL in the browser directly.

I haven't found any issue template, please tell me if I need to edit this.

Problem

I've noticed that in the local firestore UI the fields of a document, its subcollections and the fields of a map inside the document are not lexicographically ordered.

To reproduce

1. Startup the firestore emulator.
2. Create a new collection temp
3. Create a new doc temp
4. Add fields and fields in non-lexicographical order, e.g Z: "Z", F: "F", A: "A",G: "G".
5. They are ordered by the added time, not lexicographically

Expected behavior

In the Firestore web UI the lexicographical order is followed.

Motivation

I believe it should be that way to give consistency between the two environments, to help also the developer when confronting the 2 DBs.

Fix

It should not be difficult to fix by adding a sort method when mapping the keys to the great components. I would be very happy to do it.

Thank you

firebase-tools: 8.10.0

was fine in version 8.6

Platform: MacOS

[REQUIRED] Environment info

firebase-tools: : 8.4.3

Platform: : macOS

[REQUIRED] Test case

Should show documents with nested collections greyed out similar to production firestore

[REQUIRED] Steps to reproduce

1. Create a nested collection for a document where no fields exist through code

await admin.firestore().doc('players/123/addresses/456').set({street:'street'});

[REQUIRED] Expected behavior

Document with 123 id should be visible (grey color) even if fields doesn't exist

[REQUIRED] Actual behavior

Document with 123 id, is not shown in the emulator leading to difference between production and emulator. Also its pretty tough to debug this scenario!

I have the latest CLI tools installed (8.4.2).
My firebase.json file is

{
  "emulators": {
    "firestore": {
     "port": 8081
    },
    "ui": {
      "enabled": true
    }
  }
}

Output of the start command is as follows

i  emulators: Starting emulators: firestore
⚠  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
i  ui: Emulator UI logging to ui-debug.log

┌───────────────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! View status and logs at http://localhost:4000 │
└───────────────────────────────────────────────────────────────────────┘

┌───────────┬────────────────┬─────────────────────────────────┐
│ Emulator  │ Host:Port      │ View in Emulator UI             │
├───────────┼────────────────┼─────────────────────────────────┤
│ Firestore │ localhost:8081 │ http://localhost:4000/firestore │
└───────────┴────────────────┴─────────────────────────────────┘
  Other reserved ports: 4400, 4500

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

Though when I hit the localhost:4500 I get the  message 'Upgrade required'.

Not sure what I need to upgrade, any insights to get this working?

Right now after emulators are stopped, you can still use Tab to navigate around and click buttons even though mouse is blocked.

The RTDB UI correctly lists the multiple databases created in the emulator. But the Firestore UI only lists the "main" one, even when connecting to different project id in the emulator.

Use-case: when we run unit tests, we use the --import to use a common dataset for each test, but each tests starts on its own "project id" (to not contaminate other tests).
Currently it's not possible to debug those tests in the emulator UI.

Environment:

• MacOS Catalina: 10.15.6
• shell: zsh 5.7.1
• node: v14.4.0
• npm: 6.14.7

I use an npm script to launch the emulators. In the scripts section of package.json I have:

"emulators": "firebase emulators:start --only firestore --import=./data --export-on-exit"

The emulators run fine when I run npm run emulators.

But when I terminate the command, things do not work as expected. Pressing ctrl+c shows that the emulators receive 2 SIGINTs:

^C
i  emulators: Received SIGINT (Ctrl-C) for the first time. Starting a clean shutdown.
i  emulators: Please wait for a clean shutdown or send the SIGINT (Ctrl-C) signal again to stop right now.
i  Automatically exporting data using --export-on-exit "./data" please wait for the export to finish...

⚠  emulators: Received SIGINT (Ctrl-C) 2 times. You have forced the Emulator Suite to exit without waiting for 2 subprocesses to finish. These processes may still be running on your machine:

 ┌────────────────────┬────────────────┬───────┐
 │ Emulator           │ Host:Port      │ PID   │
 ├────────────────────┼────────────────┼───────┤
 │ Emulator UI        │ localhost:4444 │ 87959 │
 ├────────────────────┼────────────────┼───────┤
 │ Firestore Emulator │ localhost:7777 │ 87959 │
 └────────────────────┴────────────────┴───────┘

 To force them to exit run:

 kill 87959 87959

It is the warning, about receiving Ctrl-C 2 times, that is the problem. Because of this issue, the data does not get exported on exit.

Running that same command but directly on the command line rather than via npm run emulators, and Ctrl-C shuts the emulators down cleanly and data exports as expected.

[REQUIRED] Environment info

firebase-tools:

8.7.0

Platform:

macOS

[REQUIRED] Test case

Tried to add reference value to existing array field on Firestore Emulator UI, but nothing happened.

[REQUIRED] Steps to reproduce

1. Run firebase emulators:start
2. Open http://localhost:4000/firestore on Safari or Chrome
3. Add a collections and a document with array field
4. Try to add a reference value to the exiting array field

[REQUIRED] Expected behavior

New reference value is added exiting array field.

As a side note, adding an array field with as a reference value was succeeded without any problems, but adding reference value to existing array field was failed.

[REQUIRED] Actual behavior

Nothing happened.

But, on the console of DevTools, this error log was printed.

FirebaseError: Function isEqual() requires its first argument to be a DocumentReference, but it was: a custom e object

I create a user in the local auth emulator and later set custom claims for her later at some stage.

The claims are set correctly and are also visible in the Firebase emulator when you edit the user.

However, when I try to execute local Firebase function and get the claims from the context.auth.token, custom claims are not present for some reason.

Is this a bug or am I doing something wrong?

Function that sets custom claims

exports.processSignUp = functions.auth.user().onCreate(async user => {
  // ...
  try {
    await firebase.auth().setCustomUserClaims(user.uid, customClaims);
  } catch (err) {
    console.log(err);
  }
  // ...
});

Function that tries to access the claims

export const testFunc = functions.https.onCall((data, context) => {
  // custom claims are not present in the token
  console.log(context.auth.token);
  return { ok: false }
});

Is there any plan to implement Firestore collection filtering or sorting like in the main firebase console? e.g.

I have a strange situation where the emulator does not emulate the local functions.
The app is hosted locally on localhost:5000, but not the functions on localhost:5001.

Any help with this issue would be greatly appreciated.

I was able to use the emulator successfully in the past, but today
the emulator accesses the deployed function location not the localhost location.

  userApi: 'https://us-central1-app-ce059.cloudfunctions.net/api',

The network Request Url from chrome developer tools:

Request URL: https://us-central1-app-ce059.cloudfunctions.net/api/users

If I change the url to the local location in the code then the local functions are accessed.

  userApi: 'http://localhost:5001/app-ce059/us-central1/api',

This is the output

$ firebase --version
8.16.2
$ 

$ firebase emulators:start
i  emulators: Starting emulators: functions, firestore, hosting

✔  functions[api]: http function initialized (http://localhost:5001/app-ce059/us-central1/api).

│ ✔  All emulators ready! View status and logs at localhost:4000 │
└────────────────────────────────────────────────────────────────┘

┌───────────┬────────────────┬──────────────────────────┐
│ Emulator  │ Host:Port      │ View in Emulator UI      │
├───────────┼────────────────┼──────────────────────────┤
│ Functions │ localhost:5001 │ localhost:4000/functions │
├───────────┼────────────────┼──────────────────────────┤
│ Firestore │ localhost:8080 │ localhost:4000/firestore │
├───────────┼────────────────┼──────────────────────────┤
│ Hosting   │ localhost:5000 │ n/a                      │
└───────────┴────────────────┴──────────────────────────┘
  Other reserved ports: 4400, 4500

[REQUIRED] Environment info

firebase-tools:
8.13.1

Platform:
Linux on Docker (WSL 2)

[REQUIRED] Test case

I'm trying to accomplish something that has been possible in both the cloud version and the emulator version of Firestore: show filtered parameter on each document of a collection:

Works fine on the cloud version:

Stopped working on local version:

[REQUIRED] Steps to reproduce

Run the emmulator, create a collection and a couple documents, try fo filter by any parameter

[REQUIRED] Expected behavior

Should have the same behavior as the cloud version, and show the filtered parameter

[REQUIRED] Actual behavior

Doesn't

If you run the following code, the document and sub-collection document never appear in the UI. This works for the live database.

const firestore = firebase.firestore();
firestore.settings({ host: 'localhost:8080', ssl: false });

const subCol = `firestore/limitToLast/count`;
const colRef = firebase.firestore().collection(subCol);
colRef.add({ count: 1 });

Hi, I know that is not a best practice to have document with nested object such maps in arrays in maps etc .... but I actually have a nested object in my data structure and with firebase console and emulator gui there is a bug in the visualization.

firebase console

firebase emulator

Because it render well until the 3rd - nest, is it intentional to avoid "really" nested object, or not?

Issue: The emulator suite fails to display data nested under an empty document.

Example data structure:

visibleCollection > {docId} > DATA
invisibleCollection > emptyDoc > invisibleSubCollection > DATA
visibleNestingCollection > nonEmptyDoc > visibleNestedSubCollection > DATA

The first and last will show up in both the Firebase Console and the Firebase Emulator Suite.
The middle one shows up on the Firebase Console but not in the Emulator Suite

MCVE repo for your convenience: https://github.com/Methodician/firestore-emulator-bug-mcve

Back story:
I had been using what may be an unusual way of organizing my data given the constraints of the collection/document/collection/document structure of Firestore. It has been working nicely for me, until I decided to give the new emulator suite a test run (amazing tools at last! No more crappy local testing experience! YAY FIREBASE TEAM!)
I thought something was wrong with my implementation at first but then I saw that the emulators were working. I spent hours trying to suss out what I was doing "wrong" but it turns out I was just doing something "different" so I spent hours figuring out exactly what that was and then creating a simple demonstration repo. I hope it helps, and please fix!

I've configured a local development workspace (based on the VS Code devcontainer feature) where the Firebase Emulators are running inside a container and the code (the dev environment) runs in another. My main container, running the developed apps, can communicate with the emulators, the host machine can access the emulator UI by http://localhost:4000/ so, everything works perfectly with one exception: The logs tab in the Emulators UI shows this error in the console and no logs from the functions emulator:

"WebSocket connection to 'ws://localhost:4500/' failed: Connection closed before receiving a handshake response"

As you can see in the files below all the ports are mapped and exposed, including 4500. I think the problem can be related with some part of the emulator running on 'localhost' instead of '0.0.0.0'. I had similar problems with the emulators not being accessible outside the container and I fixed those by setting "host": "0.0.0.0" in firebase.json for each emulator.
For the problem described above, I can't find any way to set the host to '0.0.0.0'.

The problem is a bit hard to replicate but I have attached the content of my .devcontainer folder that can be used with Remote-Containers VS Code extension. If it throws some errors about missing files or folders just create them empty or remove the corresponding Docker volumes from docker-compose.

.devcontainer.zip

Is the Firestore UI here only limited to adding string values inside collections? I can't seem to pick from the the various datatypes on the production tool. I am guessing adding those is planned for later down the line?

(Last issue for now, I promise)

Cloning currently works for an entire data set, which is a problem for long lists of data because it attempts to read all the data at the location and render it into the clone modal. This freezes for quite awhile with large data sets.

It would be useful to allow cloning with a filtered dataset for easy database restructures. We should also consider only rendering a truncated list to the modal.

https://firebase.google.com/docs/emulator-suite/connect_auth?authuser=0#web

I would like to know where I am saving the SDK in which file so it can work.

firebase.auth().useEmulator('http://localhost:9099/');

export FIREBASE_AUTH_EMULATOR_HOST="localhost:9099"

This code should be written on which page because it's not working where I have initialized FirebaseUI

[REQUIRED] Environment info

firebase-tools: 8.10.0

Platform: macOS

[REQUIRED] Test case

n/a

[REQUIRED] Steps to reproduce

Open Logs tab in Firebase Emulator Suite.

Note: this only started to happen after I started using Firebase logger in Firebase functions.

[REQUIRED] Expected behavior

not crashing

[REQUIRED] Actual behavior

crashing with error:

react-dom.production.min.js:209 TypeError: Cannot read property 'mode' of undefined
    at HighlightedJSON.tsx:174
    at Array.map (<anonymous>)
    at Hr (HighlightedJSON.tsx:95)
    at Qo (react-dom.production.min.js:153)
    at ms (react-dom.production.min.js:261)
    at cu (react-dom.production.min.js:246)
    at su (react-dom.production.min.js:246)
    at Zs (react-dom.production.min.js:239)
    at react-dom.production.min.js:123
    at e.unstable_runWithPriority (scheduler.production.min.js:19)

The main discussion is here: firebase/firebase-tools#2334

REQUIRED] Environment info
firebase-tools:8.6.0

Platform: wsl2 with Ubuntu-18.04

[REQUIRED] Test case
Start emulator firebase emulators:start --only firestore
Navigate to http://127.0.0.1:4000/firestore
Try to write in the database or simply check console

[NOT WORKING SOLUTION]

FYI, the fix for 0.0.0.0 went out with Firebase CLI v8.6.0. Please try that if you see issues with WSL with localhost / 127.0.0.1.

The above solution does not work

Summary:
Firebase emulator is running on wsl2 and we want to open firebase-tools-ui on the host machine.The page is loaded and everything works except the connection to the firestore backend. I use the following configuration:
"emulators": {
"firestore": {
"host": "0.0.0.0", // or host: 'localhost' or host: '127.0.0.1'
"port": "8080"
},
"ui": {
"enabled": true,
"port": 4000
}
}

Workaround:
Change host value to wsl2 ip address.

Screenshots:

Upon trying to start the development server, the compilation fails with the following message:

Failed to compile.

./src/components/Firestore/utils.ts
  Line 70:22:  Parsing error: Expression expected

This is coming from the line:

  return typeof value?.valueOf() === 'boolean';

My typescript is bad, otherwise I'd have PR'ed a fix. This change came from #44.

When applying a field filter to selected collection, the documents' value for the field is not displayed. It would be helpful to see the values alongside the document id (as you do in the normal firestore console environment).

The filter

The collection display

[REQUIRED] Environment info

firebase-tools:
8.4.0

Platform:
macOS 10.15.4

[REQUIRED] Test case

I've found that when having nested collections in Firestore, they don't display on the web interface of the emulator unless parent documents contain data.

[REQUIRED] Steps to reproduce

// create some data in a nested collection without data in the document

db.collection('stripe')
.doc('6tSfMgrOCEOi3kj0IHRivd0ZCgX2')
.collection('subscriptions')
.doc('sub_123456789').set({
    status: "active"
})

[REQUIRED] Expected behavior

On the production version of the data viewer, it displays empty documents in italics (to designate that there is no fields but sub-collections exist). Image below.

[REQUIRED] Actual behavior

There is nothing to display on the UI and I cannot access child collections. If I set some dummy data on a document, the row will appear.

Cloning could allow a user to specify an absolute path for easier database restructuring.

[REQUIRED] Environment info

firebase-tools: 8.4.3

Platform: macOS

[REQUIRED] Test case

I am running the emulator UI locally and connecting my android device to the local emulator UI. I am using following code to connect my firestorm DB from the android device.

val settings = FirebaseFirestoreSettings.Builder()
                .setHost("10.0.2.2:8080")
                .setSslEnabled(false)
                .setPersistenceEnabled(false)
                .build()

firestoreInstance = FirebaseFirestore.getInstance()
firestoreInstance.firestoreSettings = settings

I wanted to test firestore database in my local.

[REQUIRED] Steps to reproduce

1. Start emulator UI
2. Setup firestore setting in android.
3. Add some data to firestore.

[REQUIRED] Expected behavior

The data which is added from device should be visible on firestore emulator UI.
http://localhost:4000/firestore

[REQUIRED] Actual behavior

The data is successfully pushed to the local emulator and got an update on the android device. But the data is not visible firestore emulator UI.
http://localhost:4000/firestore

Workaround:
If we paste firestore URL manually on the browser then we are able to see the data.

As we can see that the document PRWJQ4Sp... is visible now. But it is not shown under users collection.

[REQUIRED] Environment info

firebase-tools: 8.13.1

Platform: macOs

[REQUIRED] Test case

https://github.com/BernieSumption/firebase-emulator-bug-report

[REQUIRED] Steps to reproduce

If you log an object containing an empty array and then view the log line in the emulator log view, the view crashes. For example this line:

functions.logger.info("Importing property", {empty: []});

See https://github.com/BernieSumption/firebase-emulator-bug-report/blob/master/README.md for step by step instructions to run the sample project.

[REQUIRED] Expected behavior

The log UI should be able to display any valid JSON payload.

[REQUIRED] Actual behavior

Log UI crashes - whole UI vanishes and screen becomes empty.

Failed to compile
./src/index.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/index.scss)
SassError: Can't find stylesheet to import.
╷
24 │ @.use "@material/theme/mixins";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules@material\card_variables.scss 24:1 @.forward
node_modules@material\card_index.scss 1:1 @.use
src\components\common_material-overrides.scss 18:1 @.import
C:\Users$USER$\firebase-tools-ui\src\index.scss 24:9 root stylesheet

npm start failed due Compilation error

When I add a new user in the newly released firebase auth emulator, and then shut down the emulator, started with command:

firebase emulators:start --export-on-exit --import em-data

the users are not retained when I restart the emulators, while firestore and RTDB are.

This bug was found when resolving the pull request #258, which encodes and decodes collection and document ids, in order to handle special characters.

The situation is that when an URI has the character '%', it is correctly encoded, but the React library 'history' automatically decodes only the character '%' and pushes this path to the HTML5 history element. This is a known issue of the library that can be found here.

Because of this automatic decode issue, the moment the partially encoded URI is tried to be decoded on our code, an error occurs due to malformed URI.

Browser: Google Chrome (Also tested firefox/edge)
Browser version: Version 86.0.4240.75 (Official Build) (64-bit)
Operating system: Windows 10 Pro Version 2004
Running WSL2 with Ubuntu 20.04
uname -r : 4.19.128-microsoft-standard
Operating system version:

What steps will reproduce the problem:
Following along with the Google Codelab for Emulators
https://developers.google.com/codelabs/firebase-emulator-get-started#2

1. I follow the through step 3 (no issues yet)
2. On step 4 I run firebase emulators: start

What is the expected result?
I should be able to login web UI via localhost:4000

What happens instead of that?
The emulators seems to start ok

tom-linux@DESKTOP:~/emulators-codelab/codelab-initial-state$ firebase emulators:start
i  emulators: Starting emulators: functions, firestore, hosting
⚠  functions: The following emulators are not running, calls to these services from the Functions emulator will affect production: auth, database, pubsub
⚠  Your requested "node" version "8" doesn't match your global version "12"
i  firestore: Firestore Emulator logging to firestore-debug.log
i  hosting: Serving hosting files from: public
✔  hosting: Local server: http://localhost:5000
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "/home/tom-linux/emulators-codelab/codelab-initial-state/functions" for Cloud Functions...
✔  functions[calculateCart]: firestore function initialized.

┌───────────────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! View status and logs at http://localhost:4000 │
└───────────────────────────────────────────────────────────────────────┘

┌───────────┬────────────────┬─────────────────────────────────┐
│ Emulator  │ Host:Port      │ View in Emulator UI             │
├───────────┼────────────────┼─────────────────────────────────┤
│ Functions │ localhost:5001 │ http://localhost:4000/functions │
├───────────┼────────────────┼─────────────────────────────────┤
│ Firestore │ localhost:8080 │ http://localhost:4000/firestore │
├───────────┼────────────────┼─────────────────────────────────┤
│ Hosting   │ localhost:5000 │ n/a                             │
└───────────┴────────────────┴─────────────────────────────────┘
  Other reserved ports: 4400, 4500

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

However I can't access the UI via any web browser
I get Error: ERR_CONNECTION_RESET

At first this seems very similar to:
#332

However users in that thread were able to
1.) Access the UI using the linux host IP address in place of local host
2.) Had a successful work-around using: microsoft/WSL#5706 (comment)
That leads to running a custom script here: #4150 (comment)
After adding additional ports: 22,80,443,8080,10000,3000,4000,5000,5001,8081,8082,4200,3128,4400,4500

However both of the above workarounds do not work with my setup.

Additional Debug Logs
firebase-debug.log
firestore-debug.log
ui-debug.log

Hi

Trying to add new data after deleting. This is more of an FYI & feedback.
-- This is from the Chrome console.

api.tsx:51 Uncaught (in promise) Error: .set() on an existing document would delete other fields
    at api.tsx:51
    at c (runtime.js:63)
    at Generator._invoke (runtime.js:293)
    at Generator.next (runtime.js:118)
    at r (asyncToGenerator.js:3)
    at s (asyncToGenerator.js:25)

Restarting the server did not help.

Brad.

firebase-debug.log
firestore-debug.log
ui-debug.log
database-debug.log

Environment info

firebase-tools:

8.7.0

Platform:

macOS

Test case

Tried to set the timezone of emulator using TZ=UTC as referenced here so that Firestore timestamps would be in UTC format.

Steps to reproduce

Run TZ=UTC firebase emulators:start
Open http://localhost:4000/firestore on Safari or Chrome
Add a collection and put document with the field of type timestamp

Expected behaviour

Time zone would be shown as UTC

Actual behavior

Firestore shows machines timezone (which is New Zealand as a shown in the screenshot)

Upon trying to run:

firebase emulators:exec --project sample --only database,firestore 'npm start'

I get:

...
i  Running script: npm start

> [email protected] start /mnt/c/Users/varunarora/Code/firebaseui/firebase-tools-ui
> react-scripts start

Please specify these environment variables: GCLOUD_PROJECT FIREBASE_EMULATOR_HUB
(Are you using firebase-tools@>=7.14.0 with `--project your-project`?)

I just installed firebase-tools, so got version 7.15.0. Do I need to install a lower version?

I tried to export the env vars to values EMULATOR_HUB_ENV="FIREBASE_EMULATOR_HUB" and GCLOUD_PROJECT="sample" to no avail (unless there is a fancier node way to set these variables so they are picked up by react-scripts start).

This UI is just so incredibly helpful to my workflow—can't thank you enough for putting it together.

One thing I'm curious about is whether there's an easier/more convenient way to launch the UI from within existing firebase projects (e.g. one that doesn't require me to open a new terminal tab, and copy/paste/remember the snippet to launch).

For instance, here's what I personally picture the ideal setup looking like:

Some existing project folder, containing a package.json with:

{
  "scripts": {
    "start": "app-cli-service start",
    "poststart": "firebase-tools-ui start"
  },
  "devDependencies": {
    "firebase-tools-ui": "^0.0.0"
  }
}

where the firebase-tools-ui start script essentially runs the equivalent of:

cd node_modules/firebase-tools-ui/
GCLOUD_PROJECT=<project-id> FIREBASE_EMULATOR_HUB=localhost:4400 npm start

This way, I can just add this repo as an npm package, and amend my scripts to launch the UI automatically (ideally without even having to configure the project-id).

I am totally willing to try and tackle this with a PR, but I just wanted to check that I'm not missing something (like maybe this is possible already somehow), or that this isn't fundamentally impossible for some reason or another.

Thoughts?

Steps to reproduce:

1. In Firestore Emulator GUI
2. Add a number field to a document
3. enter 1.2 -- so far so good
4. enter 1.23 -- error: "must be a number"

Note: all x.y work, all x.yz fail

Platform: macOS
CLI version: 8.13.1

Here's my firebase.json:

{
  "emulators": {
    "database": {
      "host": "0.0.0.0",
      "port": 9001
    },
    "firestore": {
      "host": "0.0.0.0",
      "port": 9002
    },
    "functions": {
      "host": "0.0.0.0",
      "port": 9003
    },
    "ui": {
      "enabled": true
    }
  }
}

Here's what I see in the RTDB UI:

In the UI I see 404s and also this error:

io-6de156f3.js:111 TypeError: Cannot read property 'hostAndPort' of undefined
    at sagas.ts:129
    at c (runtime.js:63)
    at Generator._invoke (runtime.js:293)
    at Generator.next (runtime.js:118)
    at p (redux-saga-core.esm.js:1157)
    at u (redux-saga-core.esm.js:1251)
    at k.<computed> (redux-saga-core.esm.js:731)
    at redux-saga-core.esm.js:1203
    at v (redux-saga-core.esm.js:1271)
    at p (redux-saga-core.esm.js:1161)
g @ io-6de156f3.js:111

In the Firestore UI it appears to be working but I see these errors in the Chrome dev console:

Previously this has worked fine but most recently when trying to import a JSON export of my realtime database from firebase into the firebase emulator I get an import error.

Looks like it is some sort of permission error but I do not know why as previously this worked fine for me?

problem
Sometimes when I accidentally log bigger objects somewhere in the code of a cloud function (or it has unsafe circular dependencies or something...) - e.g. like here with logger.info({ req, resp }, test); it causes that the log viewer of firebase emulator (http://localhost:4000/logs) ends in a broken state with a blank screen with this message in the browser's console:

react-dom.production.min.js:209 TypeError: Cannot read property 'mode' of undefined
    at HighlightedJSON.tsx:131
    at Array.map (<anonymous>)
    at Hr (HighlightedJSON.tsx:95)
    at Qo (react-dom.production.min.js:153)
    at ms (react-dom.production.min.js:261)
    at cu (react-dom.production.min.js:246)
    at su (react-dom.production.min.js:246)
    at Zs (react-dom.production.min.js:239)
    at react-dom.production.min.js:123
    at e.unstable_runWithPriority (scheduler.production.min.js:19)

possible solution
I would appreciate seeing something more informative - the last thing that it tried to log to the UI (that caused the crash so I can remove it) or just fix of UI because this message is displayed correctly in the terminal (it just has like 50+ rows so it is completely unreadable :-) ) and I also see following logger.info() messages under it...

might help - https://www.npmjs.com/package/safe-json-stringify ?

[REQUIRED] Environment info

firebase-tools: 8.16.2

Platform:

[REQUIRED] Test case

I can't make one right now.

[REQUIRED] Steps to reproduce

1. Emulate a project which uses Realtime Database
2. Have at least 2 items under same parent, one that have children and other that doesn't
3. They aren't properly aligned, made me think that one was a child of the other.

[REQUIRED] Expected behavior

Proper alignment

[REQUIRED] Actual behavior

lU seems to be a child of l because it's not properly aligned.
Opening l, looks worse.

Happened on Firefox, Ubuntu.

If you start the UI, open the database tab, CTRL-C the CLI, then open the same tab, everything gets pushed waaay down

I created a user like this:

  const user = await admin.auth().createUser({
    uid: "uid" + new Date().getTime(),
    displayName: "Sam User"
  });

And then when I load the emulator UI it complains about map of undefined

I think it's this bit:

      <div className={styles.iconWrapper}>
        {user.providerUserInfo.map(
          providerInfo =>
            providerToIconMap[providerInfo.providerId] && (
              <Icon
                icon={providerToIconMap[providerInfo.providerId]}
                key={providerInfo.providerId}
                aria-label={providerInfo.providerId}
              />
            )
        )}