reactRouterV6BrowserTracingIntegration does not work with unstable_HistoryRouter

[nmoinvaz]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/react

SDK Version

7.113.0

Framework Version

React 18

Link to Sentry event

No response

SDK Setup

No response

Steps to Reproduce

There doesn't appear to be any way to use unstable_HistoryRouter with Sentry.reactRouterV6BrowserTracingIntegration. I've tried all the recommendations from the Sentry.io docs for the integration. It was mentioned in #4118, but none of the workarounds work.

The code comments for Sentry.reactRouterV6BrowserTracingIntegration appear to be out-of-date and mentions "history", but the function itself doesn't accept it:

sentry-javascript/packages/react/src/reactrouterv6.tsx

Lines 61 to 67 in d5a3ded

	/**
	* A browser tracing integration that uses React Router v3 to instrument navigations.
	* Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
	*/
	export function reactRouterV6BrowserTracingIntegration(
	options: Parameters<typeof browserTracingIntegration>[0] & ReactRouterOptions,
	): Integration {

index.jsx:

import "core-js";
import {createRoot} from "react-dom/client";
import {unstable_HistoryRouter as HistoryRouter} from "react-router-dom";
import queryString from "query-string";
import {createBrowserHistory} from "history";

/*
 * Preserves query string parameters using a custom createBrowserHistory implementation
 * https://stackoverflow.com/questions/43613140
 */

function preserveQueryParameters(history, preserve, location) {
  const currentQuery = queryString.parse(history.location.search);
  if (currentQuery) {
    const preservedQuery = {};
    for (let p of preserve) {
      const v = currentQuery[p];
      if (v) {
        preservedQuery[p] = v;
      }
    }
    if (location.search) {
      Object.assign(preservedQuery, queryString.parse(location.search));
    }
    location.search = queryString.stringify(preservedQuery);
  }
  return location;
}

function createLocationDescriptorObject(location, state) {
  return typeof location === "string" ?
    {pathname: location, state} : location;
}

function createPreserveQueryHistory(createHistory, queryParameters) {
  return (options) => {
    const history = createHistory(options);
    const oldPush = history.push, oldReplace = history.replace;

    history.push = (path, state) =>
      oldPush.apply(history,
        [preserveQueryParameters(history, queryParameters,
          createLocationDescriptorObject(path, state))]);
    history.replace = (path, state) =>
      oldReplace.apply(history,
        [preserveQueryParameters(history, queryParameters,
          createLocationDescriptorObject(path, state))]);

    return history;
  };
}

export const routeHistory = createPreserveQueryHistory(createBrowserHistory, ["myQueryParam"])();

// Routes and Route are contained in a component inside App
createRoot(document.getElementById("root"))
  .render(
    <HistoryRouter history={routeHistory}>
      <App/>
    </HistoryRouter>
  );

• I've tried just using SentryRoutes variable as mentioned in the docs.
• I've also tried this in my Sentry.init config without luck:

Sentry.reactRouterV5BrowserTracingIntegration({ routeHistory }),

• The only thing I can get to work is Sentry.browserTracingIntegration().

Expected Result

I expect there to be some way to hook react-router-dom with Sentry.io when using unstable_HistoryRouter

Actual Result

Doesn't report browser tracing events to Sentry.io.

[nmoinvaz]

Maybe I was wrong in my assumption it wasn't working. I was expecting to see something on Sentry.io that indicated that React Router was being integrated specially.

[mydea]

For reference, this should document how to use it - the jsdoc is out of date, you are right! https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/

[nmoinvaz]

If I see in Discover that it has event with the title /pages/manifest/p/*/start does that mean React Router integration is working right? The docs seem to suggest (at least for some versions) there is supposed to be parameterized results somewhere.

[mydea]

If I see in Discover that it has event with the title "/pages/manifest/p/*/start` does that mean React Router integration is working right? The docs seem to suggest (at least for some versions) there is supposed to be parameterized results somewhere.

yes, that sounds about right! 👍

[nmoinvaz]

Thanks for your quick response! Does it display those parameterized values anywhere on the website? Like in my example after /p/ is the name or id of the item.