chore(shared): Track usage of react hooks

.changeset/violet-symbols-go.md

@@ -0,0 +1,9 @@
+---
+'@clerk/shared': patch
+---
+
+Track usage of react hooks on development instances.
+- `useReverification`
+- `useSession`
+- `useSessionList`
+- `useUser`

packages/shared/src/react/hooks/useReverification.ts

@@ -119,7 +119,6 @@ function createReverificationHandler(params: CreateReverificationHandlerParams)
             afterVerificationCancelled: cancel,
           });
         } else {
-          params.telemetry?.record(eventMethodCalled('UserVerificationCustomUI'));
           params.onNeedsReverification({
             cancel,
             complete,
@@ -199,6 +198,12 @@ export const useReverification: UseReverification = (fetcher, options) => {
   const fetcherRef = useRef(fetcher);
   const optionsRef = useRef(options);
 
+  telemetry?.record(
+    eventMethodCalled('useReverification', {
+      onNeedsReverification: Boolean(options?.onNeedsReverification),
+    }),
+  );
+
   const handleReverification = useMemo(() => {
     const handler = createReverificationHandler({
       openUIComponent: __internal_openReverification,

packages/shared/src/react/hooks/useSession.ts

@@ -1,10 +1,11 @@
 import type { PendingSessionOptions, UseSessionReturn } from '@clerk/types';
 
-import { useAssertWrappedByClerkProvider, useSessionContext } from '../contexts';
-import { useClerk } from './useClerk';
+import { eventMethodCalled } from '../../telemetry/events/method-called';
+import { useAssertWrappedByClerkProvider, useClerkInstanceContext, useSessionContext } from '../contexts';
 
 type UseSession = (options?: PendingSessionOptions) => UseSessionReturn;
 
+const hookName = `useSession`;
 /**
  * The `useSession()` hook provides access to the current user's [`Session`](https://clerk.com/docs/references/javascript/session) object, as well as helpers for setting the active session.
  *
@@ -55,10 +56,12 @@ type UseSession = (options?: PendingSessionOptions) => UseSessionReturn;
  * </Tabs>
  */
 export const useSession: UseSession = (options = {}) => {
-  useAssertWrappedByClerkProvider('useSession');
+  useAssertWrappedByClerkProvider(hookName);
 
   const session = useSessionContext();
-  const clerk = useClerk();
+  const clerk = useClerkInstanceContext();
+
+  clerk.telemetry?.record(eventMethodCalled(hookName));
 
   if (session === undefined) {
     return { isLoaded: false, isSignedIn: undefined, session: undefined };

packages/shared/src/react/hooks/useSessionList.ts

@@ -1,7 +1,9 @@
 import type { UseSessionListReturn } from '@clerk/types';
 
+import { eventMethodCalled } from '../../telemetry/events/method-called';
 import { useAssertWrappedByClerkProvider, useClerkInstanceContext, useClientContext } from '../contexts';
 
+const hookName = 'useSessionList';
 /**
  * The `useSessionList()` hook returns an array of [`Session`](https://clerk.com/docs/references/javascript/session) objects that have been registered on the client device.
  *
@@ -46,10 +48,13 @@ import { useAssertWrappedByClerkProvider, useClerkInstanceContext, useClientCont
  * </Tabs>
  */
 export const useSessionList = (): UseSessionListReturn => {
-  useAssertWrappedByClerkProvider('useSessionList');
+  useAssertWrappedByClerkProvider(hookName);
 
   const isomorphicClerk = useClerkInstanceContext();
   const client = useClientContext();
+  const clerk = useClerkInstanceContext();
+
+  clerk.telemetry?.record(eventMethodCalled(hookName));
 
   if (!client) {
     return { isLoaded: false, sessions: undefined, setActive: undefined };

packages/shared/src/react/hooks/useUser.ts

@@ -1,7 +1,9 @@
 import type { UseUserReturn } from '@clerk/types';
 
-import { useAssertWrappedByClerkProvider, useUserContext } from '../contexts';
+import { eventMethodCalled } from '../../telemetry/events/method-called';
+import { useAssertWrappedByClerkProvider, useClerkInstanceContext, useUserContext } from '../contexts';
 
+const hookName = 'useUser';
 /**
  * The `useUser()` hook provides access to the current user's [`User`](https://clerk.com/docs/references/javascript/user) object, which contains all the data for a single user in your application and provides methods to manage their account. This hook also allows you to check if the user is signed in and if Clerk has loaded and initialized.
  *
@@ -126,9 +128,12 @@ import { useAssertWrappedByClerkProvider, useUserContext } from '../contexts';
  * </Tabs>
  */
 export function useUser(): UseUserReturn {
-  useAssertWrappedByClerkProvider('useUser');
+  useAssertWrappedByClerkProvider(hookName);
 
   const user = useUserContext();
+  const clerk = useClerkInstanceContext();
+
+  clerk.telemetry?.record(eventMethodCalled(hookName));
 
   if (user === undefined) {
     return { isLoaded: false, isSignedIn: undefined, user: undefined };