Skip to content

Commit 01062cd

Browse files
huzaifakarim1huzaifakarim1
committed
🚀 COMPREHENSIVE CLERK ERROR HANDLING FIX
🛠️ FRONTEND CLERK ERROR PROTECTION: - Create ClerkErrorInterceptor to catch "Object Not Found Matching Id" errors at source - Add ClerkSignInErrorBoundary with retry mechanisms and user-friendly fallbacks - Implement ClerkServiceWorkerRegistration for chunk loading error recovery - Add service worker (clerk-sw.js) to handle Clerk.js chunk loading failures 🔧 ERROR RECOVERY MECHANISMS: - Automatic retry system (up to 3 attempts) for sign-in failures - Graceful degradation when Clerk chunks fail to load - Service worker caching of Clerk.js chunks for offline resilience - Clear stale Clerk state on persistent errors 🚨 ENHANCED ERROR HANDLING: - Intercept and handle Clerk SDK errors before they reach Sentry - Convert Clerk internal errors to manageable warnings - Automatic page reload recovery for chunk loading failures - Comprehensive error logging with detailed context ⚡ USER EXPERIENCE IMPROVEMENTS: - Professional error UI for sign-in failures instead of blank screens - Clear user messaging during temporary service disruptions - Automatic recovery without user intervention when possible - Fallback to homepage when max retry attempts reached 🎯 PRODUCTION READINESS: - All components tested and building successfully - TypeScript compilation errors resolved - ESLint warnings addressed - Service worker registered for enhanced reliability ✅ SENTRY INTEGRATION: - Reduced false positive error reports from Clerk SDK - Better error categorization and tagging - Preserved important error tracking while filtering noise - Enhanced debugging context for real issues This comprehensive fix addresses the recurring 'Object Not Found Matching Id:5, MethodName:update, ParamCount:4' errors by implementing multiple layers of error protection, recovery mechanisms, and user experience improvements."
1 parent fd3f5c0 commit 01062cd

6 files changed

Lines changed: 502 additions & 3 deletions

File tree

‎app/layout.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import "./globals.css";
55
import Navbar from "@/components/Navbar";
66
import Footer from "@/components/Footer";
77
import ClientErrorHandlerWrapper from "@/components/ClientErrorHandlerWrapper";
8+
import ClerkErrorInterceptor from "@/components/ClerkErrorInterceptor";
9+
import ClerkServiceWorkerRegistration from "@/components/ClerkServiceWorkerRegistration";
810

