Firestore (12.0.0): WebChannelConnection RPC 'Listen' stream 0x3719a3e5 transport

[obadahalak]

Operating System

windows 11

Environment (if applicable)

chrome, vue.js

Firebase SDK Version

12.0.0

Firebase SDK Product(s)

Firestore

Project Tooling

I get the following warning when trying to use onSnapshot
@firebase/firestore: Firestore (12.0.0): WebChannelConnection RPC 'Listen' stream 0x3719a3e5 transport errored. Name: undefined Message: undefined

Detailed Problem Description

My code
--firebase.js

export const firebaseApp = initializeApp({
  apiKey: import.meta.env.VITE_FIREBASE_APP_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  databaseURL: import.meta.env.VITE_FIREBASE_DATABASE_URL,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: 'diddeed-application.firebasestorage.app',
  messagingSenderId: '210158493016',
  appId: import.meta.env.VITE_FIREBASE_APP_ID,

})
const db = getFirestore(firebaseApp, '**-default-**db')

--app.vue

  const unsubscribe = onSnapshot(q, querySnapshot => {
    for (const doc of querySnapshot) {
      console.log('doc')
      console.log(doc)
    }
  })

In the network tap, I found this failed request

Steps and code to reproduce issue

.

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[MarkDuckworth]

@obadahalak,

This looks like an error we have seen before when the name of the database used in the SDK does not match the name of the database created on the server.

// For example, your db name is '**-default-**db', as specified in the line below:
const db = getFirestore(firebaseApp, '**-default-**db')

Did you create a database with the exact same name?

I'm assuming **-default-**db is just a placeholder name for this snippet, so check your actual names. LMK if this helps. If not we can look for other solutions.

[obadahalak]

@MarkDuckworth
No, this is just to hide my database name... I use the correct database name in my code.