Unable to integrate with React Router due to basename prop

[JasonTheAdams]

• Review the documentation: https://docs.sentry.io/
• Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• Use the latest release: https://github.com/getsentry/sentry-javascript/releases
• (N/A) Provide a link to the affected event from your Sentry account

Package + Version

• @sentry/tracing

Version:

5.28.0

Description

According to the documentation when integrating with React Router (v5) we're supposed to the use the base Router component instead of the BrowserRouter component. The reason for this, I assume, is because the latter ignore the history prop.

We have an issue, however, that the BrowserRouter component has a basename prop which we make use of. If I switch to Router, then that prop no longer exists and our routes stop working.

[JasonTheAdams]

I figured out the solution to this. First, make sure you're using history version 4. If you're using this, then the BrowserRouter props are actually passed to the createBrowserHistory function under the hood, making the following the solution:

const history = createBrowserHistory({basename: '/some/path'});

// Do Sentry integration using history

function App() {
    return (
        <Router history={history}>
            App Stuff
        </Router>
    );
}

This may be worth documenting in the Sentry documentation to avoid confusion for others. As such I'll leave this open at the discretion of someone from Sentry to close.

[tzimmermann]

@JasonTheAdams Did you also observe that the route name is different on the pageload vs the navigation events? The latter strips off the basename, the former keeps it:

const history = createBrowserHistory({
    basename: "/my/base/name",
})
// pageload transaction name: /my/base/name/foo
// navigation transaction name: /foo

Did you find a solution to that issue by any chance?
I believe the problem is the different ways of getting the pathname here (location.pathname vs. history.listen()).

EDIT: I figured I better open a new issue for that: #3595