navigate span not show in web vistal

[vaynevayne]

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?

Self-hosted/on-premise

Which SDK are you using?

@sentry/react

SDK Version

Sentry 24.8.0

Framework Version

React17

Link to Sentry event

No response

Reproduction Example/SDK Setup

Sentry.init({
    dsn: 'https://c607880adcf9a8855a01d0da4b24f6a3@sentry.intsig.net/2',
    integrations: [
      Sentry.reactRouterV6BrowserTracingIntegration({
        useEffect: React.useEffect,
        useLocation,
        useNavigationType,
        createRoutesFromChildren,
        matchRoutes,
      }),
      Sentry.replayIntegration({
        maskAllText: false,
        blockAllMedia: false,
        networkResponseHeaders: ['Set-Cookie', 'traceid'],
        networkDetailAllowUrls: ['mifengjiaoyu.com'],
      }),
      Sentry.browserProfilingIntegration(),
    ],

    environment: process.env.REACT_APP_SENTRY,
    // Tracing
    tracesSampleRate: 1.0, //  Capture 100% of the transactions
    // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
    // tracePropagationTargets: ['localhost', /^https:\/\/yourserver\.io\/api/],
    // Session Replay
    replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
    replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
    profilesSampleRate: 1.0,
  })

Steps to Reproduce

The document says that if the react-router-dom integration is added, navigation span will be generated, but I only see pageload in sentry, which does not take effect. Is it my use? Or was it not there?
I need navigation data in the spa application,

Now, Sentry should generate pageload/navigation transactions with parameterized transaction
https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/#usage-with-useroutes-hook

Expected Result

has navigation span

Actual Result

no navigation span

[chargome]

Hey @vaynevayne, thanks for reaching out – can you paste your react-router config (e.g. how you create the routes)? Which version of the react SDK do you have installed?

[vaynevayne]

@chargome hi Here is my configuration information

// src/router/router.tsx

const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouter(createBrowserRouter)
const router = sentryCreateBrowserRouter([
    path: '/',
 // ...
])
export { router }

// src/index.tsx

import { router } from './router/router'
class Root extends React.Component {
  render() {
    // 注册 FLogger
    registerFLogger()

    return (
      <StrictMode>
        <MyErrorBoundary>
          <SWRConfig
            value={{
              use: [withToken],
              shouldRetryOnError: false,
              revalidateOnFocus: false,
              onError: error => {
                console.error(error)
              },
            }}
          >
            <Provider {...store}>
              <RouterProvider router={router} fallbackElement={<Progress />} />
            </Provider>
          </SWRConfig>
        </MyErrorBoundary>
     
      </StrictMode>
    )
  }
}

ReactDOM.render(<Root />, document.getElementById('root'))

    "react": "^17.0.2",
   "react-router-dom": "^6.24.1",

[chargome]

@vaynevayne can you show the contents of sentryCreateBrowserRouter(...? Which version of @sentry/react is installed in your project?

[vaynevayne]

@chargome "@sentry/react": "^8.33.1" and "@sentry/webpack-plugin": "^2.22.5"

const router = sentryCreateBrowserRouter([
  {
    path: '/',
  
    element: (
      <CommonProvider>
        <App />
      </CommonProvider>
    ),
    id: 'root',
    errorElement: <RouterErrorElement />,
    loader: rootLoader,
    children: [
      {
        index: true,
        Component: () => {
          const firstAuthPath = useUserStore(state => state.firstAuthPath)
          // const firstAuthPath = '/home'
          const from = useLocalStore(state => state.from)

          return <Navigate to={from || firstAuthPath}></Navigate>
        },
      },
      {
        Component: LayoutWithHeaderSidebar,
        children: [
          ...homePageRoutes,
          ...schoolRoutes,
          ...practiceRoutes,
          ...homeworkRoutes,
          ...courseRoutes,
          ...learnAnalysisRoutes,
          ...testingCenterRoutes,
          ...questionRoutes,
          ...individuatedRoutes,
          ...userRoutes,
          // ...homwPageRoutes,
          {
            path: '/composition/correct',
            element: <EssayCorrect />,
          },
        ],
      },
      {
        Component: LayoutWithHeader,
        children: [...withHeaderRoutes],
      },
      {
        Component: LayoutWithModeHeader,
        children: [...withHeaderModeRoutes],
      },
      {
        Component: LayoutWithSidebar,
        children: [],
      },
      {
        Component: LayoutWithContent,
        children: [...withContentRoutes],
      },
      {
        path: '/testError',
        element: <TestError />,
      },
    ],
  },
  {
    loader: loginLoader,
    path: '/login',
    element: (
      <CommonProvider>
        <AntdStyleProvider>
          <Suspense fallback={<Progress />}>
            <Login />
          </Suspense>
        </AntdStyleProvider>
      </CommonProvider>
    ),
    errorElement: <RouterErrorElement />,
  },
  {
    path: '/no_menus',
    loader: async () => {
      const isLogin = !!Cookies.get('token')

      if (!isLogin) {
        return redirect('/login')
      }

      // return null
      const res = await useUserStore
        .getState()
        .fetchPreData()
        .catch(err => console.error(err))

      const menus = useUserStore.getState().menus

      if (menus.length) {
        return redirect('/')
      }

      return res ?? null
    },
    element: (
      <CommonProvider>
        <Suspense fallback={<Progress />}>
          <LayoutWithoutAuth></LayoutWithoutAuth>
        </Suspense>
      </CommonProvider>
    ),
  },

  { path: '*', element: <Error404 /> },
])