Next.js: Client Instrumentation Hook - Slow execution detected

[FabianKoder]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/nextjs

SDK Version

9.13.0

Framework Version

Next 15.3.0

Link to Sentry event

No response

Reproduction Example/SDK Setup

As documented;

instrumentation-client.ts

import * as Sentry from '@sentry/nextjs';

Sentry.init({
	dsn: process.env.NC_SENTRY_DSN,
});

(real config has more integrations enabled, but this basically empty config already has at least 100ms of initialization time which causes the warning)

Steps to Reproduce

1. Added Sentry.init as documented in the instrumentation-client.ts file
2. Get warning on every page load in development mode that instrumentation init takes 100-300ms which, according to Next.js, can cause lag if it takes longer than 16ms (1 Frame @ 60fps)

Expected Result

Fast initialization without impacting user experience

Actual Result

[Client Instrumentation Hook] Slow execution detected: 350ms (Note: Code download overhead is not included in this measurement)

[FabianKoder]

After further testing, this causes the site to remain completely white until initialization is done, since it is, and obviously needs to be, executed synchronously.

350ms like in the log message I included in the issue is a very significant amount though considering Core Web Vitals. Affected are:

• TBT (Total Blocking Time)
• FCP (First Contentful Paint)
• LCP (Largest Contentful Paint)

I know that including Sentry will not come without any performance hit, but these initialization times sound pretty high in my eyes, especially since we all know the talk about how every millisecond can impact the conversion rate.

See also attached Lighthouse reports, with Sentry in instrumentation-client:

vs. with empty instrumentation-client:

Additional remark: We migrated Sentry from within _app to instrumentation-client - I have not compared performance metrics yet, so it could also mean that this issue was present before. This newly added warning by Next.js highlights this important issue, though. Since these are initialization times on a MacBook Pro M3, this could be even worse for users on mobile devices. (The screenshots come from Lighthouse Mobile, the warning occurs without any artificial slowdowns in Next.js development mode though)

[lforst]

Hm 100ms sounds indeed a bit high. I think this was an issue before and just surfaces with this new Next.js warning. We'll take a look!