Migrating v8 stops flushing errors in edge runtime #14931

tttttahiti · 2025-01-08T02:57:19Z

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

8.47.0

Framework Version

[email protected]

Link to Sentry event

No response

Reproduction Example/SDK Setup

Configs

next.config.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

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

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

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

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

'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 [email protected] 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;

Steps up 7.120.2 before migrating v8
Enabled instrumentationHook in next.config.mjs
Made instrumentation.ts that loads different config files by each nodejs/edge runtime. It worked all OK at this time.
npx @sentry/migr8 and installed SDK 8.47.0
build by npx @cloudflare/next-on-pages failed
downgrade SDK v8.35.0 build successfully. (ref: [🐛 Bug]: Incompatible with Next.js instrumentation cloudflare/next-on-pages#678) but it did not flush events in Edge runtime routes (/api/sentry-example-api).
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.

The text was updated successfully, but these errors were encountered:

chargome · 2025-01-08T09:35:04Z

Hey @tttttahiti, tbh we have not tested this setup fully yet but could you try using our Cloudflare SDK on the server? So in your server and edge config you would call init of @sentry/cloudflare – but you keep @sentry/nextjs for the client.

tttttahiti · 2025-01-08T10:58:01Z

Hey @chargome, Thank you for the suggestion. I'll give the @sentry/cloudflare SDK a try for the server-side and edge configurations, while keeping @sentry/nextjs for the client as you suggested.

I'll report back with the results.

gregberge · 2025-01-08T13:49:25Z

I got the same issue, I will try that @kimdanielarthur-cowlabs

GitbookIO/gitbook#2698

gregberge · 2025-01-08T14:21:10Z

@kimdanielarthur-cowlabs it does not work. I am trying with Cloudflare SDK @chargome : GitbookIO/gitbook#2699

gregberge · 2025-01-08T14:49:09Z

I can't make it work.

chargome · 2025-01-08T15:29:54Z

@gregberge in your PR you did not call init – my suggestion was to import @sentry/cloudflare within your server and edge config files and call init there.

gregberge · 2025-01-08T15:31:06Z

@gregberge in your PR you did not call init – my suggestion was to import @sentry/cloudflare within your server and edge config files and call init there.

init is not exposed from @sentry/cloduflare, I tried several things but it does not work well.

chargome · 2025-01-08T15:35:03Z

@gregberge ah I missed that – will have a talk with @AbhiPrasad tomorrow (he built the cloudflare sdk) and see how we could make this setup work.

@kimdanielarthur-cowlabs your issue is most likely related to #14780

gregberge · 2025-01-08T15:36:01Z

I spotted that I was using @sentry/browser client-side, could it be the issue?

I simplified my setup here: GitbookIO/gitbook#2701

I also added logs, I will try to see what going on on Cloudflare.

gregberge · 2025-01-09T08:16:29Z

I investigated and the instrumentation.ts seems to not be called at all with next-on-pages.

chargome · 2025-01-09T08:51:21Z

@gregberge in general you will only need to use @sentry/nextjs(which includes @sentry/browser)

instrumentation.ts should be called, but there are some related issues as well: cloudflare/next-on-pages#678

Anyway, I'll try to find some time and set this up myself to have a way forward for us on how to support nextjs+cloudflare.

gregberge · 2025-01-09T11:28:28Z

@chargome I opened an issue on cloudflare/next-on-pages#930

tttttahiti · 2025-01-10T04:00:58Z

As @gregberge mentioned, init is not exposed from @sentry/cloudflare so I couldn't call that from instrumentation.ts.
And as I wrote in the repro steps, when I was using @senty/[email protected] with instrumentation.ts and @cloudflare/next-on-pages it worked in edge runtime. Since @sentry/nexjs@8 it broke.

chargome · 2025-01-10T14:24:47Z

We'll need an upstream fix for cloudflare/next-on-pages#678, otherwise our otel instrumentation will not work.

getsantry bot added the Waiting for: Product Owner label Jan 8, 2025

getsantry bot added this to GitHub Issues with 👀 3 Jan 8, 2025