Issues running @vercel/og when @sentry/nextjs is installed

[jcblw]

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 package are you using?

@sentry/nextjs

SDK Version

7.15.0

Framework Version

7.15.0

Link to Sentry event

No response

Steps to Reproduce

1. Installed @vercel/og
2. Run the local server yarn dev
3. Error happens with auto instrumentation. It does not like the exported config needed
4. Turn off auto instrumentation.
5. See image work locally, deploy to Vercel
6. Attempt to view the image on preview ( 500 crash of edge function ).

Expected Result

I should be able to use @sentry/nextjs and @vercel/og in the same project. The only way I could get images generated on Vercel was to remove the integration altogether.

Actual Result

I run into initial issues with auto instrumentation due to the config exports. If I remove the export, it no longer throws a Sentry issue but another error due to missing dependencies on the edge function. Here is that original error.

The error on Vercel after turning off auto instrumentation. /api/sponsor is the route of the image. I think Sentry assumes this is a client view since it's using browser tracing and attempting to access document.getElementById. Also, this file extension is a TSX file

Thanks, and let me know if I am just misconfiguring this!

[lforst]

Are you using Vercel's edge runtime? If yes, the Sentry SDK doesn't currently support it. Can you try the same thing using ordinary Node.js as a runtime? Thanks!

[jcblw]

@lforst the package mentioned above only works on the edge runtime. I initially hoped to turn it off for just one route, but it seems like the only way I could get any of this to work was by completely uninstalling the package. I'll get a test repo up for you.

[jcblw]

I have been having issues replicating this with a new repo.

https://github.com/jcblw/sentry-vercel-og-issue

It seems like, for some reason, on my private repo, Sentry thinks the Image responses are React components, so the client performance library runs.

Going to close for now until I can get that repo to throw the error.

[nathanhammond]

Reproduction: https://github.com/nathanhammond/turbo/tree/open-graph-image

Create a Vercel project for the /docs directory and it will throw this error:

TypeError: uh.withSentryAPI is not a function
    at pages/api/og.tsx:41:51
    at webpack/bootstrap:21:0
    at .:6:18
    at webpack/bootstrap:21:0
    at ../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js:4:2
    at ../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js:4:2
    at webpack/runtime/jsonp chunk loading:34:0
    at api/og:middleware.js:1:17

It appears to be inserting instrumentation for fetch (at build time?) in a way that the Vercel edge runtime does not support, and Sentry itself isn't being included in the built assets. (This is calculated by https://github.com/vercel/nft)

Further notes: autoInstrumentServerFunctions is true.

[nathanhammond]

ignore doesn't work as an option, as specified here:

sentry-javascript/packages/nextjs/src/config/webpack.ts

Line 23 in 83a7675

// TODO: merge default SentryWebpackPlugin ignore with their SentryWebpackPlugin ignore or ignoreFile

This means I can't work around it with any other method except by toggling autoInstrumentServerFunctions:

sentry-javascript/packages/nextjs/src/config/webpack.ts

Line 82 in 83a7675

if (userSentryOptions.autoInstrumentServerFunctions !== false) {

[jcblw]

Going to reopen with @nathanhammond comments.

[MAfzalKhan1997]

any update on this ? I'm facing this issue

[lforst]

any update on this ?

We're working on an option to turn off auto-instrumentation for individual API routes. Support for the Edge runtime currently isn't planned any time soon. For now, to get this working, you can set autoInstrumentServerFunctions: false in your Next.js config and manually instrument all other routes with withSentry().