Skip to content

fix: use globalThis.performance in SuspenseWithPerf to avoid SSR crash#729

Merged
tyler-reitz merged 2 commits into
FirebaseExtended:mainfrom
tyler-reitz:fix/suspense-with-perf-ssr
Jul 8, 2026
Merged

fix: use globalThis.performance in SuspenseWithPerf to avoid SSR crash#729
tyler-reitz merged 2 commits into
FirebaseExtended:mainfrom
tyler-reitz:fix/suspense-with-perf-ssr

Conversation

@tyler-reitz

Copy link
Copy Markdown
Contributor

Fixes #328

SuspenseWithPerf was accessing the performance global directly, which throws a ReferenceError in SSR environments (e.g. Next.js) where performance is not defined as a global variable.

Replaces direct performance access with globalThis.performance, which is always safe to access. If performance is not available in the environment, it returns undefined and the optional chaining handles it gracefully — no crash.

A follow-up enhancement (tracked in #328) could have SuspenseWithPerf self-initialize Firebase Performance via useInitPerformance for richer RUM integration.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread src/performance.tsx
Comment thread src/performance.tsx
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.
@tyler-reitz tyler-reitz merged commit ce25324 into FirebaseExtended:main Jul 8, 2026
12 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

SuspenseWithPerf fails with NextJS (ReferenceError: performance is not defined)

2 participants