Next.js Edge Runtime `fetch` tracing

[lforst]

Problem Statement

The Next.js SDK currently doesn't trace fetch calls on the edge runtime:

• No spans for outgoing requests
• No trace headers on outgoing requests

Solution Brainstorm

A quick test showed that using our browser implementation to patch fetch works for local builds but doesn't on Vercel.

Potential solutions:

• Find a solution to monkey patch fetch through collaboration with Vercel
• Wrap individual fetch calls via a webpack loader + AST magic

[zcarlson-gmgt]

@lforst - I'm curious about the scope of this issue. Does it cover Edge API routes not sending Sentry issues entirely? Your note about it working for local builds made me want to verify. Or is this a separate issue?

Example Repro Steps (repo link)

• Setup a new Next.js starting project (ex. next@13.1.6)
• Install @sentry/nextjs@^7.50.0
• Switch the example api file over to Edge runtime (add the code below)
  export const config = { runtime: 'edge', }
• Start project in dev mode (yarn dev)
• Use Postman to send a GET request to http://localhost:3000/api/sentry-example-api
• Error never shows up in Sentry
• Remove the edge runtime config and re-test with Postman. Error shows up in Sentry as expected

Side note: The error does show up in Sentry when navigating to that url in a browser but I'm assuming that's because it's a client side error

[lforst]

@zcarlson-gmgt this issue is not related to what you think it is. This is about instrumenting fetch if called within an edge route.

As for your example: Edge error reporting currently doesn't work in dev mode. I could verify with your example that it does indeed work for prod builds.

[zcarlson-gmgt]

@lforst oh wow thank you! Glad it was simple!