How to use Sentry error reporting with React router v6? · getsentry/sentry-javascript · Discussion #6912

dcastil
Jan 24, 2023

Hi everyone! 👋

I'm upgrading to React router v6 and wonder how Sentry error reporting is supposed to work with it. There doesn't seem to be an obvious way to do it.

React router uses an own error boundary for errors thrown in route components and loaders, so an error boundary at the top of the render tree (parent of router) won't catch errors that happen in a child of a route component.
If I use the error catching mechanism of React router (useRouterError in an errorElement), then I don't get access to the component stack trace.
Rendering an error boundary within each route component seems error prone (a route might get forgotten) and then errors within loaders need to be treated separately.
The Sentry documentation about the React router integration seems to only be concerned with performance tracing, but not with error reporting.

Is there something I'm missing? 🤔

Replies: 3 comments 5 replies

smeubank
Mar 5, 2023

hi @dcastil

sorry for the late reply. Were you ever able to figure this out? Could you provide your example init code?

2 replies

@dcastil

dcastil Mar 8, 2023
Author

Hey, no worries! Our current tradeoff is that we don't get reports about the React component tree anymore so that we could upgrade. Our current setup looks basically like this:

import { captureException, wrapCreateBrowserRouter } from '@sentry/react'
import { useEffect } from 'react'
import { createRoot } from 'react-dom/client'
import { createBrowserRouter, RouterProvider, useRouteError } from 'react-router-dom'
const router = wrapCreateBrowserRouter(createBrowserRouter)([
 {
 path: '/',
 errorElement: <SentryRouteErrorFallback />,
 children: [
 {
 path: '/',
 element: <CalendarPage />,
 },
 {
 path: '/login',
 element: <LoginPage />,
 },
 // ... more routes here
 ],
 },
])
function SentryRouteErrorFallback() {
 const routeError = useRouteError()
 useEffect(() => {
 captureException(routeError, { level: 'fatal' })
 }, [routeError])
 return <ErrorFallback />
}
createRoot(document.getElementById('app')!).render(<RouterProvider router={router} />)

React Router only provides the possibility to add an errorElement which gets access to the error via useRouteError.

I wonder whether there's something Sentry can do in wrapCreateBrowserRouter to make it somewhat easy to get access to the React component tree for Sentry reports.

@smeubank

smeubank Mar 10, 2023

@AbhiPrasad with the init are you able to see if we have anything to provide extra?

Zwyx
Mar 6, 2024

Thank you for this discussion and for providing your solution.

There is one thing that doesn't seem easy to implement: showing the Sentry crash-report modal, which is usually done with the showDialog prop:

<Sentry.ErrorBoundary fallback={...} showDialog>
 ...
</Sentry.ErrorBoundary>

You wouldn't have a solution for that by any chance?

I am so surprised there is so few resources about using React Router 6 with Sentry 🤔

I've created this issue in the docs repository.

0 replies

A partial workaround: set up your routes so everything is nested under one top-level route. In that top-level route component, wrap everything in Sentry's ErrorBoundary. You'll still need set errorElement on the router to the SentryRouteErrorFallback component above, but that will only be used for routing errors (e.g. no routes match the url). Everything else will go through Sentry's ErrorBoundary, so you'll get the extra context of the react component tree and the ability to use showDialog.

3 replies

@Zwyx

Uh oh!

How to use Sentry error reporting with React router v6? #6912

Uh oh!

Uh oh!

Replies: 3 comments · 5 replies

Uh oh!

Uh oh!

Uh oh!

dcastil Mar 8, 2023 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 3 comments 5 replies

dcastil Mar 8, 2023
Author