docs(js): streamline React Router v6 and v7 documentation #13138

inventarSarah · 2025-03-27T07:56:00Z

DESCRIBE YOUR PR

Updated the React Router v6 and v7 documentation:

reduced the amount of alerts
reduced the amount of text at the top of the page to help users get to the first code snippet more quickly
- I did this by merging the content that was originally at the top into the sections below; this also allows us to rely on the code snippets provided to give needed information (e.g. we don't need to list the imports as they are included in the code)

IS YOUR CHANGE URGENT?

Help us prioritize incoming PRs by letting us know when the change needs to go live.

Urgent deadline (GA date, etc.):
Other deadline:
None: Not urgent, can wait up to 1 week+

SLA

Teamwork makes the dream work, so please add a reviewer to your PRs.
Please give the docs team up to 1 week to review your PR unless you've added an urgent due date to it.
Thanks in advance for your help!

PRE-MERGE CHECKLIST

Make sure you've checked the following before merging your changes:

Checked Vercel preview for correctness, including links
PR was reviewed and approved by any necessary SMEs (subject matter experts)
PR was reviewed and approved by a member of the Sentry docs team

EXTRA RESOURCES

Sentry Docs contributor guide

vercel · 2025-03-27T07:56:05Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sentry-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 1, 2025 11:13am

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
changelog	⬜️ Ignored (Inspect)	Visit Preview		Apr 1, 2025 11:13am
develop-docs	⬜️ Ignored (Inspect)	Visit Preview		Apr 1, 2025 11:13am

docs/platforms/javascript/guides/react/features/react-router/v6.mdx

coolguyzone

LGTM! 🤙

docs/platforms/javascript/guides/react/features/react-router/v6.mdx

mydea · 2025-03-28T10:33:41Z

docs/platforms/javascript/guides/react/features/react-router/v6.mdx

- Using `wrapCreateBrowserRouterV6` or `wrapCreateMemoryRouterV6`
-
-</Alert>
+_React Router v6 support is included in the `@sentry/react` package since version `7`._


Suggested change

_React Router v6 support is included in the `@sentry/react` package since version `7`._

IMHO we can drop this, we are on v9 now 😅

mydea · 2025-03-28T10:37:13Z

docs/platforms/javascript/guides/react/features/react-router/v6.mdx

 description: "Learn about Sentry's React Router v6 integration."
 sidebar_order: 20
 ---



Would it make sense to lead with something like this:

Suggested change

You can instrument your React Router v6 setup with Sentry. Depending on how you use react-router, slightly different setups are needed:

<TableOfContents ignoreIds={["custom-error-boundary", "next-steps"]} />

Additionally, make sure to [Setup a Custom Error Boundary](#custom-error-boundary) to ensure rendering errors are captured to Sentry.

and something similar for react-router v7 :)

@mydea Good point! I updated the start of the page with an adapted version of your suggestion.

Sadly, the TableOfContents component does not work with our structure as it seems to be created to work with the SDK options pages, and our structure here is quite different -> I created an issue #13159 so we can consider upgrading the functionality of this component

should be fixed here #13171 😅

the toc is now included - looks good!

mydea · 2025-03-28T10:38:20Z

docs/platforms/javascript/guides/react/features/react-router/v6.mdx

+  need error boundaries to handle errors in event handlers.
 </Alert>

 To send errors to Sentry while using a custom error boundary, use the `Sentry.captureException` method:


Not related to any change in this PR but generally: We should clarify here, because it is not clear to me: What If I am not using a custom error boundary, what should I do then? Should I add one to capture errors, or not? cc @lforst & @AbhiPrasad

I think for react router you need to add one, otherwise component-related errors get swallowed by the router itself.

yeah, so let's reword this (can be a different PR as well) to make it clear you def should add this, not just if you're using a custom boundary!

I added a sentence to the first paragraph in this section (v6 and v7 pages) -- hope this is what you meant (if not, let's chat later today @mydea :) )

…act/router-clean-up

codecov · 2025-03-31T07:01:51Z

Bundle Report

Changes will decrease total bundle size by 15 bytes (-0.0%) ⬇️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
sentry-docs-server-cjs	10.61MB	-9 bytes (-0.0%) ⬇️
sentry-docs-client-array-push	9.45MB	-6 bytes (-0.0%) ⬇️

Affected Assets, Files, and Routes:

view changes for bundle: sentry-docs-client-array-push

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`static/chunks/pages/_app-*.js`	-3 bytes	868.67kB	-0.0%
`static/chunks/8931-*.js`	-3 bytes	397.42kB	-0.0%
`server/middleware-*.js`	5.55kB	6.55kB	555.3% ⚠️
`server/middleware-*.js`	-5.55kB	1.0kB	-84.74%
*`static/-.js`** (New)	578 bytes	578 bytes	100.0% 🚀
*`static/-.js`** (New)	77 bytes	77 bytes	100.0% 🚀
~~*`static/4H_mQVYD1xFY-.js`*~~ (Deleted)*	-578 bytes	0 bytes	-100.0% 🗑️
~~*`static/4H_mQVYD1xFY-.js`*~~ (Deleted)*	-77 bytes	0 bytes	-100.0% 🗑️

view changes for bundle: sentry-docs-server-cjs

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`1729.js`	-3 bytes	1.58MB	-0.0%
`../instrumentation.js`	-3 bytes	911.63kB	-0.0%
`9523.js`	-3 bytes	887.68kB	-0.0%

…act/router-clean-up

mydea · 2025-04-01T10:38:50Z

docs/platforms/javascript/guides/react/features/react-router/v6.mdx

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

-### Custom Error Boundaries
+## Usage With Custom Error Boundaries


Suggested change

## Usage With Custom Error Boundaries

## Set Up A Custom Error Boundary

IMHO I would rephrase this like this, as everybody should follow this step?

Updated this on v6 and v7 pages

mydea · 2025-04-01T10:39:24Z

docs/platforms/javascript/guides/react/features/react-router/v6.mdx

 <Alert>
-  Note, that this only applies to render method and lifecycle errors since React
-  doesn't need error boundaries to handle errors in event handlers.
+  This only applies to render method and lifecycle errors since React doesn't
+  need error boundaries to handle errors in event handlers.
 </Alert>


Is this section helpful? What does it tell me? 😅 I should set this up anyhow to get all errors, I'd say?

I mean this whole alert here!

Removed it vor v6 and v7 👍

mydea · 2025-04-01T10:39:56Z

docs/platforms/javascript/guides/react/features/react-router/v7.mdx

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

-### Custom Error Boundaries
+## Usage With Custom Error Boundaries


Same as above?

mydea · 2025-04-01T10:40:05Z

docs/platforms/javascript/guides/react/features/react-router/v7.mdx

+In production, these errors won't surface unless captured manually. If you **don't** have a custom error boundary in place, `react-router` will create a default one that "swallows" all errors.\
+Hence, to capture these errors with Sentry in production, we strongly recommend to implement a custom error boundary.

 <Alert>


Same as above, do we need this alert?

streamline React Router v6 and v7 documentation

a8ed4d4

inventarSarah requested review from chargome, coolguyzone and mydea March 27, 2025 07:56

vercel bot deployed to Preview – sentry-docs March 27, 2025 08:01 View deployment

inventarSarah marked this pull request as ready for review March 27, 2025 08:12

coolguyzone reviewed Mar 27, 2025

View reviewed changes

docs/platforms/javascript/guides/react/features/react-router/v6.mdx Outdated Show resolved Hide resolved

coolguyzone reviewed Mar 27, 2025

View reviewed changes

docs/platforms/javascript/guides/react/features/react-router/v6.mdx Outdated Show resolved Hide resolved

coolguyzone reviewed Mar 27, 2025

View reviewed changes

docs/platforms/javascript/guides/react/features/react-router/v6.mdx Outdated Show resolved Hide resolved

coolguyzone reviewed Mar 27, 2025

View reviewed changes

docs/platforms/javascript/guides/react/features/react-router/v6.mdx Outdated Show resolved Hide resolved

coolguyzone approved these changes Mar 27, 2025

View reviewed changes

mydea reviewed Mar 28, 2025

View reviewed changes

docs/platforms/javascript/guides/react/features/react-router/v6.mdx Outdated Show resolved Hide resolved

mydea reviewed Mar 28, 2025

View reviewed changes

inventarSarah added 2 commits March 31, 2025 07:10

Merge branch 'master' of github.com:getsentry/sentry-docs into smi/re…

8584284

…act/router-clean-up

PR feedback

a5ff0ca

vercel bot deployed to Preview – sentry-docs March 31, 2025 07:11 View deployment

inventarSarah requested a review from mydea March 31, 2025 07:21

inventarSarah mentioned this pull request Apr 1, 2025

fix: Improve <TableOfContents> to allow empty sections #13171

Merged

inventarSarah added 2 commits April 1, 2025 10:10

Merge branch 'master' of github.com:getsentry/sentry-docs into smi/re…

8d509ae

…act/router-clean-up

update custom error boundary section; add ToC

3c4f6b5

vercel bot deployed to Preview – sentry-docs April 1, 2025 08:34 View deployment

Merge branch 'master' of github.com:getsentry/sentry-docs into smi/re…

4c68e87

…act/router-clean-up

vercel bot deployed to Preview – develop-docs April 1, 2025 10:02 View deployment

vercel bot deployed to Preview – sentry-docs April 1, 2025 10:10 View deployment

mydea reviewed Apr 1, 2025

View reviewed changes

update error boundary content

0417ac9

vercel bot deployed to Preview – sentry-docs April 1, 2025 11:13 View deployment

inventarSarah merged commit 78869b0 into master Apr 1, 2025
11 checks passed

inventarSarah deleted the smi/react/router-clean-up branch April 1, 2025 14:18

github-actions bot locked and limited conversation to collaborators Apr 17, 2025

+You can instrument your React Router v6 setup with Sentry. Depending on how you use react-router, slightly different setups are needed:
+<TableOfContents ignoreIds={["custom-error-boundary", "next-steps"]} />
+Additionally, make sure to [Setup a Custom Error Boundary](#custom-error-boundary) to ensure rendering errors are captured to Sentry.

	## Usage With Custom Error Boundaries
	## Set Up A Custom Error Boundary

Uh oh!

docs(js): streamline React Router v6 and v7 documentation #13138

docs(js): streamline React Router v6 and v7 documentation #13138

Uh oh!

Conversation

inventarSarah commented Mar 27, 2025

DESCRIBE YOUR PR

IS YOUR CHANGE URGENT?

SLA

PRE-MERGE CHECKLIST

EXTRA RESOURCES

Uh oh!

vercel bot commented Mar 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coolguyzone left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Mar 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Assets Changed:

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

vercel bot commented Mar 27, 2025 •

edited

Loading

codecov bot commented Mar 31, 2025 •

edited

Loading