Description
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(),
],
};
});