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:

- [x] ~Check the Status Quo and eliminate blockers that prevent people from installing Sentry + `app` dir *today*(https://github.com/getsentry/sentry-javascript/issues/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).
- [x] Inject `Sentry.init()` into the `app` dir browser bundle (https://github.com/getsentry/sentry-javascript/pull/6812)
- [x] Inject `Sentry.init()` into the `app` dir server bundle (https://github.com/getsentry/sentry-javascript/pull/6927)
- [x] Auto-wrap server components to track errors (https://github.com/getsentry/sentry-javascript/pull/6953)
- [ ] https://github.com/getsentry/sentry-javascript/issues/7176
- [ ] https://github.com/getsentry/sentry-javascript/issues/7179
- [ ] https://github.com/getsentry/sentry-javascript/issues/7641
- [ ] https://github.com/getsentry/sentry-javascript/pull/7648
- [ ] https://github.com/getsentry/sentry-javascript/issues/7228
- [ ] https://github.com/getsentry/sentry-javascript/issues/7180
- [x] Update wizard to work OOTB with app dir
- [x] Performance tracking for server components on edge
- [ ] https://github.com/getsentry/sentry-javascript/issues/9458
- [ ] https://github.com/getsentry/sentry-javascript/issues/9568
- [ ] https://github.com/getsentry/sentry-javascript/issues/7181
- [ ] https://github.com/getsentry/sentry-javascript/issues/9570

[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.