diff --git a/.changeset/good-olives-unite.md b/.changeset/good-olives-unite.md new file mode 100644 index 00000000000..c9d5a85fbca --- /dev/null +++ b/.changeset/good-olives-unite.md @@ -0,0 +1,7 @@ +--- +'@clerk/shared': minor +'@clerk/clerk-js': patch +'@clerk/types': patch +--- + +Support passing additional properties to `eventPrebuiltComponentMounted()`, and ensure `withSignUp` is collected on `SignIn` mount. diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index 4eaddfe4fb4..af046478e0f 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -581,10 +581,15 @@ export class Clerk implements ClerkInterface { }), ); this.telemetry?.record( - eventPrebuiltComponentMounted('SignIn', { - ...props, - withSignUp: props?.withSignUp ?? this.#isCombinedSignInOrUpFlow(), - }), + eventPrebuiltComponentMounted( + 'SignIn', + { + ...props, + }, + { + withSignUp: props?.withSignUp ?? this.#isCombinedSignInOrUpFlow(), + }, + ), ); }; diff --git a/packages/shared/src/telemetry/events/component-mounted.ts b/packages/shared/src/telemetry/events/component-mounted.ts index a52a4a0e183..41d5bf68747 100644 --- a/packages/shared/src/telemetry/events/component-mounted.ts +++ b/packages/shared/src/telemetry/events/component-mounted.ts @@ -14,15 +14,14 @@ type EventPrebuiltComponentMounted = ComponentMountedBase & { baseTheme: boolean; }; -type EventComponentMounted = ComponentMountedBase & { - [key: string]: boolean | string; -}; +type EventComponentMounted = ComponentMountedBase & TelemetryEventRaw['payload']; /** * Helper function for `telemetry.record()`. Create a consistent event object for when a prebuilt (AIO) component is mounted. * * @param component - The name of the component. * @param props - The props passed to the component. Will be filtered to a known list of props. + * @param additionalPayload - Additional data to send with the event. * * @example * telemetry.record(eventPrebuiltComponentMounted('SignUp', props)); @@ -30,6 +29,7 @@ type EventComponentMounted = ComponentMountedBase & { export function eventPrebuiltComponentMounted( component: string, props?: Record, + additionalPayload?: TelemetryEventRaw['payload'], ): TelemetryEventRaw { return { event: EVENT_COMPONENT_MOUNTED, @@ -40,6 +40,7 @@ export function eventPrebuiltComponentMounted( baseTheme: Boolean(props?.appearance?.baseTheme), elements: Boolean(props?.appearance?.elements), variables: Boolean(props?.appearance?.variables), + ...additionalPayload, }, }; } @@ -57,7 +58,7 @@ export function eventPrebuiltComponentMounted( */ export function eventComponentMounted( component: string, - props: Record = {}, + props: TelemetryEventRaw['payload'] = {}, ): TelemetryEventRaw { return { event: EVENT_COMPONENT_MOUNTED, diff --git a/packages/types/src/telemetry.ts b/packages/types/src/telemetry.ts index a6db48b5f72..7cd0118e056 100644 --- a/packages/types/src/telemetry.ts +++ b/packages/types/src/telemetry.ts @@ -1,5 +1,7 @@ import type { InstanceType } from 'instance'; +type JSONValue = string | number | boolean | null | JSONValue[] | { [key: string]: JSONValue }; + /** * @internal */ @@ -29,7 +31,7 @@ export type TelemetryEvent = { * SDK Version */ sdkv?: string; - payload: Record; + payload: Record; }; /**