Next.js App Router support roadmap

[lforst]

Note: You can already start using the Sentry Next.js SDK with Next.js 13 and the app directory. We add more features/fixes as time goes on.

For ideas, questions and discussions go here: #7999

What?

Relates to: #6290

We would like to provide first-class support for the Next.js 13 app directory.

How?

The following things need to be done to support the app directory, ordered by priority:

Tasks

Beta Give feedback

1. Check the Status Quo and eliminate blockers that prevent people from installing Sentry + app dir today(Next13 app dir support #6290) From testing a bit nothing seems to block people from installing Sentry + the app dir. The SDK simply doesn't report errors (as of v7.31.0).
2. Inject Sentry.init() into the app dir browser bundle (feat(nextjs): Add browser SDK to app directory browser bundle #6812)
3. Inject Sentry.init() into the app dir server bundle (feat(nextjs): Add SDK to serverside app directory  #6927)
4. Auto-wrap server components to track errors (feat(nextjs): Add auto-wrapping for server components #6953)
5. Add performance monitoring Next.js 13 app dir server components #7176
   Package: nextjs Status: Backlog Type: Improvement +3
   
6. Continue traces for Next.js 13 server components #7179
   Package: nextjs Status: Backlog Type: Improvement +3
   
7. NEXT_REDIRECT and NEXT_NOT_FOUND errors in Next.js app dir #7641
   Package: nextjs Type: Bug +2
   
8. feat(nextjs): Add Undici integration automatically #7648
   +0
   
9. Next.js 13 app dir API route handlers #7228
   Package: nextjs Type: Improvement +2
   
10. Track navigation transactions for Next.js 13 app dir #7180
    Package: nextjs Type: Improvement +2
    
11. Update wizard to work OOTB with app dir
12. Performance tracking for server components on edge
13. Add support for Next.js server actions #9458
    Package: nextjs +1
    
14. Record request data for all Next.js serverside features #9568
    Package: nextjs Type: Improvement +2
    
15. Instrument Next.js App Directory error.js files #7181
    Package: nextjs Type: Improvement +2
    
16. Instrument Next.js App Router generation functions #9570
    Package: nextjs +1
    

[mpereira]

Are there any hacks that folks working with Next.js 13 "app directory"-based applications could use in the meantime?

I tried something similar to what @fernandops26 reported in this issue, in addition to having a client component in app/layout.js that configured Sentry. That seems to work in development, but not in applications deployed to Vercel.

[lawrencejones]

Leaving a note to say we're super happy to test this out on our app, if you wanted someone to test-run any docs/feature-branches before you release it more widely!

[lforst]

Are there any hacks that folks working with Next.js 13 "app directory"-based applications could use in the meantime?

I tried something similar to what @fernandops26 reported in this issue, in addition to having a client component in app/layout.js that configured Sentry. That seems to work in development, but not in applications deployed to Vercel.

@mpereira The newest version of the SDK will track errors that happen on the client-side. The server-side is in progress but still needs some work. I haven't really experimented with a hack for the server-side but I think you can just call Sentry.init somewhere in a server component and it should start tracking errors that happen (haven't even tried that though).

[lforst]

@lawrencejones We will happily take you up on that! Thanks! It's usually the biggest challenge to consider all the edge cases people have in their apps when pushing updates to the Next.js SDK which is admittedly quite deep reaching.

We're planning on releasing server-side support soon. We can publish an alpha version for that and could ping you to try it out if that works for you.

[lawrencejones]

Just seen your replies: this all sounds great, very keen on the alpha!

Since my last message I'd noticed a new patch version including the client side changes and upgraded our app to use them. I'm seen errors and traces reported to Sentry from the client, so looks like you've nailed that part (not seeing them from our production Vercel deployment but I think that's a config issue on our side).

Just let me know when you have something ready and I'll get right on it.

[switz]

I'm seeing client side errors on my self hosted next.js deployment (not vercel). Thanks for the update!

[switz]

I'm seeing this error actually, since pulling in the latest version: #5667

Anyone know of a fix?

edit: I should add, I'm seeing it on the client, in the browser console. On both dev and prod.

[lforst]

@switz in version 7.33.0?

[switz]

yeah

$ cat package.json | grep sentry
    "@sentry/browser": "^7.33.0",
    "@sentry/nextjs": "^7.33.0",
    "@sentry/tracing": "^7.33.0",

[lforst]

@switz hm, can you share your Sentry.init calls? Thanks!

[lforst]

@lawrencejones We just released a new beta version of the SDK with server-side app directory support. Feel free to try it out!

While shouldn't capture any errors happening in server components automatically yet, it should allow you to call the Sentry API (like captureException and startTransaction) from within server components.

[lawrencejones]

Hey team 👋 getting back on the next.js/webpack/Sentry train this afternoon, so going to give the beta version a whirl and let you know how things go.

[lawrencejones]

Just upgraded and tried this out. I don't know if I'm doing this wrong, but adding this to my server component isn't creating new Sentries:

export default async function Page() {
  const summary = await getSummary();

  console.log(Sentry.captureException(new Error("oh no, the pig is sick")));

  const tx = Sentry.startTransaction({ name: "What a pretty pig" });
  const span = tx.startChild({
    op: "task",
    description: "taking the pig to market",
  });

  span.finish();
  tx.finish();
  ...
}

Curiously, just throwing the error in the SSR component does trigger a Sentry:

export default async function Page() {
  throw new Error("oh no, the pig is sick");
}

This is all running in dev mode. Will test it with a production build now, see if that makes any difference.

[lawrencejones]

Ah, fun. Production builds seem to be obfuscating the error, which makes it seem like it's not working, but I assume that's just a next.js thing I need to sort.

The obfuscated error still makes its way to Sentry using a production build running on my local machine, though:

Is this what you'd expect? Obviously you said captureException would work and it seems not to, but interested if this gives you more details to run with.

[lforst]

@lawrencejones Yeah that's just how Next.js is propagating server component errors to the frontend. May I ask for the error that's not reported ('what a pretty pig'), do you happen to have an error boundary in place?

[lforst]

@lawrencejones weird, on my end captureException works but just throwing doesn't :D wondering what might be going on here...

[StevenLangbroek]

Is there any guidance as to how to set up the new error.tsx Client Component?

[lforst]

@StevenLangbroek We have yet to build proper instrumentation for it. It's being tracked here: #7181

In the meanwhile you should just be able to call Sentry.captureException() inside the error component.

[AbhiPrasad]

app directory 0 config route handlers auto-instrumentation: https://changelog.getsentry.com/announcements/nextjs-sdk-now-supports-route-handlers

[Syammed2429]

@vinayman Session replay is supported! Do you have issues?

I actually found a way to resolve my issue so all good! Thank you for the support.

I do have another question - I could not find it in the docs, but is there anyway we can export data from the Session Replay? Or are there any docs you can point me to detailing this @lforst ?

How did you resolved it?

[nghiepdev]

It appears that @sentry/[email protected] is causing a warning: "Critical dependency: require function is used in a way in which dependencies cannot be statically extracted".

[AbhiPrasad]

Hey @nghiepdev, could you open a GitHub issue and fill out the template so we can start to investigate? Your next config + Next.js version is the biggest things we need to help here. Is this just a warning, or does it block builds as well? Do you notice anything about runtime with it? Thanks!

[subvertallchris]

@AbhiPrasad I'm seeing the same as @nghiepdev. Opened an issue here since it's been a while and I don't think another issue was opened: #9120

[lforst]

For the most part, the Next.js App Router is now fully supported. Thanks for your continuous feedback and support in trying out new features!

There are still a few upstream shortcomings that we need to iron out with Meta and Vercel, namely:

• Connecting server components to the frontend for initial page loads (Trace pageloads on Next.js app router #9571)
• Recording React Server Component error digests on the backend so client errors resulting from server components can be properly connected (Working with Next.js RSC Error digests #9474)

Moving forward, if you spot any gaps in instrumentation, please let us know here, or feel free to open a new issue in this repository. Thanks!