ref: SentryTrackingProvider

Author: TkDodo

static/app/main.tsx

@@ -1,15 +1,14 @@
-import {useMemo, useState} from 'react';
+import {useState} from 'react';
 import {createBrowserRouter, RouterProvider} from 'react-router-dom';
 import {wrapCreateBrowserRouterV6} from '@sentry/react';
 import {ReactQueryDevtools} from '@tanstack/react-query-devtools';
 
 import {AppQueryClientProvider} from 'sentry/appQueryClient';
-import {TrackingContextProvider} from 'sentry/components/core/trackingContext';
 import {OnboardingContextProvider} from 'sentry/components/onboarding/onboardingContext';
 import {ThemeAndStyleProvider} from 'sentry/components/themeAndStyleProvider';
 import {USE_REACT_QUERY_DEVTOOL} from 'sentry/constants';
 import {routes} from 'sentry/routes';
-import HookStore from 'sentry/stores/hookStore';
+import {SentryTrackingProvider} from 'sentry/tracking';
 import {DANGEROUS_SET_REACT_ROUTER_6_HISTORY} from 'sentry/utils/browserHistory';
 
 import {buildReactRouter6Routes} from './utils/reactRouter6Compat/router';
@@ -24,16 +23,14 @@ function buildRouter() {
 
 function Main() {
   const [router] = useState(buildRouter);
-  const useButtonTracking = HookStore.get('react-hook:use-button-tracking')[0];
-  const trackingContextValue = useMemo(() => ({useButtonTracking}), [useButtonTracking]);
 
   return (
     <AppQueryClientProvider>
       <ThemeAndStyleProvider>
         <OnboardingContextProvider>
-          <TrackingContextProvider value={trackingContextValue}>
+          <SentryTrackingProvider>
             <RouterProvider router={router} />
-          </TrackingContextProvider>
+          </SentryTrackingProvider>
         </OnboardingContextProvider>
         {USE_REACT_QUERY_DEVTOOL && (
           <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />

static/app/tracking.tsx

@@ -0,0 +1,15 @@
+import {useMemo} from 'react';
+
+import {TrackingContextProvider} from 'sentry/components/core/trackingContext';
+import HookStore from 'sentry/stores/hookStore';
+
+export function SentryTrackingProvider({children}: {children: React.ReactNode}) {
+  const useButtonTracking = HookStore.get('react-hook:use-button-tracking')[0];
+  const trackingContextValue = useMemo(() => ({useButtonTracking}), [useButtonTracking]);
+
+  return (
+    <TrackingContextProvider value={trackingContextValue}>
+      {children}
+    </TrackingContextProvider>
+  );
+}