fix(website): expand Sentry error filters to suppress hydration and pushState noise

- Add ignoreErrors array covering React hydration errors (#418, #423, #425),
  pushState read-only variants, and Chrome DevTools Protocol messages
- Broaden beforeSend pushState filter from exact string to case-insensitive
  toLowerCase().includes("pushstate") to catch all TypeError variants (#434)
- Add belt-and-suspenders beforeSend hydration check for events that bypass
  ignoreErrors (e.g. unhandledrejection without exception value) (#437)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: 2 people

website/src/instrumentation-client.ts

@@ -12,25 +12,54 @@ Sentry.init({
   integrations: [
     Sentry.replayIntegration(),
   ],
+  // Suppress known-noisy error patterns that are not actionable app bugs.
+  // These originate from browser extensions, React hydration with Replay,
+  // and Chrome DevTools Protocol messages.
+  ignoreErrors: [
+    // pushState read-only — extensions (Vue/Redux DevTools) wrap history.pushState before our app loads.
+    // Covers all variants: with/without object descriptor suffix, case differences.
+    /Cannot assign to read only property ['"]?pushState['"]?/i,
+    // React hydration mismatches triggered by Sentry Replay injecting DOM attributes.
+    "Text content does not match server-rendered HTML",
+    "Hydration failed because the server rendered HTML didn't match the client",
+    "There was an error while hydrating",
+    "Minified React error #418",
+    "Minified React error #423",
+    "Minified React error #425",
+    // Chrome DevTools Protocol messages from extensions interacting with CodeMirror/Monaco.
+    /Object Not Found Matching Id:\d+/,
+  ],
   beforeSend(event) {
     const msg = event.exception?.values?.[0]?.value ?? "";
 
-    // Drop known browser-extension noise that cannot be fixed in app code:
+    // Belt-and-suspenders: also filter in beforeSend for events that bypass
+    // ignoreErrors (e.g. unhandledrejection events, events with no exception value).
+    //
+    // 1. pushState read-only — extensions (Vue/Redux DevTools, privacy tools) wrap
+    //    history.pushState before our app loads, making it read-only. Not
+    //    reproducible without the extension. Covers all TypeError variants (#434).
     //
-    // 1. "Cannot assign to read only property 'pushState'" — extensions
-    //    (Vue/Redux DevTools, privacy tools) wrap history.pushState before our
-    //    app loads, making it read-only. Not reproducible without the extension.
+    // 2. React hydration errors — triggered by Sentry Replay injecting data-*
+    //    attributes into the DOM. React compares server HTML (no attrs) with client
+    //    HTML (Sentry attrs) → mismatch. Not a real app bug (#437).
     //
-    // 2. "Object Not Found Matching Id:N, MethodName:update" — Chrome DevTools
-    //    Protocol messages from extensions interacting with CodeMirror/Monaco.
-    //    The error originates outside our code and only affects a single session.
+    // 3. "Object Not Found Matching Id:N" — Chrome DevTools Protocol messages from
+    //    extensions interacting with CodeMirror/Monaco. Outside our code.
     const isExtensionNoise =
-      msg.includes("Cannot assign to read only property 'pushState'") ||
+      msg.toLowerCase().includes("pushstate") ||
       msg.includes("Object Not Found Matching Id:");
 
-    if (isExtensionNoise) {
+    const isHydrationNoise =
+      msg.includes("Text content does not match") ||
+      msg.includes("Hydration failed") ||
+      msg.includes("There was an error while hydrating") ||
+      msg.includes("Minified React error #418") ||
+      msg.includes("Minified React error #423") ||
+      msg.includes("Minified React error #425");
+
+    if (isExtensionNoise || isHydrationNoise) {
       if (process.env.NODE_ENV === "development") {
-        console.debug("[Sentry] Suppressed extension noise:", msg);
+        console.debug("[Sentry] Suppressed noise:", msg);
       }
       return null;
     }