Investigate NextResponse.rewrite for route parameterization #17843
Description
Problem Statement
Oftentimes I want to differentiate navigation spans of different pages that have the same path shape:
/:locale-> index page/palm-tree-> product details page/sansevieria-> product details page/accessories-> static page
I need this when I'm building pageload dashboard widgets, and currently I can't easily filter spans based on the page (ex. index, product details, accessories, etc.).
Neither navigation or pageload spans contain anything that describes which page in my project rendered them. Examples from my project:
/pothos-> Product Details (dynamic)navigationspan/sansevieria-> Product Details (dynamic)navigationspan/:locale-> Index (static)pageloadspan/accessories-> Accessories (static)navigationspan
The closest I can get to building a widget that targets specific pages is to use a lot of span.description is not '***' filters, but no one wants to do that.
Solution Brainstorm
One approach that comes to mind is to modify the root span in each page and add custom attributes to it:
const activeSpan = Sentry.getActiveSpan();
const rootSpan = activeSpan && Sentry.getRootSpan(activeSpan);
if (rootSpan) {
rootSpan.setAttribute('page', 'product-details');
}The safest way would be to put this in a useEffect inside of my Next.js page component so it doesn't run on every render. But there's a catch - since Next.js renders the pages on the server by default, to achieve this I'm going to have to create a client component, mark it with 'use client' so it can run the effect, and then use it in the page. A whole separate client component just to add a single attribute to the root span. We should come up with an easier way to do this.
Additional Context
Technically there are two issues described in this GitHub issue:
- Root spans of Next.js pages do not contain info on which page component rendered them
- Modifying / adding attributes to the root span in a server-rendered Next.js page is cumbersome and involves creating an empty client component
I understand this has a lot to do with how Next.js works, how it renders pages, how it executes code on the server vs the client, but we should look into improving the two things mentioned above.
Here's the repo I'm working in: https://github.com/nikolovlazar/catalyst-sentry
Tip: React with 👍 to help prioritize this improvement. Please use comments to provide useful context, avoiding +1 or me too, to help us triage it.