@sentry/nextjs autoInstrumentServerFunctions breaks next.js' font optimization

[klaasman]

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

7.54.0

Framework Version

7.54.0

Link to Sentry event

No response

SDK Setup

Sentry.init({
dsn: SENTRY_DSN,
tracesSampleRate: 1.0,
});

Steps to Reproduce

Clone the following repository: https://github.com/klaasman/sentry-nextjs-font-inlining-bug

1. npm install
2. npm run build
3. open ./.next/server/pages/index.html, you will see that the font-loading is inlined (search for @font-face)
4. now open next.config.js and comment out the autoInstrumentServerFunctions line
5. npm run build
6. open ./.next/server/pages/index.html, you will see that the font-loading is not inlined anymore (search for @font-face)

Expected Result

I expected next.js font optimization feature to work.

Actual Result

The autoInstrumentServerFunctions somehow disables next.js' font inlining feature. This setting is turned on by default, in this repository it is turned off in the next.config.js file.

[lforst]

Thanks for writing in! We'll take a look at this!

[klaasman]

Thanks - you can find more info in the README of the reproduction github repository.

[github-actions]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

[klaasman]

Go ahead and reset the clock as this isn't resolved yet

[Lms24]

Hi @klaasman thanks for bumping. This is on our backlog, we'll take a look at it.

[lforst]

I took a look at how Next.js implements this font optimization. It seems like Next.js does static code analysis to build a font a font manifest and the SDK breaks the manifest generation. I believe a fix is not that straight forward so it might take a while until we get to this.

[klaasman]

Thanks for diving into it. What parts of the sentry <-> next.js integration will be turned off if I disable sentry's autoInstrumentServerFunctions option? (and maybe any guidance on how to manually implement the missing parts?)

[lforst]

Thanks for diving into it. What parts of the sentry <-> next.js integration will be turned off if I disable sentry's autoInstrumentServerFunctions option?

@klaasman unfortunately quite a bit. autoInstrumentServerFunctions controls basically all of the serverside instrumentation for errors and performance. Without it you need to instrument all API routes, data fetchers, and server components, by yourself: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#opt-in-to-auto-instrumentation-on-specific-routes

[getsantry]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you remove the label Waiting for: Community, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