diff --git a/.changeset/violet-symbols-go.md b/.changeset/violet-symbols-go.md new file mode 100644 index 00000000000..2960cb4c84e --- /dev/null +++ b/.changeset/violet-symbols-go.md @@ -0,0 +1,9 @@ +--- +'@clerk/shared': patch +--- + +Track usage of react hooks on development instances. +- `useReverification` +- `useSession` +- `useSessionList` +- `useUser` diff --git a/packages/shared/src/react/hooks/useReverification.ts b/packages/shared/src/react/hooks/useReverification.ts index 9d1ef9ae2d6..182f8c2f417 100644 --- a/packages/shared/src/react/hooks/useReverification.ts +++ b/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, diff --git a/packages/shared/src/react/hooks/useSession.ts b/packages/shared/src/react/hooks/useSession.ts index e904ff6cf3c..71ed9669c1c 100644 --- a/packages/shared/src/react/hooks/useSession.ts +++ b/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; * */ 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 }; diff --git a/packages/shared/src/react/hooks/useSessionList.ts b/packages/shared/src/react/hooks/useSessionList.ts index ddf10ab0ad6..821a48855aa 100644 --- a/packages/shared/src/react/hooks/useSessionList.ts +++ b/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 * */ 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 }; diff --git a/packages/shared/src/react/hooks/useUser.ts b/packages/shared/src/react/hooks/useUser.ts index 990a34f7493..24604f17851 100644 --- a/packages/shared/src/react/hooks/useUser.ts +++ b/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'; * */ 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 };