feat(shared): Capture auth component mounted for all SDK types

[heatlikeheatwave]

Description

Enables 100% sampling rate for SignIn and SignUp components for all SDKs. This will enable a more holistic comparison of Auth Component Mounted data between keyless and other SDK types.

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

Summary by CodeRabbit

• New Features

  • Telemetry: per-event sampling added; SignIn and SignUp mount events now captured at full sampling, other component mounts and open events remain at lower sampling.

• Chores

  • Prepared a patch release for @clerk/shared.

[changeset-bot]

🦋 Changeset detected

Latest commit: fa91b76

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 19 packages

Name	Type
@clerk/shared	Patch
@clerk/agent-toolkit	Patch
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-js	Patch
@clerk/elements	Patch
@clerk/expo-passkeys	Patch
@clerk/clerk-expo	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/nextjs	Patch
@clerk/nuxt	Patch
@clerk/react-router	Patch
@clerk/clerk-react	Patch
@clerk/remix	Patch
@clerk/tanstack-react-start	Patch
@clerk/testing	Patch
@clerk/vue	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
clerk-js-sandbox	Ready	Preview	Comment	Sep 26, 2025 8:26pm

[coderabbitai]

Walkthrough

Adds a changeset and updates telemetry to use per-component sampling for COMPONENT_MOUNTED events: SignIn and SignUp are sampled at 100% while other components use 0.1; COMPONENT_OPENED sampling remains 0.1.

Changes

Cohort / File(s)	Summary
Release metadata \.changeset/pretty-rings-compare.md	Adds a changeset for a patch release noting telemetry capture on SignIn/SignUp mounts.
Telemetry sampling logic packages/shared/src/telemetry/events/component-mounted.ts	Introduces AUTH_COMPONENTS set (SignIn, SignUp) and getComponentMountedSamplingRate(component) returning 1 for those and 0.1 otherwise. createPrebuiltComponentEvent and eventComponentMounted now apply per-component sampling for COMPONENT_MOUNTED; COMPONENT_OPENED remains at 0.1. Adds a factory-style comment.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant UI as Auth Component (SignIn/SignUp/Other)
  participant Telemetry as Telemetry Events
  participant Sampler as Sampling Strategy

  User->>UI: Mount component
  UI->>Telemetry: createPrebuiltComponentEvent(COMPONENT_MOUNTED, component)
  Telemetry->>Sampler: getComponentMountedSamplingRate(component)
  alt High-signal component (SignIn/SignUp)
    Sampler-->>Telemetry: 1.0
  else Other component
    Sampler-->>Telemetry: 0.1
  end
  Telemetry-->>UI: Event emitted with computed sampling rate

Loading

sequenceDiagram
  autonumber
  actor User
  participant UI as Auth Component
  participant Telemetry as Telemetry Events

  User->>UI: Open component
  UI->>Telemetry: createPrebuiltComponentEvent(COMPONENT_OPENED, component)
  Note right of Telemetry: Uses default sampling (unchanged, 0.1)
  Telemetry-->>UI: Event emitted with default sampling rate

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

A twitch of whiskers, a hop, and then—
I count the mounts of SignIn and SignUp again.
Full sampling where the signals gleam,
Gentle sips elsewhere, a measured stream.
Patch tucked in, I nibble a dream. 🥕

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title succinctly and accurately describes the primary change, namely capturing mounted events for auth components across all SDK types, which aligns directly with the implemented sampling adjustments for SignIn and SignUp in the changeset.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch heat/grow-760-enable-auth-component-telemetry-events-for-other-sdks

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between cb6beb5 and fa91b76.

📒 Files selected for processing (2)

• .changeset/pretty-rings-compare.md (1 hunks)
• packages/shared/src/telemetry/events/component-mounted.ts (4 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• .changeset/pretty-rings-compare.md

🧰 Additional context used

📓 Path-based instructions (6)

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels

Files:

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

**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

Use Prettier for consistent code formatting

Files:

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

packages/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

TypeScript is required for all packages

Files:

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

packages/**/*.{ts,tsx,d.ts}

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

Packages should export TypeScript types alongside runtime code

Files:

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

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

Use proper TypeScript error types

**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoid any type - prefer unknown when type is uncertain, then narrow with type guards
Use interface for object shapes that might be extended
Use type for unions, primitives, and computed types
Prefer readonly properties for immutable data structures
Use private for internal implementation details
Use protected for inheritance hierarchies
Use public explicitly for clarity in public APIs
Prefer readonly for properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Use const assertions for literal types: as const
Use satisfies operator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports: import type { ... } from ...
No any types without justification
Proper error handling with typed errors
Consistent use of readonly for immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)

Files:

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

**/*.{js,ts,tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)

Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.

Files:

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

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

• GitHub Check: Formatting | Dedupe | Changeset
• GitHub Check: Build Packages
• GitHub Check: semgrep/ci
• GitHub Check: Analyze (javascript-typescript)
• GitHub Check: semgrep-cloud-platform/scan
• GitHub Check: semgrep-cloud-platform/scan

🔇 Additional comments (1)

packages/shared/src/telemetry/events/component-mounted.ts (1)

38-57: Auth component sampling logic looks solid

Thanks for hoisting the sampling decision into the shared factory—it keeps the mounted/opened paths consistent and ensures SignIn/SignUp get the intended 100 % rate across SDKs.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@6858

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@6858

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@6858

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@6858

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@6858

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@6858

@clerk/elements

npm i https://pkg.pr.new/@clerk/elements@6858

@clerk/clerk-expo

npm i https://pkg.pr.new/@clerk/clerk-expo@6858

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@6858

@clerk/express

npm i https://pkg.pr.new/@clerk/express@6858

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@6858

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@6858

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@6858

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@6858

@clerk/clerk-react

npm i https://pkg.pr.new/@clerk/clerk-react@6858

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@6858

@clerk/remix

npm i https://pkg.pr.new/@clerk/remix@6858

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@6858

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@6858

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@6858

@clerk/themes

npm i https://pkg.pr.new/@clerk/themes@6858

@clerk/types

npm i https://pkg.pr.new/@clerk/types@6858

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@6858

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@6858

commit: fa91b76

[dstaley]

Do we really need to go from 10% to 100%? Not objecting to it, just want to call out that we can probably get a representative sample at a lower sampling rate.

[heatlikeheatwave]

I think if this was telemetry event data we used in isolation we could lower the sampling rate, but we're trying to compare the telemetry event for this between keyless (which has 100% sampling for this event) and all SDKs. I might have that wrong though, and we could lower it. What do you think?