feat(nextjs): Client-side parameterized routes

[chargome]

closes #16683

Implements the app-router parameterization by leveraging the injected manifest within our existing app-router instrumentation.

I just added the same tests for every Next.js e2e-test version + turbopack

[github-actions]

size-limit report 📦

Path	Size	% Change	Change
@sentry/browser	23.88 kB	-	-
@sentry/browser - with treeshaking flags	22.35 kB	-	-
@sentry/browser (incl. Tracing)	39.75 kB	-	-
@sentry/browser (incl. Tracing, Replay)	77.88 kB	-	-
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags	67.61 kB	-	-
@sentry/browser (incl. Tracing, Replay with Canvas)	82.58 kB	-	-
@sentry/browser (incl. Tracing, Replay, Feedback)	94.68 kB	-	-
@sentry/browser (incl. Feedback)	40.58 kB	-	-
@sentry/browser (incl. sendFeedback)	28.56 kB	-	-
@sentry/browser (incl. FeedbackAsync)	33.46 kB	-	-
@sentry/react	25.61 kB	-	-
@sentry/react (incl. Tracing)	41.72 kB	-	-
@sentry/vue	28.31 kB	-	-
@sentry/vue (incl. Tracing)	41.53 kB	-	-
@sentry/svelte	23.9 kB	-	-
CDN Bundle	25.18 kB	-	-
CDN Bundle (incl. Tracing)	39.44 kB	-	-
CDN Bundle (incl. Tracing, Replay)	75.44 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback)	80.91 kB	-	-
CDN Bundle - uncompressed	73.54 kB	-	-
CDN Bundle (incl. Tracing) - uncompressed	116.99 kB	-	-
CDN Bundle (incl. Tracing, Replay) - uncompressed	231.18 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed	243.99 kB	-	-
@sentry/nextjs (client)	43.75 kB	+0.99%	+428 B 🔺
@sentry/sveltekit (client)	40.2 kB	-	-
@sentry/node	167.64 kB	-	-
@sentry/node - without tracing	100.33 kB	+0.01%	+1 B 🔺
@sentry/aws-serverless	128.44 kB	-0.01%	-1 B 🔽

View base workflow run

[AbhiPrasad]

I'd like to see maybeParameterizeRoute be split up.

export const maybeParameterizeRoute = (route: string): string | undefined {
  // caches manifest (and handles edge cases where global isn't defined)
  const manifest = getManifest();
  if (!manifest) {
    return undefined;
  }
  
  const { staticRoutes, dynamicRoutes } = manifest;
  if (!Array.isArray(staticRoutes) || !Array.isArray(dynamicRoutes)) {
      return undefined;
  }
  
  const matches = findMatchingRoutes(route, staticRoutes, dynamicRoutes);
  // We can always do the `sort()` call, it will short-circuit when it has one array item
  // might make sense to also cache `getRouteSpecificity` results
  return matches.sort((a, b) => getRouteSpecificity(a) - getRouteSpecificity(b))[0];
}

function findMatchingRoutes(route: string, staticRoutes: string[], dynamicRoutes: string[]): string[] {
  const matches: string[] = [];

  // first do short-circuit operations with staticRoutes
  
  // then test on regex with dynamicRoutes
  // maybe we can filter dynamicRoutes before we run regex? To get rid of 
  // dynamicRoutes that will definitely never match?
}

[chargome]

@AbhiPrasad I did some cursor ping pong and went down the route of caching manifest, route matches and regexes instead of pre-filtering as this would have been failure-prone with catchall routes