From 5258539762bfea40f990e819c2252c26de563a3f Mon Sep 17 00:00:00 2001 From: panteliselef Date: Sun, 8 Jun 2025 23:56:38 +0300 Subject: [PATCH 1/5] chore(shared): Track usage of hooks --- packages/shared/src/react/hooks/useReverification.ts | 1 + packages/shared/src/react/hooks/useSession.ts | 11 +++++++---- packages/shared/src/react/hooks/useSessionList.ts | 7 ++++++- packages/shared/src/react/hooks/useUser.ts | 9 +++++++-- 4 files changed, 21 insertions(+), 7 deletions(-) diff --git a/packages/shared/src/react/hooks/useReverification.ts b/packages/shared/src/react/hooks/useReverification.ts index 9d1ef9ae2d6..1274c9161f3 100644 --- a/packages/shared/src/react/hooks/useReverification.ts +++ b/packages/shared/src/react/hooks/useReverification.ts @@ -113,6 +113,7 @@ function createReverificationHandler(params: CreateReverificationHandlerParams) * On success resolve the pending promise * On cancel reject the pending promise */ + // Do we need to log telemetry here as well ? params.openUIComponent?.({ level: level, afterVerification: complete, 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 }; From 2462b9e1a7a7d1809c7c030bc0ce7ed851852b48 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Mon, 9 Jun 2025 00:01:19 +0300 Subject: [PATCH 2/5] add changeset --- .changeset/fresh-regions-stand.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fresh-regions-stand.md diff --git a/.changeset/fresh-regions-stand.md b/.changeset/fresh-regions-stand.md new file mode 100644 index 00000000000..72d2dc2442b --- /dev/null +++ b/.changeset/fresh-regions-stand.md @@ -0,0 +1,5 @@ +--- +'@clerk/shared': patch +--- + +Track telemetry of hooks From dfcb8ebc004faafe80b6c74e6963a6f93175dcec Mon Sep 17 00:00:00 2001 From: panteliselef Date: Mon, 23 Jun 2025 12:05:22 +0300 Subject: [PATCH 3/5] Add reverification logs --- packages/shared/src/react/hooks/useReverification.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/shared/src/react/hooks/useReverification.ts b/packages/shared/src/react/hooks/useReverification.ts index 1274c9161f3..616ed232c24 100644 --- a/packages/shared/src/react/hooks/useReverification.ts +++ b/packages/shared/src/react/hooks/useReverification.ts @@ -120,7 +120,6 @@ function createReverificationHandler(params: CreateReverificationHandlerParams) afterVerificationCancelled: cancel, }); } else { - params.telemetry?.record(eventMethodCalled('UserVerificationCustomUI')); params.onNeedsReverification({ cancel, complete, @@ -200,6 +199,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, From 2c591bdee3cdaef68b1e7cc03df491a3624726b5 Mon Sep 17 00:00:00 2001 From: panteliselef Date: Mon, 23 Jun 2025 12:05:48 +0300 Subject: [PATCH 4/5] remove comment --- packages/shared/src/react/hooks/useReverification.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/shared/src/react/hooks/useReverification.ts b/packages/shared/src/react/hooks/useReverification.ts index 616ed232c24..182f8c2f417 100644 --- a/packages/shared/src/react/hooks/useReverification.ts +++ b/packages/shared/src/react/hooks/useReverification.ts @@ -113,7 +113,6 @@ function createReverificationHandler(params: CreateReverificationHandlerParams) * On success resolve the pending promise * On cancel reject the pending promise */ - // Do we need to log telemetry here as well ? params.openUIComponent?.({ level: level, afterVerification: complete, From dc253a2af34b0703b5ab1117167d100625ee8e4b Mon Sep 17 00:00:00 2001 From: panteliselef Date: Mon, 23 Jun 2025 12:08:21 +0300 Subject: [PATCH 5/5] add changeset --- .changeset/fresh-regions-stand.md | 5 ----- .changeset/violet-symbols-go.md | 9 +++++++++ 2 files changed, 9 insertions(+), 5 deletions(-) delete mode 100644 .changeset/fresh-regions-stand.md create mode 100644 .changeset/violet-symbols-go.md diff --git a/.changeset/fresh-regions-stand.md b/.changeset/fresh-regions-stand.md deleted file mode 100644 index 72d2dc2442b..00000000000 --- a/.changeset/fresh-regions-stand.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@clerk/shared': patch ---- - -Track telemetry of hooks 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`