Support Next.js on Cloudflare Pages (OpenNext)

### Is there an existing issue for this?

- [x] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
- [x] I have reviewed the documentation https://docs.sentry.io/
- [x] 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

8.47.0

### Framework Version

next@14.2.4

### Link to Sentry event

_No response_

### Reproduction Example/SDK Setup

# Configs
## next.config.mjs
```mjs
import { withSentryConfig } from '@sentry/nextjs';
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    instrumentationHook: true,
  },
  reactStrictMode: true,
  async headers() {
    return MY_HEADER_CONFIGS
  },
};

export default withSentryConfig(nextConfig, {
  org: 'MY_ORG',
  project: 'MY_PROJECT',
  silent: !process.env.CI,
  widenClientFileUpload: true,
  reactComponentAnnotation: {
    enabled: true,
  },
  tunnelRoute: '/monitoring',
  hideSourceMaps: true,
  disableLogger: false,
  automaticVercelMonitors: true,
});
```

## instrumentation.ts
```typescript
import * as Sentry from '@sentry/nextjs';

export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    await import('../sentry.server.config');
  }

  if (process.env.NEXT_RUNTIME === 'edge') {
    await import('../sentry.edge.config');
  }
}

export const onRequestError = Sentry.captureRequestError;
```

## sentry.edge.config.ts
```typescript
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  environment: process.env.NEXT_PUBLIC_SENTRY_ENV,
  dsn: 'MY_DSN',
  tracesSampleRate: 1,
  debug: true,
});
```

## deploy-action.yaml
```yaml
name: Deploy

on:
  push:
    branches-ignore:
      - master
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    env:
      NEXT_PUBLIC_SENTRY_ENV: "preview"
      SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
    permissions:
      contents: "read"
      id-token: "write"
    steps:
      - uses: "actions/checkout@v4"
      - uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
      - run: npm ci
      - name: Build
        run: npx -w MY_WORKSPACE @cloudflare/next-on-pages --disableChunksDedup
      - name: Publish to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CF_API_TOKEN_V2 }}
          accountId: ${{ secrets.CF_ACCOUNT_ID }}
          command: pages deploy MY_WORKSPACE_DIR/.vercel/output/static --project-name=MY_PROJECT_NAME
```

# App Code
I used files made by `npx @sentry/wizard@latest -i nextjs` to test.

## app/api/sentry-example-api/route.ts
```typescript
import { NextResponse } from 'next/server';

export const dynamic = 'force-dynamic';
export const runtime = 'edge';

// A faulty API route to test Sentry's error monitoring
export function GET() {
  throw new Error('Sentry Example API Route Error');
  return NextResponse.json({ data: 'Testing Sentry Error...' });
}
```

