Firestore (11.6.0): WebChannelConnection RPC 'Listen' stream 0x551b422c transport errored

[aramis-it]

Operating System

windows 11 nodejs 22 and also firebase studio

Environment (if applicable)

nextjs 15

Firebase SDK Version

11.6.0

Firebase SDK Product(s)

Firestore

Project Tooling

nextjs cli, npm, vscode

Detailed Problem Description

I just trying basic example.
// src/lib/firebase.ts

import { getFirestore } from 'firebase/firestore';
import app from '../lib/firebaseApp'; // It is exactly from firebase project settings config

const firestore = getFirestore(app);

export { firestore }

'use client';

import { useState, useEffect } from 'react';
import {
  collection,
  addDoc,
  doc,
  deleteDoc,
  updateDoc,
  onSnapshot,
  query,
  orderBy,
} from 'firebase/firestore';
// import {useCollectionData} from 'react-firebase-hooks/firestore';
import { firestore } from '@/lib/firebase';
// import { suggestTaskName } from '@/ai/flows/suggest-task-name';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { CheckCircle, Circle, Trash } from 'lucide-react';
import { toast } from "sonner"
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';

interface Task {
  id: string;
  title: string;
  completed: boolean;
  createdAt: number;
}

export default function Home() {
  const [newTaskTitle, setNewTaskTitle] = useState('');
  const [suggestedTaskName, setSuggestedTaskName] = useState('');
  const [tasks, setTasks] = useState<Task[]>([]);

  useEffect(() => {
    const fetchTasks = async () => {
      if (!firestore) return;

      const taskCollection = collection(firestore, 'tasks');
      const taskQuery = query(taskCollection, orderBy('createdAt', 'desc'));

      const unsubscribe = onSnapshot(taskQuery, (snapshot) => {
        const fetchedTasks = snapshot.docs.map((doc) => ({
          id: doc.id,
          title: doc.data().title,
          completed: doc.data().completed,
          createdAt: doc.data().createdAt,
        })) as Task[];
        setTasks(fetchedTasks);
      });

      return () => unsubscribe();
    };

    fetchTasks();
  }, []);

  const handleAddTask = async () => {
    if (newTaskTitle.trim() === '') return;

    try {
      if (!firestore) return;
      const taskCollection = collection(firestore, 'tasks');
      await addDoc(taskCollection, {
        title: newTaskTitle,
        completed: false,
        createdAt: Date.now(),
      });
      setNewTaskTitle('');
      setSuggestedTaskName('');
      toast('Task added successfully!');
    } catch (error: any) {
      toast("Event has been created", {
        description: error.message
      });
    }
  };

  const handleDeleteTask = async (id: string) => {
    try {
      if (!firestore) return;
      const taskDoc = doc(firestore, 'tasks', id);
      await deleteDoc(taskDoc);
      toast('Task deleted successfully!');
    } catch (error: any) {
      toast('Error deleting task.', {
        description: error.message
      });
    }
  };

  const handleToggleComplete = async (id: string, completed: boolean) => {
    try {
      if (!firestore) return;
      const taskDoc = doc(firestore, 'tasks', id);
      await updateDoc(taskDoc, { completed: !completed });
      toast(`Task ${completed ? 'marked as incomplete' : 'completed'}!`);
    } catch (error: any) {
      toast('Error updating task.', {
        description: error.message
      });
    }
  };

  return (
    <div className="container mx-auto p-4">
      <Card>
        <CardHeader>
          <CardTitle>TaskTango</CardTitle>
          <CardDescription>Stay organized and get things done.</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex items-center space-x-2 mb-4">
            <Input
              type="text"
              value={newTaskTitle}
              onChange={(e) => setNewTaskTitle(e.target.value)}
              placeholder="Enter task title"
            />
            <Button size="sm" onClick={handleAddTask}>
              Add Task
            </Button>
          </div>
          {suggestedTaskName && (
            <div className="mb-4">
              Suggested Task Name: <strong>{suggestedTaskName}</strong>
            </div>
          )}
          <ul>
            {tasks.map((task) => (
              <li key={task.id} className="flex items-center justify-between py-2 border-b">
                <div className="flex items-center">
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => handleToggleComplete(task.id, task.completed)}
                  >
                    {task.completed ? <CheckCircle className="h-5 w-5 text-green-500" /> : <Circle className="h-5 w-5" />}
                    <span className="sr-only">
                      {task.completed ? 'Mark as incomplete' : 'Mark as complete'}
                    </span>
                  </Button>
                  <span className={task.completed ? 'line-through text-gray-500' : ''}>
                    {task.title}
                  </span>
                </div>
                <AlertDialog>
                  <AlertDialogTrigger asChild>
                    <Button variant="ghost" size="icon">
                      <Trash className="h-4 w-4" />
                      <span className="sr-only">Delete</span>
                    </Button>
                  </AlertDialogTrigger>
                  <AlertDialogContent>
                    <AlertDialogHeader>
                      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
                      <AlertDialogDescription>
                        This action cannot be undone. This will permanently delete the task from
                        our servers.
                      </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                      <AlertDialogCancel>Cancel</AlertDialogCancel>
                      <AlertDialogAction onClick={() => handleDeleteTask(task.id)}>
                        Delete
                      </AlertDialogAction>
                    </AlertDialogFooter>
                  </AlertDialogContent>
                </AlertDialog>
              </li>
            ))}
          </ul>
        </CardContent>
      </Card>
    </div>
  );
}

@firebase/firestore: Firestore (11.6.0): WebChannelConnection RPC 'Listen' stream 0x551b422c transport errored: jd {type: 'c', target: Y, g: Y, defaultPrevented: false, status: 1}

Steps and code to reproduce issue

That messages shows in web console at web start

[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.

[tom-andersen]

I believe this a duplicate of #8889

Please contribute to the other issue.