Track navigation transactions for Next.js 13 app dir

[lforst]

Problem Statement

Currently, we don't properly track page navigations for the Next.js 13 app directory.

Solution Brainstorm

Since we don't have access to Next.js router hooks anymore this is a bit tricky.

Basically, the only option I see going forward is either for us to contribute some kind of event we can hook into before react transitions start, or Vercel implements this themselves.

Vercel is also working on OTEL support - maybe we can leverage that when it comes out.

[philwolstenholme]

An event would be lovely and super useful.

In the meantime, I saw this recommendation from Tim Neutkens to use a 'watch the URL for changes' approach, which doesn't feel ideal but could be a workaround?

vercel/next.js#41745 (comment)

[lforst]

@philwolstenholme thanks for the pointer! I need to look at whether that trigger is early enough that instrumentation will make sense. I will probably get to this in the coming weeks but I am happy to hear about any findings you may have on this :)

[philwolstenholme]

Ah yes, I think it'll be too late. The Next team don't want to provide a router event because navigations can be cancelled, so if Sentry used the 'watch the URL' approach it would only include successful navigations.

[lforst]

We tried to contribute an event to Next.js that would make it possible to instrument this, but we hit a (IMO unreasonable) wall with them: vercel/next.js#46391

The solution is so easy and it would enable so many usecases...

[IGassmann]

Looks like the new docs might now present a solution for tracking route changes: https://nextjs.org/docs/app/api-reference/functions/use-router#router-events

[lforst]

@IGassmann That is neat! Just realized, shouldn't that have been possible from the beginning?

Anyhow, this approach has one small drawback: we need to execute this code in a client component. This means that users need to manually put a Sentry component in their component tree, or we need to somehow inject it during build. Not impossible, just a bit of effort.

Thanks a lot for sharing!

[philwolstenholme]

@IGassmann That is neat! Just realized, shouldn't that have been possible from the beginning?

Anyhow, this approach has one small drawback: we need to execute this code in a client component. This means that users need to manually put a Sentry component in their component tree, or we need to somehow inject it during build. Not impossible, just a bit of effort.

Thanks a lot for sharing!

Would it be an issue that this only captures successful navigations, and would only be triggered after the navigation event (presumably the URL updates only if it's successful and at the end of the process?). Better than nothing though, I suppose?

[lforst]

@IGassmann That is neat! Just realized, shouldn't that have been possible from the beginning?
Anyhow, this approach has one small drawback: we need to execute this code in a client component. This means that users need to manually put a Sentry component in their component tree, or we need to somehow inject it during build. Not impossible, just a bit of effort.
Thanks a lot for sharing!

Would it be an issue that this only captures successful navigations, and would only be triggered after the navigation event (presumably the URL updates only if it's successful and at the end of the process?). Better than nothing though, I suppose?

@philwolstenholme Ah right. That was the bigger problem we were facing originally. It's actually really important that we start tracking navigations right when they start instead of when they finish because a) want to track how long the navigations take b) we need to instrument outgoing requests for connected traces. I'll reach out to Vercel if they have any plans on making this possible.

[Lms24]

This was released in version 7.78.0 of @sentry/nextjs