From f430560894992493fb167d88eb60ec041ac6bd28 Mon Sep 17 00:00:00 2001 From: Ajit Pratap Singh Date: Thu, 26 Mar 2026 10:33:19 +0530 Subject: [PATCH 1/3] fix: resolve Sentry hydration mismatch and suppress extension noise MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit FadeIn.tsx — fix SSR hydration mismatch (Sentry #104333516, #104333514): Framer Motion applies initial={{ opacity:0, y:16 }} before React hydrates, causing the server-rendered DOM (opacity:1) to mismatch the client DOM. Fix: render a plain
on server + during hydration (isMounted=false), then swap to after useEffect fires. No mismatch, no flash. instrumentation-client.ts — filter browser extension noise (Sentry #106232192, #105431404): Add beforeSend hook to drop two known extension-only error patterns: - "Cannot assign to read only property 'pushState'" — extensions wrap history.pushState before the app loads, making it read-only - "Object Not Found Matching Id:N, MethodName:update" — Chrome DevTools Protocol messages from extensions interacting with CodeMirror GitHub issue #435 (Object Not Found) closed as noise. Issues #436/#437 (hydration) resolved by the FadeIn fix. Issue #434 (pushState) silenced via beforeSend filter. Co-Authored-By: Claude Sonnet 4.6 --- website/src/components/ui/FadeIn.tsx | 17 ++++++++++++++++- website/src/instrumentation-client.ts | 21 +++++++++++++++++++++ 2 files changed, 37 insertions(+), 1 deletion(-) diff --git a/website/src/components/ui/FadeIn.tsx b/website/src/components/ui/FadeIn.tsx index d3ccdd31..53651c35 100644 --- a/website/src/components/ui/FadeIn.tsx +++ b/website/src/components/ui/FadeIn.tsx @@ -1,9 +1,24 @@ 'use client'; import { motion, useReducedMotion } from 'framer-motion'; -import { ReactNode } from 'react'; +import { ReactNode, useState, useEffect } from 'react'; export function FadeIn({ children, delay = 0, className = '' }: { children: ReactNode; delay?: number; className?: string }) { const shouldReduce = useReducedMotion(); + const [isMounted, setIsMounted] = useState(false); + + // Defer Framer Motion's initial state until after hydration. Without this, + // Framer Motion applies initial={{ opacity: 0 }} before React hydrates, causing + // the server-rendered HTML (opacity:1) to mismatch the client DOM (opacity:0). + useEffect(() => { + setIsMounted(true); + }, []); + + if (!isMounted) { + // Server + hydration pass: render without Framer Motion so the DOM matches + // the server HTML exactly. No opacity/transform styles applied. + return
{children}
; + } + return ( Date: Thu, 26 Mar 2026 12:54:31 +0530 Subject: [PATCH 2/3] fix: address PR review suggestions for #439 - Wrap FadeIn in memo() to prevent unnecessary re-renders from parent state changes that don't affect the component's own props - Log suppressed extension noise errors to console.debug in development so they remain visible locally while staying off Sentry in production Co-Authored-By: Claude Sonnet 4.6 --- website/src/components/ui/FadeIn.tsx | 6 +++--- website/src/instrumentation-client.ts | 10 +++++++--- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/website/src/components/ui/FadeIn.tsx b/website/src/components/ui/FadeIn.tsx index 53651c35..ce1b4096 100644 --- a/website/src/components/ui/FadeIn.tsx +++ b/website/src/components/ui/FadeIn.tsx @@ -1,8 +1,8 @@ 'use client'; import { motion, useReducedMotion } from 'framer-motion'; -import { ReactNode, useState, useEffect } from 'react'; +import { ReactNode, useState, useEffect, memo } from 'react'; -export function FadeIn({ children, delay = 0, className = '' }: { children: ReactNode; delay?: number; className?: string }) { +export const FadeIn = memo(function FadeIn({ children, delay = 0, className = '' }: { children: ReactNode; delay?: number; className?: string }) { const shouldReduce = useReducedMotion(); const [isMounted, setIsMounted] = useState(false); @@ -29,4 +29,4 @@ export function FadeIn({ children, delay = 0, className = '' }: { children: Reac {children} ); -} +}); diff --git a/website/src/instrumentation-client.ts b/website/src/instrumentation-client.ts index fed26363..1a27bbab 100644 --- a/website/src/instrumentation-client.ts +++ b/website/src/instrumentation-client.ts @@ -24,10 +24,14 @@ Sentry.init({ // 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. - if ( + const isExtensionNoise = msg.includes("Cannot assign to read only property 'pushState'") || - msg.includes("Object Not Found Matching Id:") - ) { + msg.includes("Object Not Found Matching Id:"); + + if (isExtensionNoise) { + if (process.env.NODE_ENV === "development") { + console.debug("[Sentry] Suppressed extension noise:", msg); + } return null; } From 084695781792255317dc953067cad1a0fa910b57 Mon Sep 17 00:00:00 2001 From: Ajit Pratap Singh Date: Sat, 28 Mar 2026 13:44:19 +0530 Subject: [PATCH 3/3] fix(website): mobile responsiveness improvements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Navbar: enlarge hamburger button to 44×44px (w-11 h-11) for iOS touch target minimum - Playground: hide 'SQL Playground' label on mobile to prevent toolbar overflow; add min-h-[240px] to each panel so stacked layout is usable on small screens; increase copy button padding - CodeExamples: add flex-wrap to tab bar so tabs don't overflow on 320px phones - Hero: add min-w-0 to grid columns to ensure pre blocks scroll within bounds; increase 'parsed in <1ms' from 10px to 12px (text-xs) - StatsBar: make counter text text-3xl on mobile (was text-4xl, too wide for 2-col grid on 320px) - AnimatedCounter: same text-3xl sm:text-4xl responsive scaling - VscodeSection: reduce gap from gap-10 to gap-6 md:gap-10 on mobile - BenchmarksContent: reduce table cell padding to px-3 py-3 on mobile (was px-6 py-4), reducing table width by ~120px to fit 390px viewport Co-Authored-By: Claude Sonnet 4.6 --- .../src/app/benchmarks/BenchmarksContent.tsx | 66 +++++++++---------- website/src/components/home/CodeExamples.tsx | 2 +- website/src/components/home/Hero.tsx | 6 +- website/src/components/home/StatsBar.tsx | 2 +- website/src/components/home/VscodeSection.tsx | 2 +- website/src/components/layout/Navbar.tsx | 2 +- .../src/components/playground/Playground.tsx | 14 ++-- website/src/components/ui/AnimatedCounter.tsx | 2 +- 8 files changed, 48 insertions(+), 48 deletions(-) diff --git a/website/src/app/benchmarks/BenchmarksContent.tsx b/website/src/app/benchmarks/BenchmarksContent.tsx index 089206fd..a0fc779f 100644 --- a/website/src/app/benchmarks/BenchmarksContent.tsx +++ b/website/src/app/benchmarks/BenchmarksContent.tsx @@ -86,10 +86,10 @@ export function BenchmarksContent() { GoSQLX Parse Benchmarks - Benchmark - Query Type - Apple M4 - Baseline (CI) + Benchmark + Query Type + Apple M4 + Baseline (CI) @@ -98,10 +98,10 @@ export function BenchmarksContent() { key={b.name} className="border-b border-white/[0.04] hover:bg-white/[0.03] transition-colors" > - {b.name} - {b.query} - {b.m4} - {b.baseline} + {b.name} + {b.query} + {b.m4} + {b.baseline} ))} @@ -124,52 +124,52 @@ export function BenchmarksContent() { Competitor Library Comparison - Library - Language - Ops/sec - Memory/op - Zero-copy + Library + Language + Ops/sec + Memory/op + Zero-copy - + GoSQLX{' '} This Library - Go - 1.38M+ - Low - + Go + 1.38M+ + Low + ✓ - xwb1989/sqlparser - Go - ~380K - Higher - + xwb1989/sqlparser + Go + ~380K + Higher + ✗ - pg_query_go - Go - ~220K - Higher (CGo) - + pg_query_go + Go + ~220K + Higher (CGo) + ✗ - blastrain/sqlparser - Go - ~290K - Medium - + blastrain/sqlparser + Go + ~290K + Medium + ✗ diff --git a/website/src/components/home/CodeExamples.tsx b/website/src/components/home/CodeExamples.tsx index 3cf2e206..b0f6b574 100644 --- a/website/src/components/home/CodeExamples.tsx +++ b/website/src/components/home/CodeExamples.tsx @@ -109,7 +109,7 @@ export function CodeExamples() { -
+
{tabs.map((tab, i) => (