onSnapshot Not working

[SamJbori]

Operating System

Windows 11 WSL2 Ubuntu 24

Browser Version

Version 125.0.6422.113 (Official Build) (64-bit) / Edge Version 125.0.2535.67 (Official build) (64-bit)

Firebase SDK Version

10.12.2

Firebase SDK Product:

Firestore

Describe your project's tooling

Using NextJS CSR

Describe the problem

onSnapshot doesn't work, I've tried several other clientside and server side document read and it worked for the exact same query

Steps and code to reproduce issue

I was able to replicate the issue and upload it to github
GitHub Repo

[dconeybe]

Hi @SamJbori. Thanks for reporting the issue and providing a sample app. I'll take a look next week. In the meantime, could you elaborate on what you mean by "doesn't work"? Do you mean that your callback never gets called? Did it ever work (e.g. on a previous version of Firestore)? Can you enable debug logging by calling setLogLevel('debug'), reproduce, and attach the logs? Thank you.

[SamJbori]

Hi @SamJbori. Thanks for reporting the issue and providing a sample app. I'll take a look next week. In the meantime, could you elaborate on what you mean by "doesn't work"? Do you mean that your callback never gets called? Did it ever work (e.g. on a previous version of Firestore)? Can you enable debug logging by calling setLogLevel('debug'), reproduce, and attach the logs? Thank you.

Hi @dconeybe , thank you for the prompt response, it just doesn't work, it's a new app, no error, the console.log code inside 1 in 10 times with 0 on the querySnapshot count, I turned on verbose logging and got this errorthe following errors

10.12.2
A 'cache-control' header is missing or empty.

I also tried several versions and I got

10.6.0

page.tsx:11 [2024-06-01T12:50:47.354Z]  @firebase/firestore: Firestore (10.6.0): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=permission-denied]: Permission denied: Consumer 'project:undefined' has been suspended.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

10.12.1
console.js:273 [2024-06-01T12:46:31.980Z] @firebase/firestore: Firestore (10.12.1): WebChannelConnection RPC 'Listen' stream 0x60813c27 transport errored: jd {type: 'c', target: Y, g: Y, defaultPrevented: false, status: 1}

[dconeybe]

Thanks for the log snippets. Those are helpful. This could be related to #8281, which I'm also investigating.

Would you be able to provide the full logs for those 3 scenarios? It can be really helpful to see the context and the events that occurred leading up to the error. Providing the logs for all 3 versions is great because it helps see what, if anything, changed. The best way to share the logs would be to create gists at https://gist.github.com/ and share the links here. Thank you.

[SamJbori]

Thanks for the log snippets. Those are helpful. This could be related to #8281, which I'm also investigating.

Would you be able to provide the full logs for those 3 scenarios? It can be really helpful to see the context and the events that occurred leading up to the error. Providing the logs for all 3 versions is great because it helps see what, if anything, changed. The best way to share the logs would be to create gists at https://gist.github.com/ and share the links here. Thank you.

My debugging skills aren't exactly sharp, I tried several tools and turning knobs on and off and I got nothing more than what I shared plus this in the vscode debugger

Logs

Edit
In the button case I am getting the object correctly in the server console, in the other case I am getting the correct object in the browser console

[dconeybe]

Hmm, those logs aren't what I'm looking for. I'll try your app next week and if I can reproduce then I won't need logs from you anyway.

[dconeybe]

Hi @SamJbori

I looked at your sample app and I think I found the problem here:

https://github.com/SamJbori/testsnap/blob/0a1ad229da8dd6c22341f78847949227650f314c/src/app/lib/firebase.ts#L4-L11

export const firebaseConfig: FirebaseOptions = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  projectId: process.env.PROJECT_ID,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSIGING_SENSOR_ID,
  appId: process.env.APP_ID,
};

The problem is that process.env is provided by the node.js runtime; however, it is NOT available in the browser. So when you run the application values like process.env.PROJECT_ID evaluate to undefined. That's why you see the error "Consumer 'project:undefined' has been suspended." (obviously, your project is not called "undefined").

Please try replacing process.env.XXXX with the literal values, like this:

// NOTE: The values below are bogus, and are just for illustration purposes
export const firebaseConfig: FirebaseOptions = {
  apiKey: "zuoIavtkDy0eHICBmfSa7BSA-A2Xk5AlCq-cxzB",
  authDomain: "myproject.firebaseapp.com",
  projectId: "myproject",
  storageBucket: "myproject.appspot.com",
  messagingSenderId: "461764313688",
  appId: "1:686136438661:web:5263fd2cf3df5a1868280e"
};

[jbalidiong]

Just to add from the initial investigation of @dconeybe. You can prefix the variables using NEXT_PUBLIC_ to expose them on the browser. This was introduce on version 9.4.0, if you're using older version of nextjs you have to update the next.config.js with the following code snippet:

const nextConfig = {
    env:{
        FIREBASE_API_KEY: process.env.FIREBASE_API_KEY,
        AUTH_DOMAIN: process.env.AUTH_DOMAIN,
        PROJECT_ID: process.env.PROJECT_ID,
        STORAGE_BUCKET: process.env.STORAGE_BUCKET,
        MESSAGING_SENDER_ID: process.env.MESSAGING_SENDER_ID,
        APP_ID: process.env.APP_ID
    }
};

[SamJbori]

Just to add from the initial investigation of @dconeybe. You can prefix the variables using NEXT_PUBLIC_ to expose them on the browser. This was introduce on version 9.4.0, if you're using older version of nextjs you have to update the next.config.js with the following code snippet:

const nextConfig = {
    env:{
        FIREBASE_API_KEY: process.env.FIREBASE_API_KEY,
        AUTH_DOMAIN: process.env.AUTH_DOMAIN,
        PROJECT_ID: process.env.PROJECT_ID,
        STORAGE_BUCKET: process.env.STORAGE_BUCKET,
        MESSAGING_SENDER_ID: process.env.MESSAGING_SENDER_ID,
        APP_ID: process.env.APP_ID
    }
};

But won't this expose my credentials to the client device?