fix(clerk-js): Ensure withSignUp is collected in telemetry (#5150)

Author: brkalow

.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.

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(),
+        },
+      ),
     );
   };
 

packages/shared/src/telemetry/events/component-mounted.ts

@@ -14,22 +14,22 @@ 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));
  */
 export function eventPrebuiltComponentMounted(
   component: string,
   props?: Record<string, any>,
+  additionalPayload?: TelemetryEventRaw['payload'],
 ): TelemetryEventRaw<EventPrebuiltComponentMounted> {
   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<string, string | boolean> = {},
+  props: TelemetryEventRaw['payload'] = {},
 ): TelemetryEventRaw<EventComponentMounted> {
   return {
     event: EVENT_COMPONENT_MOUNTED,

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<string, string | number | boolean>;
+  payload: Record<string, JSONValue>;
 };
 
 /**