## app/sentry-example-page/page.tsx
```tsx
'use client';

import * as Sentry from '@sentry/nextjs';
import Head from 'next/head';

export default function Page() {
  return (
    <div>
      <Head>
        <title>Sentry Onboarding</title>
        <meta name="description" content="Test Sentry for your Next.js app!" />
      </Head>

      <main
        style={{
          minHeight: '100vh',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <h1 style={{ fontSize: '4rem', margin: '14px 0' }}>
          <svg
            style={{
              height: '1em',
            }}
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 200 44"
          >
            <path
              fill="currentColor"
              d="M124.32,28.28,109.56,9.22h-3.68V34.77h3.73V15.19l15.18,19.58h3.26V9.22h-3.73ZM87.15,23.54h13.23V20.22H87.14V12.53h14.93V9.21H83.34V34.77h18.92V31.45H87.14ZM71.59,20.3h0C66.44,19.06,65,18.08,65,15.7c0-2.14,1.89-3.59,4.71-3.59a12.06,12.06,0,0,1,7.07,2.55l2-2.83a14.1,14.1,0,0,0-9-3c-5.06,0-8.59,3-8.59,7.27,0,4.6,3,6.19,8.46,7.52C74.51,24.74,76,25.78,76,28.11s-2,3.77-5.09,3.77a12.34,12.34,0,0,1-8.3-3.26l-2.25,2.69a15.94,15.94,0,0,0,10.42,3.85c5.48,0,9-2.95,9-7.51C79.75,23.79,77.47,21.72,71.59,20.3ZM195.7,9.22l-7.69,12-7.64-12h-4.46L186,24.67V34.78h3.84V24.55L200,9.22Zm-64.63,3.46h8.37v22.1h3.84V12.68h8.37V9.22H131.08ZM169.41,24.8c3.86-1.07,6-3.77,6-7.63,0-4.91-3.59-8-9.38-8H154.67V34.76h3.8V25.58h6.45l6.48,9.2h4.44l-7-9.82Zm-10.95-2.5V12.6h7.17c3.74,0,5.88,1.77,5.88,4.84s-2.29,4.86-5.84,4.86Z M29,2.26a4.67,4.67,0,0,0-8,0L14.42,13.53A32.21,32.21,0,0,1,32.17,40.19H27.55A27.68,27.68,0,0,0,12.09,17.47L6,28a15.92,15.92,0,0,1,9.23,12.17H4.62A.76.76,0,0,1,4,39.06l2.94-5a10.74,10.74,0,0,0-3.36-1.9l-2.91,5a4.54,4.54,0,0,0,1.69,6.24A4.66,4.66,0,0,0,4.62,44H19.15a19.4,19.4,0,0,0-8-17.31l2.31-4A23.87,23.87,0,0,1,23.76,44H36.07a35.88,35.88,0,0,0-16.41-31.8l4.67-8a.77.77,0,0,1,1.05-.27c.53.29,20.29,34.77,20.66,35.17a.76.76,0,0,1-.68,1.13H40.6q.09,1.91,0,3.81h4.78A4.59,4.59,0,0,0,50,39.43a4.49,4.49,0,0,0-.62-2.28Z"
            ></path>
          </svg>
        </h1>

        <p>Get started by sending us a sample error:</p>
        <button
          type="button"
          style={{
            padding: '12px',
            cursor: 'pointer',
            backgroundColor: '#AD6CAA',
            borderRadius: '4px',
            border: 'none',
            color: 'white',
            fontSize: '14px',
            margin: '18px',
          }}
          onClick={async () => {
            await Sentry.startSpan(
              {
                name: 'Example Frontend Span',
                op: 'test',
              },
              async () => {
                const res = await fetch('/api/sentry-example-api');
                if (!res.ok) {
                  throw new Error('Sentry Example Frontend Error');
                }
              }
            );
          }}
        >
          Throw error!
        </button>

        <p>
          Next, look for the error on the{' '}
          <a href="https://heyinc.sentry.io/issues/?project=4506675767803904">
            Issues Page
          </a>
          .
        </p>
        <p style={{ marginTop: '24px' }}>
          For more information, see{' '}
          <a href="https://docs.sentry.io/platforms/javascript/guides/nextjs/">
            https://docs.sentry.io/platforms/javascript/guides/nextjs/
          </a>
        </p>
      </main>
    </div>
  );
}
```

### Steps to Reproduce

I am trying to migrate v8 from v7 in my project with next@14.2.4 and deploy to Cloudflare Pages.
It used to work all fine while using v7 SDK, but after migrating v8, it stops flushing error caused in route handler.
And it's only in the Cloudflare Pages Edge runtime, local dev server works fine. Also client errors captured in both local and Cloudflare Pages.

Here's a migrating steps I have tried;

1. Steps up 7.120.2 before migrating v8
2. Enabled `instrumentationHook` in next.config.mjs
3. Made instrumentation.ts that loads different config files by each nodejs/edge runtime. It worked all OK at this time.
4. `npx @sentry/migr8` and installed SDK 8.47.0
5. build by `npx @cloudflare/next-on-pages` failed
6. downgrade SDK v8.35.0 build successfully. (ref: https://github.com/cloudflare/next-on-pages/issues/678) but it did not flush events in Edge runtime routes (/api/sentry-example-api).
7. upgrade SDK v8.47.0 and build with `npx @cloudflare/next-on-pages --disableChunksDedup` . Build successfully, though the bundle size is super high, still doesn't flush events in Edge runtime.

I am doubting the compatibility with Cloudflare Pages and the SDK.


### Expected Result

Flushes errors in Cloudflare Pages Edge runtime, like route handlers.

### Actual Result

Only client errors are captured in the Cloudflare Pages.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Support Next.js on Cloudflare Pages (OpenNext) #14931

Is there an existing issue for this?

How do you use Sentry?

Which SDK are you using?

SDK Version

Framework Version

Link to Sentry event

Reproduction Example/SDK Setup

Configs

next.config.mjs

instrumentation.ts

sentry.edge.config.ts

deploy-action.yaml

App Code

app/api/sentry-example-api/route.ts

app/sentry-example-page/page.tsx

Steps to Reproduce

Expected Result

Actual Result

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Uh oh!

Support Next.js on Cloudflare Pages (OpenNext) #14931

Description

Is there an existing issue for this?

How do you use Sentry?

Which SDK are you using?

SDK Version

Framework Version

Link to Sentry event

Reproduction Example/SDK Setup

Configs

next.config.mjs

instrumentation.ts

sentry.edge.config.ts

deploy-action.yaml

App Code

app/api/sentry-example-api/route.ts

app/sentry-example-page/page.tsx

Steps to Reproduce

Expected Result

Actual Result

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions