WebChannelConnection RPC 'Listen' stream 0x374c4bf1 transport errored: #8695
Description
Operating System
Windows 11
Environment (if applicable)
Nextjs
Firebase SDK Version
11.1.0
Firebase SDK Product(s)
Firestore
Project Tooling
build with nextjs in windows 11 and tested in local
Detailed Problem Description
I was trying to make onSnapshot, but when try to load or refresh the page , its getting error look at the screenshot, it load but it takes a lot of time
Steps and code to reproduce issue
my user context is here most setup was the same in the docs
{
"use client"
import React, { createContext, useContext, useEffect, useState } from 'react';
import { db } from '@/lib/firebase';
import { collection,query,orderBy,onSnapshot } from 'firebase/firestore';
import { User,signOut } from 'firebase/auth';
import { auth } from '@/lib/firebase';
type UserContextType = {
user: User | null;
loading: boolean;
};
const UserContext = createContext<UserContextType>({ user: null, loading: true });
export const UserProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [user, setUser] = useState<User | null>(null);
const [loading, setLoading] = useState(true);
const [list_ingested, setListIngested] = useState([])
useEffect(( ) => {
if (user){
let unsubscribe2;
// this will query users data
const q2 = query(
collection(db, "ingested-content")
); //
// this is onsnapshow to get the users project and filtered
unsubscribe2 = onSnapshot(q2,(querySnapshot) => {
var ingested_content: any = querySnapshot.docs.map(doc => ({ ...doc.data(), id: doc.id}));
setListIngested(ingested_content);
console.log("ingested_content",ingested_content)
});
return unsubscribe2 }
}, [user])
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged((firebaseUser) => {
setUser(firebaseUser);
setLoading(false);
});
return () => unsubscribe();
}, []);
const logOut = async () => {
await signOut(auth).then(() => {
console.log("logout done")
setUser(null)
// router.push("/login/user")
// ...
})
.catch((error) => {
});;
return "logout"
};
return (
<UserContext.Provider value={{
user,
loading,
logOut,
list_ingested }}>
{children}
</UserContext.Provider>
);
};
export const useUser = () => useContext(UserContext);
}