ref: move use-button-tracking from sentry hooks to react context (#95220)

To be able to decouple our `core/components` from getsentry specific
logic, we have to stop using sentry-hooks inside `core/components`.

However, button tracking logic is defined in getentry and injected via
`'react-hook:use-button-tracking'`, which tracks button click events in
sentry itself.

The react idiomatic way to inject specific logic into a “generic”
library is “dependency injection” via react context provided by the
generic library.

In our case, that means `core/components/button` exposes a
`<TrackingContextProvider>` that consumers can render and pass a
function that will be called when a button is clicked. This is similar
to how react-aria allows link behaviour to be injected via their
`RouterProvider`.

This is what I’ve been doing in the base branch:
- #93940

Now here’s the thing: sentry hooks do pretty much the same thing for us
as react context - at least for things that we only use within react.
But that means we’ve now created another layer of indirection.
Basically, the flow is:

```
HookStore --> React Context --> Button
```

the sentry specific `SentryTrackingProvider` basically takes the value
we’ve put into the hook-store and forwards it to the agnostic
`TrackingContextProvider` coming from our core components:

```
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>
  );
}
```

This layer of indirection feels unnecessary, and passing hooks around as
values is technically against the rules of react (see [never pass hooks
around as regular
values](https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values)).

---

In this PR, I’m trying to remove that indirection and just do:

```
React Context --> Button
```

At the top level, where we `import('getsentry/registerHooks')`, we now
not only get back `registerHooks`, but also a `SentryHooksProvider` that
directly renders sentry+react specific things. Right now, it’s just the
`TrackingContext`, but it could be other things, too:

```
export function SentryHooksProvider({children}: {children?: React.ReactNode}) {
  const buttonTracking = useButtonTracking();
  const trackingContextValue = useMemo(() => ({buttonTracking}), [buttonTracking]);

  return (
    <TrackingContextProvider value={trackingContextValue}>
      {children}
    </TrackingContextProvider>
  );
}
```

We then take this Provider and have to drill it down a bunch of levels
(this is the main drawback tbh), and render it as a top-level provider
in our root route. This is necessary to be able to call hooks like
`useRouter()` inside the custom hooks.

With this, we’d have:

- one layer to inject functionality into react instead of two.
- using a standardized system (react context) instead of our own
abstraction.
- calling the `useButtonTracking` hook directly instead of passing it
around as a value
- removed the `react-hook:use-button-tracking` sentry hook

If we agree to this approach, I’d like to follow up with removing all
sentry hooks starting with `react-hook:`, and potentially even more
sentry hooks that are only used inside react.

Please let me know if I’m missing something, e.g. if those hooks are
also used by self-hosted customers to show their own things?

Author: TkDodo

knip.config.ts

@@ -9,6 +9,7 @@ const productionEntryPoints = [
   // dynamic imports _not_ recognized by knip
   'static/app/bootstrap/{index,initializeMain}.tsx',
   'static/gsApp/initializeBundleMetrics.tsx',
+  'static/gsApp/registerHooks.tsx',
   // defined in webpack.config pipelines
   'static/app/utils/statics-setup.tsx',
   'static/app/views/integrationPipeline/index.tsx',

static/app/bootstrap/initializeApp.tsx

@@ -10,14 +10,17 @@ import {processInitQueue} from './processInitQueue';
 import {renderMain} from './renderMain';
 import {renderOnDomReady} from './renderOnDomReady';
 
-export function initializeApp(config: Config) {
+export function initializeApp(
+  config: Config,
+  SentryHooksProvider?: React.ComponentType<React.PropsWithChildren>
+) {
   initializeSdk(config);
   // Initialize the config store after the SDK, so we can log errors to Sentry during config initialization if needed. N.B. This mutates the config slightly
   commonInitialization(config);
 
   // Used for operational metrics to determine that the application js
   // bundle was loaded by browser.
   metric.mark({name: 'sentry-app-init'});
-  renderOnDomReady(renderMain);
+  renderOnDomReady(renderMain(SentryHooksProvider));
   processInitQueue();
 }

static/app/bootstrap/initializeMain.tsx

@@ -2,7 +2,10 @@ import type {Config} from 'sentry/types/system';
 
 import {initializeLocale} from './initializeLocale';
 
-export async function initializeMain(config: Config) {
+export async function initializeMain(
+  config: Config,
+  SentryHooksProvider?: React.ComponentType<React.PropsWithChildren>
+) {
   // This needs to be loaded as early as possible, or else the locale library can
   // throw an exception and prevent the application from being loaded.
   //
@@ -12,5 +15,5 @@ export async function initializeMain(config: Config) {
   // This is dynamically imported because we need to make sure locale is configured
   // before proceeding.
   const {initializeApp} = await import('./initializeApp');
-  initializeApp(config);
+  initializeApp(config, SentryHooksProvider);
 }

static/app/bootstrap/renderMain.tsx

@@ -1,20 +1,26 @@
+import type * as React from 'react';
+
 import {ROOT_ELEMENT} from 'sentry/constants';
 import Main from 'sentry/main';
 
 import {renderDom} from './renderDom';
 
-export function renderMain() {
-  try {
-    renderDom(Main, `#${ROOT_ELEMENT}`, {});
-  } catch (err) {
-    if (err.message === 'URI malformed') {
-      // eslint-disable-next-line no-console
-      console.error(
-        new Error(
-          'An unencoded "%" has appeared, it is super effective! (See https://github.com/ReactTraining/history/issues/505)'
-        )
-      );
-      window.location.assign(window.location.pathname);
+export function renderMain(
+  SentryHooksProvider?: React.ComponentType<React.PropsWithChildren>
+) {
+  return () => {
+    try {
+      renderDom(Main, `#${ROOT_ELEMENT}`, {SentryHooksProvider});
+    } catch (err) {
+      if (err.message === 'URI malformed') {
+        // eslint-disable-next-line no-console
+        console.error(
+          new Error(
+            'An unencoded "%" has appeared, it is super effective! (See https://github.com/ReactTraining/history/issues/505)'
+          )
+        );
+        window.location.assign(window.location.pathname);
+      }
     }
-  }
+  };
 }

static/app/components/core/button/useButtonFunctionality.tsx

@@ -13,16 +13,7 @@ export function useButtonFunctionality(props: ButtonProps | LinkButtonProps) {
     props['aria-label'] ??
     (typeof props.children === 'string' ? props.children : undefined);
 
-  const buttonTracking = useButtonTracking({
-    analyticsEventName: props.analyticsEventName,
-    analyticsEventKey: props.analyticsEventKey,
-    analyticsParams: {
-      priority: props.priority,
-      href: 'href' in props ? props.href : undefined,
-      ...props.analyticsParams,
-    },
-    'aria-label': accessibleLabel || '',
-  });
+  const buttonTracking = useButtonTracking();
 
   const handleClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
     // Don't allow clicks when disabled or busy
@@ -32,7 +23,16 @@ export function useButtonFunctionality(props: ButtonProps | LinkButtonProps) {
       return;
     }
 
-    buttonTracking();
+    buttonTracking({
+      analyticsEventName: props.analyticsEventName,
+      analyticsEventKey: props.analyticsEventKey,
+      analyticsParams: {
+        priority: props.priority,
+        href: 'href' in props ? props.href : undefined,
+        ...props.analyticsParams,
+      },
+      'aria-label': accessibleLabel || '',
+    });
     // @ts-expect-error at this point, we don't know if the button is a button or a link
     props.onClick?.(e);
   };

static/app/components/core/trackingContext.tsx

@@ -2,9 +2,9 @@ import {createContext, useContext} from 'react';
 
 import type {DO_NOT_USE_ButtonProps as ButtonProps} from './button/types';
 
-const defaultButtonTracking = (props: ButtonProps) => {
+const defaultButtonTracking = () => {
   const hasAnalyticsDebug = window.localStorage?.getItem('DEBUG_ANALYTICS') === '1';
-  return () => {
+  return (props: ButtonProps) => {
     const hasCustomAnalytics =
       props.analyticsEventName || props.analyticsEventKey || props.analyticsParams;
     if (hasCustomAnalytics && hasAnalyticsDebug) {
@@ -21,13 +21,13 @@ const defaultButtonTracking = (props: ButtonProps) => {
 };
 
 const TrackingContext = createContext<{
-  useButtonTracking?: (props: ButtonProps) => () => void;
+  buttonTracking?: (props: ButtonProps) => void;
 }>({});
 
 export const TrackingContextProvider = TrackingContext.Provider;
 
-export const useButtonTracking = (props: ButtonProps) => {
+export const useButtonTracking = () => {
   const context = useContext(TrackingContext);
 
-  return context.useButtonTracking?.(props) ?? defaultButtonTracking(props);
+  return context.buttonTracking ?? defaultButtonTracking();
 };

static/app/index.tsx

@@ -91,11 +91,11 @@ async function app() {
   // getsentry augments Sentry's application through a 'hook' mechanism. Sentry
   // provides various hooks into parts of its application. Thus all getsentry
   // functionality is initialized by registering its hook functions.
-  const {default: registerHooks} = await registerHooksImport;
+  const {default: registerHooks, SentryHooksProvider} = await registerHooksImport;
   registerHooks();
 
   const {initializeMain} = await initalizeMainImport;
-  initializeMain(config);
+  initializeMain(config, SentryHooksProvider);
 
   const {initializeBundleMetrics} = await initalizeBundleMetricsImport;
   initializeBundleMetrics();

static/app/main.tsx

@@ -8,29 +8,30 @@ import {OnboardingContextProvider} from 'sentry/components/onboarding/onboarding
 import {ThemeAndStyleProvider} from 'sentry/components/themeAndStyleProvider';
 import {USE_REACT_QUERY_DEVTOOL} from 'sentry/constants';
 import {routes} from 'sentry/routes';
-import {SentryTrackingProvider} from 'sentry/tracking';
 import {DANGEROUS_SET_REACT_ROUTER_6_HISTORY} from 'sentry/utils/browserHistory';
 
 import {buildReactRouter6Routes} from './utils/reactRouter6Compat/router';
 
-function buildRouter() {
+function buildRouter(SentryHooksProvider?: React.ComponentType<React.PropsWithChildren>) {
   const sentryCreateBrowserRouter = wrapCreateBrowserRouterV6(createBrowserRouter);
-  const router = sentryCreateBrowserRouter(buildReactRouter6Routes(routes()));
+  const router = sentryCreateBrowserRouter(
+    buildReactRouter6Routes(routes(SentryHooksProvider))
+  );
   DANGEROUS_SET_REACT_ROUTER_6_HISTORY(router);
 
   return router;
 }
 
-function Main() {
-  const [router] = useState(buildRouter);
+function Main(props: {
+  SentryHooksProvider?: React.ComponentType<React.PropsWithChildren>;
+}) {
+  const [router] = useState(() => buildRouter(props.SentryHooksProvider));
 
   return (
     <AppQueryClientProvider>
       <ThemeAndStyleProvider>
         <OnboardingContextProvider>
-          <SentryTrackingProvider>
-            <RouterProvider router={router} />
-          </SentryTrackingProvider>
+          <RouterProvider router={router} />
         </OnboardingContextProvider>
         {USE_REACT_QUERY_DEVTOOL && (
           <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />

static/app/routes.tsx

@@ -42,7 +42,9 @@ import {makeLazyloadComponent as make} from './makeLazyloadComponent';
 
 const hook = (name: HookName) => HookStore.get(name).map(cb => cb());
 
-function buildRoutes() {
+function buildRoutes(
+  SentryHooksProvider: React.ComponentType<React.PropsWithChildren> = Fragment
+) {
   // Read this to understand where to add new routes, how / why the routing
   // tree is structured the way it is, and how the lazy-loading /
   // code-splitting works for pages.
@@ -2560,18 +2562,24 @@ function buildRoutes() {
   );
 
   const appRoutes = (
-    <ProvideAriaRouter>
-      <Route>
-        {experimentalSpaRoutes}
-        <Route path="/" component={errorHandler(App)}>
-          {rootRoutes}
-          {authV2Routes}
-          {organizationRoutes}
-          {legacyRedirectRoutes}
-          <Route path="*" component={errorHandler(RouteNotFound)} />
-        </Route>
+    <Route
+      component={({children}: {children: React.ReactNode}) => {
+        return (
+          <ProvideAriaRouter>
+            <SentryHooksProvider>{children}</SentryHooksProvider>
+          </ProvideAriaRouter>
+        );
+      }}
+    >
+      {experimentalSpaRoutes}
+      <Route path="/" component={errorHandler(App)}>
+        {rootRoutes}
+        {authV2Routes}
+        {organizationRoutes}
+        {legacyRedirectRoutes}
+        <Route path="*" component={errorHandler(RouteNotFound)} />
       </Route>
-    </ProvideAriaRouter>
+    </Route>
   );
 
   return appRoutes;