React Hooks issue with react-router-v6 integration

[alexabidri]

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 package are you using?

@sentry/react

SDK Version

7.2.0

Framework Version

7.2.0

Steps to Reproduce

1. Starting a react application with Vite.js in dev mode with react-refresh
2. Adding a simple Application like this one

import React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, useLocation, useNavigationType, createRoutesFromChildren, matchRoutes, Routes, Route } from 'react-router-dom';
import * as Sentry from '@sentry/react';
import { BrowserTracing } from '@sentry/tracing';
import { APP_ENVIRONMENT, SENTRY_DSN } from './config';

Sentry.init({
 dsn: SENTRY_DSN,
 integrations: [
 new BrowserTracing({
 routingInstrumentation: Sentry.reactRouterV6Instrumentation(React.useEffect, useLocation, useNavigationType, createRoutesFromChildren, matchRoutes),
 }),
 ],
 environment: APP_ENVIRONMENT,
 tracesSampleRate: 1.0,
});

const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);


function render() {
 const container = document.getElementById('root');
 if (!container) {
 return null;
 }
 const root = createRoot(container);
 root.render(
 <React.StrictMode>
 <BrowserRouter>
 <SentryRoutes>
 <Route path="/" element={<React.Fragment />} />
 </SentryRoutes>
 </BrowserRouter>
 </React.StrictMode>,
 );
}

(() => {
 render();
})();

Same code is in the official doc of Sentry https://docs.sentry.io/platforms/javascript/guides/react/configuration/integrations/react-router/
3. The app starts normally in dev mode.
4. As soon as I perform one modification, the front-end application crash completely. I need to close the tab and stop the application.

When I remove

new BrowserTracing({
 routingInstrumentation: Sentry.reactRouterV6Instrumentation(React.useEffect, useLocation, useNavigationType, createRoutesFromChildren, matchRoutes)
})

from the sentry integrations, everything goes back to normal

Expected Result

When I do a change in local while I am developing, I should see my changes in live without my app crashing. I should be able to use BrowserTracing with Sentry without my app having issues

Actual Result

Warning: React has detected a change in the order of Hooks called by SentryRoutes. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

There is issue in the order of hooks execution while adding the BrowserTracing from Sentry.

Vite.js config to start the app.

import { defineConfig, loadEnv } from 'vite';
import { visualizer } from 'rollup-plugin-visualizer';
import react from '@vitejs/plugin-react';
import svgrPlugin from 'vite-plugin-svgr';

export default defineConfig(({ mode }) => {
 const env = loadEnv(mode, process.cwd());

 // expose .env as process.env instead of import.meta since jest does not import meta yet
 const envWithProcessPrefix = Object.entries(env).reduce((prev, [key, val]) => {
 return {
 ...prev,
 ['process.env.' + key]: `"${val}"`,
 };
 }, {});

 return {
 server: {
 port: 3000,
 },
 preview: {
 port: 8080,
 },
 define: envWithProcessPrefix,
 build: {
 sourcemap: true,
 outDir: 'build',
 minify: 'esbuild',
 },
 plugins: [
 react(),
 svgrPlugin({
 svgrOptions: {
 // ...svgr options (https://react-svgr.com/docs/options/)
 },
 }),
 visualizer(),
 ],
 };
});

[AbhiPrasad]

@onurtemizkan could you take a look at this?

[onurtemizkan]

Thanks for reporting this @alexabidri.

I can't reproduce this on a clean Vite.js project using the configuration / example above.
Could you provide a reproduction repo for us to work on please?

[alexabidri]

@onurtemizkan No problem, here it is https://github.com/alexabidri/vite-sentry 🙏

1 - Start the app with npm run dev
2 - Modify the wording TEST into something else here https://github.com/alexabidri/vite-sentry/blob/main/src/App.tsx#L11, it will trigger react hot reloading
3 - Your app will crash and the browser also with, with a issue related to Sentry React Router v6 integration (hooks issue)

[jandominik]

I can confirm same problem with react without Vite (react create app).
@sentry/react 7.8.1
@sentry/tracing 7.8.1
react 18.2.0
react-router-dom 6.3.0

[AbhiPrasad]

@jandominik could you try passing debug: true to your Sentry.init call and seeing what the SDK logs out?

This is how we define SentryRoutes. Not sure why it's causing issues - we do any conditional calls of hooks:

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

Lines 130 to 180 in 31fd072

	const SentryRoutes: React.FC<P> = (props: P) => {
	const location = _useLocation();
	const navigationType = _useNavigationType();
	_useEffect(() => {
	// Performance concern:
	// This is repeated when <Routes /> is rendered.
	routes = _createRoutesFromChildren(props.children);
	isBaseLocation = true;
	if (activeTransaction) {
	const [name, source] = getNormalizedName(routes, location, _matchRoutes);
	activeTransaction.setName(name);
	activeTransaction.setMetadata({ source });
	}
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [props.children]);
	_useEffect(() => {
	if (isBaseLocation) {
	if (activeTransaction) {
	activeTransaction.finish();
	}
	return;
	}
	if (_startTransactionOnLocationChange && (navigationType === 'PUSH' || navigationType === 'POP')) {
	if (activeTransaction) {
	activeTransaction.finish();
	}
	const [name, source] = getNormalizedName(routes, location, _matchRoutes);
	activeTransaction = _customStartTransaction({
	name,
	op: 'navigation',
	tags: SENTRY_TAGS,
	metadata: {
	source,
	},
	});
	}
	}, [props.children, location, navigationType, isBaseLocation]);
	isBaseLocation = false;
	// @ts-ignore Setting more specific React Component typing for `R` generic above
	// will break advanced type inference done by react router params
	return <Routes {...props} />;
	};

Maybe this is an issue with Hot Module Reloading?

We've backlogged this for now - but PRs/debugging is welcome if anyone can take a look!