Document lazyRouteManifest option for React Router v6 and v7#16397
Document lazyRouteManifest option for React Router v6 and v7#16397onurtemizkan wants to merge 2 commits intomasterfrom
lazyRouteManifest option for React Router v6 and v7#16397Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
inventarSarah
left a comment
There was a problem hiding this comment.
Overall, looks good to me 🌟
Added a few suggestions
| To ensure accurate transaction names, you can provide a static list of route patterns via the `lazyRouteManifest` option. When provided, Sentry uses this manifest as the primary source for determining transaction names without needing to wait for route modules to load. | ||
|
|
||
| <Alert level="warning" title="Important"> | ||
| `lazyRouteManifest` requires `enableAsyncRouteHandlers: true` to be set on the integration. |
There was a problem hiding this comment.
I don't think this alert is needed because we clearly state the dependency below + it's in the code example
| }); | ||
| ``` | ||
|
|
||
| Add the `enableAsyncRouteHandlers` and `lazyRouteManifest` options to your `reactRouterV6BrowserTracingIntegration` configuration. Keep the `lazyRouteManifest` array in sync with your route definitions. Any route that doesn't match a pattern in the manifest will fall back to the default behavior, which may result in incomplete transaction names until the route is visited. |
There was a problem hiding this comment.
| Add the `enableAsyncRouteHandlers` and `lazyRouteManifest` options to your `reactRouterV6BrowserTracingIntegration` configuration. Keep the `lazyRouteManifest` array in sync with your route definitions. Any route that doesn't match a pattern in the manifest will fall back to the default behavior, which may result in incomplete transaction names until the route is visited. | |
| Make sure to keep the `lazyRouteManifest` array in sync with your route definitions: if you add, remove, or change routes in your app, update this list accordingly. Any route that doesn't match a pattern in the manifest will fall back to the default behavior, which may result in incomplete transaction names until the route is visited. |
Let's move the first sentence above the code snippet.
I also wanted to clarify what we mean by "in sync" but maybe that's not necessary -- just a suggestion :)
| }); | ||
| ``` | ||
|
|
||
| Add the `enableAsyncRouteHandlers` and `lazyRouteManifest` options to your `reactRouterV6BrowserTracingIntegration` configuration. Keep the `lazyRouteManifest` array in sync with your route definitions. Any route that doesn't match a pattern in the manifest will fall back to the default behavior, which may result in incomplete transaction names until the route is visited. |
There was a problem hiding this comment.
q: in the SDK PR you wrote:
This manifest is primarily for lazy routes, but the users can also add their non-lazy routes here for convenience or consistency.
Do you think this is clear to our users, or should we also add this to the docs (maybe in a note alert)?
|
|
||
| Now, Sentry should generate `pageload`/`navigation` transactions with parameterized transaction names (for example, `/teams/:teamid/user/:userid`), where applicable. This is only needed at the top level of your app, unlike React Router v4/v5, which required wrapping every `<Route />` you wanted parametrized. | ||
|
|
||
| ## Static Route Manifest |
There was a problem hiding this comment.
Could it make sense to create an include for this?
| `lazyRouteManifest` requires `enableAsyncRouteHandlers: true` to be set on the integration. | ||
|
|
||
| </Alert> | ||
|
|
There was a problem hiding this comment.
Let's add the explanation here:
| To use `lazyRouteManifest`, you need to set `enableAsyncRouteHandlers: true` in your `reactRouterV6BrowserTracingIntegration` configuration: |
|
|
||
| ## Static Route Manifest | ||
|
|
||
| _Available in `@sentry/react` version `10.39.0` and above._ |
Documents: getsentry/sentry-javascript#19086