911
export const metadata: Metadata = {
1012
title: "EduVox",
@@ -27,6 +29,8 @@ export default function RootLayout({
2729
<body className="font-bricolage antialiased">
2830
<ClerkProvider appearance={{ variables: { colorPrimary: "#fe5933" } }}>
2931
<ClientErrorHandlerWrapper />
32+
<ClerkErrorInterceptor />
33+
<ClerkServiceWorkerRegistration />
3034
<Navbar />
3135
{children}
3236
<Footer />

‎app/sign-in/[[...sign-in]]/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { SignIn } from "@clerk/nextjs";
2-
import ClerkErrorBoundary from "@/components/ClerkErrorBoundary";
2+
import { ClerkSignInErrorBoundary } from "@/components/ClerkSignInErrorBoundary";
33

44
export default function Page() {
55
return (
66
<main className="flex items-center justify-center min-h-screen p-4">
7-
<ClerkErrorBoundary>
7+
<ClerkSignInErrorBoundary>
88
<SignIn
99
appearance={{
1010
elements: {
@@ -13,7 +13,7 @@ export default function Page() {
1313
},
1414
}}
1515
/>
16-
</ClerkErrorBoundary>
16+
</ClerkSignInErrorBoundary>
1717
</main>
1818
);
1919
}

‎components/ClerkErrorInterceptor.tsx‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
"use client";
2+
3+
import { useEffect } from "react";
4+
import * as Sentry from "@sentry/nextjs";
5+
6+
/**
7+
* ClerkErrorInterceptor - Handles Clerk.js SDK errors gracefully
8+
* This component specifically targets the "Object Not Found Matching Id" errors
9+
* that occur when Clerk's internal object registry gets out of sync
10+
*/
11+
export default function ClerkErrorInterceptor() {
12+
useEffect(() => {
13+
// Store original console.error
14+
const originalConsoleError: typeof console.error = console.error;
15+
16+
// Override console.error to intercept Clerk errors
17+
console.error = function (...args: unknown[]) {
18+
const message = args.join(" ");
19+
20+
// Check for Clerk-specific error patterns
21+
if (
22+
message.includes("Object Not Found Matching Id") &&
23+
message.includes("MethodName:update")
24+
) {
25+
console.warn(
26+
"🔄 [ClerkErrorInterceptor] Intercepted Clerk SDK error:",
27+
message
28+
);
29+
30+
// Log to Sentry with reduced severity
31+
Sentry.captureMessage(`Clerk SDK Error Intercepted: ${message}`, {
32+
level: "warning",
33+
tags: {
34+
component: "ClerkErrorInterceptor",
35+
errorType: "clerk_object_not_found",
36+
intercepted: true,
37+
},
38+
extra: {
39+
fullMessage: message,
40+
arguments: args,
41+
userAgent: navigator?.userAgent,
42+
url: window?.location?.href,
43+
timestamp: new Date().toISOString(),
44+
},
45+
});
46+
47+
// Don't call original console.error for this specific error
48+
return;
49+
}
50+
51+
// For all other errors, call the original console.error
52+
originalConsoleError.apply(console, args);
53+
};
54+
55+
// Enhanced Promise rejection handler specifically for Clerk
56+
const handleClerkPromiseRejection = (event: PromiseRejectionEvent) => {
57+
const reason = event.reason;
58+
const reasonString = String(reason || "");
59+
60+
// Specifically handle Clerk "Object Not Found" errors
61+
if (
62+
reasonString.includes("Object Not Found Matching Id") &&
63+
reasonString.includes("MethodName:update")
64+
) {
65+
console.warn(
66+
"🔄 [ClerkErrorInterceptor] Handled Clerk promise rejection:",
67+
reasonString
68+
);
69+
70+
// Extract ID and method info for better debugging
71+
const idMatch = reasonString.match(/Id:(\d+)/);
72+
const methodMatch = reasonString.match(/MethodName:(\w+)/);
73+
const paramMatch = reasonString.match(/ParamCount:(\d+)/);
74+
75+
Sentry.captureException(
76+
new Error(`Clerk SDK Promise Rejection: ${reasonString}`),
77+
{
78+
level: "warning",
79+
tags: {
80+
component: "ClerkErrorInterceptor",
81+
errorType: "clerk_promise_rejection",
82+
handled: true,
83+
objectId: idMatch?.[1] || "unknown",
84+
method: methodMatch?.[1] || "unknown",
85+
paramCount: paramMatch?.[1] || "unknown",
86+
},
87+
extra: {
88+
originalReason: reason,
89+
reasonType: typeof reason,
90+
extractedId: idMatch?.[1],
91+
extractedMethod: methodMatch?.[1],
92+
extractedParamCount: paramMatch?.[1],
93+
},
94+
}
95+
);
96+
97+
// Prevent the error from propagating and showing in browser console
98+
event.preventDefault();
99+
100+
// Optional: Attempt to recover by clearing Clerk's local state
101+
try {
102+
// Clear any cached Clerk data that might be causing the mismatch
103+
if (typeof window !== "undefined" && window.localStorage) {
104+
Object.keys(localStorage).forEach((key) => {
105+
if (
106+
key.startsWith("clerk-session") ||
107+
key.startsWith("clerk-user")
108+
) {
109+
localStorage.removeItem(key);
110+
}
111+
});
112+
}
113+
} catch (e) {
114+
console.warn("Could not clear Clerk localStorage:", e);
115+
}
116+
117+
return;
118+
}
119+
120+
// For chunk loading errors related to Clerk
121+
if (
122+
reasonString.includes("ChunkLoadError") ||
123+
reasonString.includes("98150de33c239da6.js")
124+
) {
125+
console.warn(
126+
"🔄 [ClerkErrorInterceptor] Handled Clerk chunk loading error:",
127+
reasonString
128+
);
129+
130+
Sentry.captureException(
131+
new Error(`Clerk Chunk Load Error: ${reasonString}`),
132+
{
133+
level: "error", // This is more serious as it affects functionality
134+
tags: {
135+
component: "ClerkErrorInterceptor",
136+
errorType: "clerk_chunk_load_error",
137+
handled: true,
138+
},
139+
}
140+
);
141+
142+
event.preventDefault();
143+
144+
// For chunk loading errors, we should reload the page after a short delay
145+
console.log(
146+
"🔄 [ClerkErrorInterceptor] Scheduling page reload due to chunk loading error..."
147+
);
148+
setTimeout(() => {
149+
window.location.reload();
150+
}, 2000);
151+
152+
return;
153+
}
154+
};
155+
156+
// Add the enhanced promise rejection handler
157+
window.addEventListener(
158+
"unhandledrejection",
159+
handleClerkPromiseRejection,
160+
true
161+
);
162+
163+
// Cleanup function
164+
return () => {
165+
// Restore original console.error
166+
if (originalConsoleError) {
167+
console.error = originalConsoleError;
168+
}
169+
170+
// Remove event listener
171+
window.removeEventListener(
172+
"unhandledrejection",
173+
handleClerkPromiseRejection,
174+
true
175+
);
176+
};
177+
}, []);
178+
179+
return null; // This component doesn't render anything visible
180+
}

‎components/ClerkServiceWorkerRegistration.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
"use client";
2+
3+
import { useEffect } from "react";
4+
5+
export default function ClerkServiceWorkerRegistration() {
6+
useEffect(() => {
7+
if ("serviceWorker" in navigator) {
8+
// Register the service worker
9+
navigator.serviceWorker
10+
.register("/clerk-sw.js")
11+
.then((registration) => {
12+
console.log(
13+
"✅ [ClerkSW] Service Worker registered successfully:",
14+
registration.scope
15+
);
16+
17+
// Listen for updates
18+
registration.addEventListener("updatefound", () => {
19+
console.log("🔄 [ClerkSW] New service worker version found");
20+
});
21+
})
22+
.catch((error) => {
23+
console.warn(
24+
"⚠️ [ClerkSW] Service Worker registration failed:",
25+
error
26+
);
27+
});
28+
29+
// Listen for messages from the service worker
30+
navigator.serviceWorker.addEventListener("message", (event) => {
31+
if (event.data && event.data.type === "CLERK_CHUNK_ERROR") {
32+
console.warn(
33+
"🚨 [ClerkSW] Chunk loading error reported by service worker"
34+
);
35+
// Could trigger a reload or show user notification
36+
}
37+
});
38+
39+
// Function to clear Clerk cache when needed
40+
(
41+
window as typeof window & { clearClerkCache?: () => void }
42+
).clearClerkCache = () => {
43+
if (navigator.serviceWorker.controller) {
44+
navigator.serviceWorker.controller.postMessage({
45+
type: "CLEAR_CLERK_CACHE",
46+
});
47+
}
48+
};
49+
}
50+
}, []);
51+
52+
return null;
53+
}

0 commit comments

Comments
 (0)