fix: use globalThis.performance in SuspenseWithPerf to avoid SSR crash#729
Conversation
There was a problem hiding this comment.
Code Review
This pull request updates src/performance.tsx to safely access the performance API, preventing errors in environments where it is not globally available. The review feedback suggests simplifying this check by directly verifying typeof performance !== 'undefined' instead of checking globalThis. Additionally, it recommends replacing React.useLayoutEffect with React.useEffect inside the Fallback component to avoid SSR warnings and prevent blocking the paint.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
useLayoutEffect triggers a React warning on the server. Since performance marks don't require synchronous DOM layout reads, useEffect is sufficient and avoids the SSR warning.
Fixes #328
SuspenseWithPerfwas accessing theperformanceglobal directly, which throws aReferenceErrorin SSR environments (e.g. Next.js) whereperformanceis not defined as a global variable.Replaces direct
performanceaccess withglobalThis.performance, which is always safe to access. Ifperformanceis not available in the environment, it returnsundefinedand the optional chaining handles it gracefully — no crash.A follow-up enhancement (tracked in #328) could have
SuspenseWithPerfself-initialize Firebase Performance viauseInitPerformancefor richer RUM integration.