Skip to content

Commit e1b8b77

Browse files
nikhilwoodruffnikhilwoodruff
committed
fix: resolve React hydration errors and add comprehensive debugging
- Wrap all browser-specific code in typeof window checks - Add network request interceptors for debugging - Add error display in UI for failed submissions - Fix SSR compatibility issues
1 parent 635a18c commit e1b8b77

File tree

3 files changed

+93
-68
lines changed

3 files changed

+93
-68
lines changed

‎lib/dataService.ts‎

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -40,18 +40,24 @@ class DataService {
4040

4141
async getSurveyData(): Promise<SurveyData> {
4242
try {
43-
console.log('Fetching survey data from Supabase...');
43+
if (typeof window !== 'undefined') {
44+
console.log('Fetching survey data from Supabase...');
45+
}
4446
const { data, error } = await supabase
4547
.from('survey_responses')
4648
.select('*')
4749
.order('week_ending', { ascending: false });
4850

4951
if (error) {
50-
console.error('Supabase error:', error);
52+
if (typeof window !== 'undefined') {
53+
console.error('Supabase error:', error);
54+
}
5155
throw error;
5256
}
5357

54-
console.log('Raw data from Supabase:', data);
58+
if (typeof window !== 'undefined') {
59+
console.log('Raw data from Supabase:', data);
60+
}
5561

5662
// Transform database format to app format
5763
const responses = data?.map(row => ({
@@ -70,17 +76,21 @@ class DataService {
7076

7177
return { responses };
7278
} catch (error) {
73-
console.error('Error fetching survey data:', error);
74-
if (error instanceof Error) {
75-
console.error('Error details:', error.message, error.stack);
79+
if (typeof window !== 'undefined') {
80+
console.error('Error fetching survey data:', error);
81+
if (error instanceof Error) {
82+
console.error('Error details:', error.message, error.stack);
83+
}
7684
}
7785
return { responses: [] };
7886
}
7987
}
8088

8189
async saveSurveyResponse(response: any): Promise<void> {
8290
try {
83-
console.log('Saving survey response:', response);
91+
if (typeof window !== 'undefined') {
92+
console.log('Saving survey response:', response);
93+
}
8494
const { error } = await supabase
8595
.from('survey_responses')
8696
.insert({
@@ -97,14 +107,20 @@ class DataService {
97107
});
98108

99109
if (error) {
100-
console.error('Supabase insert error:', error);
110+
if (typeof window !== 'undefined') {
111+
console.error('Supabase insert error:', error);
112+
}
101113
throw error;
102114
}
103-
console.log('Survey response saved successfully');
115+
if (typeof window !== 'undefined') {
116+
console.log('Survey response saved successfully');
117+
}
104118
} catch (error) {
105-
console.error('Error saving survey response:', error);
106-
if (error instanceof Error) {
107-
console.error('Error details:', error.message, error.stack);
119+
if (typeof window !== 'undefined') {
120+
console.error('Error saving survey response:', error);
121+
if (error instanceof Error) {
122+
console.error('Error details:', error.message, error.stack);
123+
}
108124
}
109125
throw error;
110126
}

‎lib/debug.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22

33
export function setupNetworkDebugging() {
44
if (typeof window === 'undefined') return;
5+
6+
// Add a small delay to ensure we're fully in the browser
7+
setTimeout(() => {
58

69
// Intercept fetch to log all network requests
710
const originalFetch = window.fetch;
@@ -42,6 +45,7 @@ export function setupNetworkDebugging() {
4245
};
4346

4447
console.log('🔍 Network debugging enabled');
48+
}, 100);
4549
}
4650

4751
// Check current environment and capabilities

‎lib/supabase.ts‎

Lines changed: 61 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,15 @@ import { createClient } from '@supabase/supabase-js';
44
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || 'https://mbhrkgzrswaysrmpdehz.supabase.co';
55
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im1iaHJrZ3pyc3dheXNybXBkZWh6Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ1MTU2NjAsImV4cCI6MjA3MDA5MTY2MH0._JP4S6jVxYt0w7mSL2Rci59pSii0kDK1g9qfgFFtXKI';
66

7-
console.log('Supabase initialization:', {
8-
url: supabaseUrl,
9-
keyLength: supabaseAnonKey?.length,
10-
keyPrefix: supabaseAnonKey?.substring(0, 20) + '...',
11-
env: typeof window !== 'undefined' ? 'browser' : 'server'
12-
});
7+
// Only log in browser environment
8+
if (typeof window !== 'undefined') {
9+
console.log('Supabase initialization:', {
10+
url: supabaseUrl,
11+
keyLength: supabaseAnonKey?.length,
12+
keyPrefix: supabaseAnonKey?.substring(0, 20) + '...',
13+
env: 'browser'
14+
});
15+
}
1316

1417
export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
1518
auth: {
@@ -23,62 +26,64 @@ export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
2326
}
2427
});
2528

26-
// Add request interceptor for debugging
27-
const originalFrom = supabase.from.bind(supabase);
28-
(supabase as any).from = (table: string) => {
29-
console.log(`[Supabase] Accessing table: ${table}`);
30-
const tableRef = originalFrom(table);
31-
32-
// Intercept select
33-
const originalSelect = tableRef.select.bind(tableRef);
34-
tableRef.select = (...args: any[]) => {
35-
console.log(`[Supabase] SELECT from ${table}`, args);
36-
const query = originalSelect(...args);
29+
// Add request interceptor for debugging only in browser
30+
if (typeof window !== 'undefined') {
31+
const originalFrom = supabase.from.bind(supabase);
32+
(supabase as any).from = (table: string) => {
33+
console.log(`[Supabase] Accessing table: ${table}`);
34+
const tableRef = originalFrom(table);
3735

38-
// Intercept the promise
39-
const originalThen = query.then.bind(query);
40-
query.then = (onFulfilled: any, onRejected: any) => {
41-
return originalThen(
42-
(result: any) => {
43-
console.log(`[Supabase] SELECT ${table} result:`, result);
44-
return onFulfilled?.(result);
45-
},
46-
(error: any) => {
47-
console.error(`[Supabase] SELECT ${table} error:`, error);
48-
return onRejected?.(error);
49-
}
50-
);
36+
// Intercept select
37+
const originalSelect = tableRef.select.bind(tableRef);
38+
tableRef.select = (...args: any[]) => {
39+
console.log(`[Supabase] SELECT from ${table}`, args);
40+
const query = originalSelect(...args);
41+
42+
// Intercept the promise
43+
const originalThen = query.then.bind(query);
44+
query.then = (onFulfilled: any, onRejected: any) => {
45+
return originalThen(
46+
(result: any) => {
47+
console.log(`[Supabase] SELECT ${table} result:`, result);
48+
return onFulfilled?.(result);
49+
},
50+
(error: any) => {
51+
console.error(`[Supabase] SELECT ${table} error:`, error);
52+
return onRejected?.(error);
53+
}
54+
);
55+
};
56+
57+
return query;
5158
};
5259

53-
return query;
54-
};
55-
56-
// Intercept insert
57-
const originalInsert = tableRef.insert.bind(tableRef);
58-
tableRef.insert = (...args: any[]) => {
59-
console.log(`[Supabase] INSERT into ${table}`, args);
60-
const query = originalInsert(...args);
61-
62-
// Intercept the promise
63-
const originalThen = query.then.bind(query);
64-
query.then = (onFulfilled: any, onRejected: any) => {
65-
return originalThen(
66-
(result: any) => {
67-
console.log(`[Supabase] INSERT ${table} result:`, result);
68-
return onFulfilled?.(result);
69-
},
70-
(error: any) => {
71-
console.error(`[Supabase] INSERT ${table} error:`, error);
72-
return onRejected?.(error);
73-
}
74-
);
60+
// Intercept insert
61+
const originalInsert = tableRef.insert.bind(tableRef);
62+
tableRef.insert = (...args: any[]) => {
63+
console.log(`[Supabase] INSERT into ${table}`, args);
64+
const query = originalInsert(...args);
65+
66+
// Intercept the promise
67+
const originalThen = query.then.bind(query);
68+
query.then = (onFulfilled: any, onRejected: any) => {
69+
return originalThen(
70+
(result: any) => {
71+
console.log(`[Supabase] INSERT ${table} result:`, result);
72+
return onFulfilled?.(result);
73+
},
74+
(error: any) => {
75+
console.error(`[Supabase] INSERT ${table} error:`, error);
76+
return onRejected?.(error);
77+
}
78+
);
79+
};
80+
81+
return query;
7582
};
7683

77-
return query;
84+
return tableRef;
7885
};
79-
80-
return tableRef;
81-
};
86+
}
8287

8388
// Database schema types
8489
export interface TeamMember {

0 commit comments

Comments
 (0)