Bug report

Description / Observed Behavior

The OG image endpoint causes an internal server error:

It works locally, and my code is exactly the same as what's given in the vercel docs:

import { ImageResponse } from '@vercel/og';

export const config = {
	runtime: 'experimental-edge',
};

export default function handler() {
	return new ImageResponse(
		(
			<div
				style={{
					fontSize: 128,
					background: 'white',
					width: '100%',
					height: '100%',
					display: 'flex',
					textAlign: 'center',
					alignItems: 'center',
					justifyContent: 'center',
				}}
			>
				Hello world!
			</div>
		),
		{
			width: 1200,
			height: 600,
		}
	);
}

Expected Behavior

I expect it to serve an Image that can be used for opengraph

Reproduction

Hello world example from above: https://og-playground.vercel.app/?share=ddHBisIwEAbgV-kOLF4KW5c9SHAFEUHPeuylbabtaJqUZmqtpe9uqogWlFwy8w2Bf9JBYiSCgLmkU6hDvh_LrcL_rnt2Qk6N5h1dUHjT35n_KnGUHLPK1FoKb9LkxDgZeUOSc0fTIPgeS46U5fyWJNlSRa2zVOF5bIxnXirKtNMENWM19miwLWNhPwwcasuUtisXyenbob5_3BfP5gaVMl5jKiW_Ht35j1vdAnwwJZPRFkQHt8QgZkHgwz0jiL-hkBjXGYg0UhZ9wMIcaN-Wwwdwc6vcO8Oi10WMEgRXNfb9FQ

What I was actually trying to build: https://og-playground.vercel.app/?share=dVLNbpwwGHwVy1Fu62WhzfKjbaV22x4q9VC1N3YPgA048Z_wR4BGeffaELTJquUAjPV5ZjzjJ1xpynCGD5Q_Ihg-nDCwEYiVqGxIfhPFURp9OqN5cWg5MDSQuhcCtcunFmycX6TSApmR5PHtGZmJ5He35xP-eFIIXXHn6d6MZyRYQblyIguUJQn3V3S1VkAEb1p4YfKPls0D78ppxQdrCvWa_ibdx9-S2KuP6MdkgXVc9_YQ-MHFUOAc_dPau-iNtSi5WFvJj2mSJp78qKXsFYcJyYIyZLk0gm3_zx2Fb7lnqcFpuqRQp3tFGSWiWYL_En2Oj-FL8Jce5kRKLeiSlOtDWlIx5c6I7nsLvJ5W6Dq4exXbd81dSi1DlVaPrLMFcK2uwuCyWcdn30Vptehd553vgOxQqQG0dD8tycNw5xteN9iucjtaAGOzIOBbx9V320rLwDzsf_4Zf22Nai7jhQA3vuDAqS8u8AZr441ZnD3hgVNocZbsdhvcMm8BZ-89oKzsG5zVhbBsg5nU9_z3ZPw1hmFGjscn9VWWjOIMup49P_8F

Additional Context

Initially i was getting a node 12.x version warning. I upgraded to 14.x through the vercel settings, and the error persisted.

When I look at the vercel logs, here's what I get:

TypeError: Cannot read properties of undefined (reading 'getElementById')
    at node_modules/@sentry/nextjs/esm/performance/client.js:22:26
    at node_modules/@sentry/nextjs/esm/performance/client.js:94:54
    at node_modules/@sentry/tracing/esm/browser/browsertracing.js:99:0
    at node_modules/@sentry/core/esm/integration.js:64:0
    at <anonymous>
    at node_modules/@sentry/core/esm/integration.js:60:0
    at node_modules/@sentry/core/esm/baseclient.js:217:27
    at node_modules/@sentry/hub/esm/hub.js:65:0
    at node_modules/@sentry/core/esm/sdk.js:32:0
    at node_modules/@sentry/browser/esm/sdk.js:110:2
    at node_modules/@sentry/react/esm/sdk.js:18:2
    at node_modules/@sentry/nextjs/esm/index.client.js:31:2
    at sentry.server.config.js:8:1
    at webpack/bootstrap:21:0
    at node_modules/react/jsx-runtime.js:4:2
    at node_modules/react/jsx-runtime.js:4:2
    at webpack/runtime/jsonp chunk loading:34:0
    at api/og:middleware.js:1:17

Unfortunately it’s because Sentry doesn’t support edge runtime 😞

TypeError: Cannot read properties of undefined (reading 'getElementById')
    at node_modules/@sentry/nextjs/esm/performance/client.js:22:26

Currently it's not possible for you to disable Sentry for a specific API route: https://github.com/getsentry/sentry-javascript/issues/4206

So the short term fix is to disable Sentry, but we're gonna work with Sentry to add support for edge runtime / provide the option to opt-out for a specific route.

https://github.com/getsentry/sentry-javascript/issues/4206#issuecomment-1384277626