How to use Sentry error reporting with React router v6?

[dcastil]

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? 🤔

[smeubank]

hi @dcastil

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

[dcastil]

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]

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

[Zwyx]

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.

[russelldavis]

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.

[Zwyx]

Thank you. Interesting idea, but adding a top level route (which will add a bit to the start of the URL's pathname, if I understand correctly, like /app) is definitely a drawback. It might actually be easier to reimplement the dialog ourselves.

[russelldavis]

You can easily add a top level route without changing your URLs (see the docs about Pathless Routes: https://reactrouter.com/en/main/start/concepts#pathless-routes)

[Zwyx]

Ah excellent! Thank you very much for this 🙂