How to Debug Real-Time Not Working in Supabase

1-- Check which tables are in the realtime publication
2SELECT * FROM pg_publication_tables
3WHERE pubname = 'supabase_realtime';
4
5-- Add your table to the publication
6ALTER PUBLICATION supabase_realtime ADD TABLE messages;
7
8-- You can also add multiple tables at once
9ALTER PUBLICATION supabase_realtime ADD TABLE messages, comments, notifications;

1-- View all RLS policies on your table
2SELECT policyname, cmd, qual, with_check
3FROM pg_policies
4WHERE tablename = 'messages';
5
6-- Create a SELECT policy for authenticated users
7CREATE POLICY "Users can read their own messages"
8ON messages FOR SELECT
9TO authenticated
10USING ((SELECT auth.uid()) = user_id);
11
12-- Or allow all authenticated users to read all messages
13CREATE POLICY "Authenticated users can read all messages"
14ON messages FOR SELECT
15TO authenticated
16USING (true);

1-- Grant SELECT to the supabase_realtime role
2GRANT SELECT ON messages TO supabase_realtime;
3
4-- Verify existing grants
5SELECT grantee, privilege_type
6FROM information_schema.role_table_grants
7WHERE table_name = 'messages';

1import { createClient } from '@supabase/supabase-js';
2
3const supabase = createClient(
4  process.env.NEXT_PUBLIC_SUPABASE_URL!,
5  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
6);
7
8// Subscribe to all changes on the messages table
9const channel = supabase
10  .channel('messages-changes')
11  .on(
12    'postgres_changes',
13    { event: '*', schema: 'public', table: 'messages' },
14    (payload) => {
15      console.log('Change received:', payload);
16    }
17  )
18  .subscribe((status) => {
19    console.log('Subscription status:', status);
20    // Should log: SUBSCRIBED
21  });

1// Option 1: Use Web Worker for heartbeats (prevents background throttling)
2const supabase = createClient(
3  process.env.NEXT_PUBLIC_SUPABASE_URL!,
4  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
5  {
6    realtime: {
7      worker: true,
8    },
9  }
10);
11
12// Option 2: Refetch data when tab becomes visible again
13document.addEventListener('visibilitychange', () => {
14  if (document.visibilityState === 'visible') {
15    // Refetch latest data to catch up on missed events
16    fetchMessages();
17  }
18});

1// In a React useEffect cleanup
2import { useEffect } from 'react';
3
4useEffect(() => {
5  const channel = supabase
6    .channel('messages-changes')
7    .on('postgres_changes',
8      { event: '*', schema: 'public', table: 'messages' },
9      (payload) => handleChange(payload)
10    )
11    .subscribe();
12
13  // Cleanup on unmount
14  return () => {
15    supabase.removeChannel(channel);
16  };
17}, []);