Bug report

Describe the bug

In the network tab the websocket message comes in. But the event handler does not work properly. Sometimes it works and sometimes the listener won’t get called.

To Reproduce

It’s very hard to reproduce and I don’t know how to debug it because it only appears sometimes. I can’t descibe it properly. My code is this:

useEffect(() => {
    if (!selectedProfile) {
      return () => {};
    }
    const todayMinus15Days = new Date();
    todayMinus15Days.setDate(todayMinus15Days.getDate() - 15);

    supabase
      .from<{ count: number; user_id: string }>('counts')
      .select('count')
      .eq('user_id', selectedProfile!)
      .then(({ data }) => {
        const counts = data ?? [];
        if (counts.length === 1) {
          const first = counts[0].count;
          setCount(first);
        } else {
          supabase
            .from('counts')
            .insert({ count: 0, user_id: selectedProfile })
            .then();
        }
      });

    supabase
      .from('rules')
      .select()
      .eq('user_id', selectedProfile)
      .order('points')
      .then(({ data }) => setRules(data ?? []));

    supabase
      .from('events')
      .select()
      .order('created_at', { ascending: false })
      .eq('user_id', selectedProfile)
      .gt('created_at', todayMinus15Days.toISOString())
      .then(({ data }) => setEvents(data ?? []));

    supabase
      .from('profiles')
      .select()
      .then(({ data }) =>
        setProfiles((data ?? []).filter((p) => !!p.first_name)),
      );

    const updateSubscription = supabase
      .from('*')
      .on('INSERT', (payload) => {
        if (payload.new.user_id !== selectedProfile) {
          return;
        }
        switch (payload.table) {
          case 'rules': {
            setRules((rules) => [...rules, payload.new]);
            break;
          }
          case 'events': {
            setEvents((events) => {
              const newEvents = [...events, payload.new];
              newEvents.sort(
                (a, b) =>
                  new Date(b.created_at).getTime() -
                  new Date(a.created_at).getTime(),
              );
              return newEvents;
            });
            break;
          }
          case 'counts': {
            setCount(payload.new.count);
            break;
          }
        }
      })
      .on('DELETE', (payload) => {
        switch (payload.table) {
          case 'rules': {
            setRules((rules) =>
              rules.filter((rule) => rule.id !== payload.old.id),
            );
            break;
          }
          case 'events': {
            setEvents((events) =>
              events.filter((event) => event.id !== payload.old.id),
            );
            break;
          }
        }
      })
      .on('UPDATE', (payload) => {
        if (payload.new.user_id !== selectedProfile) {
          return;
        }
        switch (payload.table) {
          case 'rules': {
            setRules((rules) => {
              const idx = rules.findIndex((rule) => rule.id === payload.old.id);
              const newRules = [...rules];
              newRules[idx] = payload.new;
              return newRules;
            });
            break;
          }
          case 'events': {
            setEvents((events) => {
              const idx = events.findIndex(
                (event) => event.id === payload.old.id,
              );
              const newEvents = [...rules];
              newEvents[idx] = payload.new;
              return newEvents;
            });
            break;
          }
          case 'counts': {
            setCount(payload.new.count);
            break;
          }
        }
      })
      .subscribe();

    return () => {
      updateSubscription.unsubscribe();
    };
  }, [selectedProfile]);

Expected behavior

It should work always…

System information

• OS: Android; Windows
• Browser (if applies) chrome
• Version of supabase-js: 1.29.2
• Version of Node.js: 16