Telemetry: Log userAgent in onboarding

[shilman]

Closes N/A

What I did

Log userAgent in browser-generated onboarding events.

We can theoretically get this information from the channel, but I did not want to rewrite everything to be able to pull it out.

Checklist for Contributors

Testing

Manual testing

• Ran a sandbox with STORYBOOK_TELEMETRY_DEBUG=1 and navigate to ?path=/onboarding. Verify userAgent is sent properly.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

• Chores
  • Enhanced telemetry to include browser information in analytics and survey events.
  • Ensured these onboarding events consistently carry the additional data.
  • No changes to user-facing behavior, UI, or performance are expected.

[coderabbitai]

Walkthrough

• Adds a local userAgent variable read from globalThis.navigator.userAgent in Onboarding.tsx.
• Adds userAgent to payloads emitted on STORYBOOK_ADDON_ONBOARDING_CHANNEL for telemetry and survey events.
• Adds userAgent to the dependency arrays of the completeOnboarding callback and the final telemetry useEffect.
• No public/exported API signatures were changed.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant U as User
  participant O as Onboarding Component
  participant N as globalThis.navigator
  participant C as Storybook Channel

  U->>O: Mount / Render Onboarding
  O->>N: read userAgent
  N-->>O: userAgent string

  rect rgba(200,230,255,0.25)
    note right of O: emissions include userAgent in payloads
    O->>C: emit("telemetry", { event: "...", userAgent })
    alt onboarding completed
      O->>C: emit("survey", { event: "onboarding:complete", userAgent })
    end
  end

  note over O,C: completeOnboarding callback and telemetry useEffect depend on userAgent

Loading

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title “Telemetry: Log userAgent in onboarding” succinctly captures the primary change—adding userAgent logging to onboarding telemetry—without extraneous wording and is clear and specific enough for teammates to understand the update at a glance.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch shilman/onboarding-user-agent

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6d14a2e and 8ee4df6.

📒 Files selected for processing (1)

• code/addons/onboarding/src/Onboarding.tsx (3 hunks)

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

• code/addons/onboarding/src/Onboarding.tsx

⏰ 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). (2)

• GitHub Check: normal
• GitHub Check: Core Unit Tests, windows-latest

---

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

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 357e15f

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	50s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-09-28 10:36:38 UTC

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 6d14a2e

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	51s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-09-26 01:21:54 UTC

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0bcdc29 and 6d14a2e.

📒 Files selected for processing (1)

• code/addons/onboarding/src/Onboarding.tsx (3 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

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

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Adhere to ESLint and Prettier rules across all JS/TS source files

Files:

• code/addons/onboarding/src/Onboarding.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Fix type errors and prefer precise typings instead of using any or suppressions, consistent with strict mode

Files:

• code/addons/onboarding/src/Onboarding.tsx

🧬 Code graph analysis (1)

code/addons/onboarding/src/Onboarding.tsx (1)

code/addons/onboarding/src/constants.ts (1)

• STORYBOOK_ADDON_ONBOARDING_CHANNEL (1-1)

⏰ 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). (3)

• GitHub Check: normal
• GitHub Check: Danger JS
• GitHub Check: Core Unit Tests, windows-latest

[tmeasday]

LGTM. Does step 1 fire as soon as they open the browser during init?

[shilman]

@tmeasday Yeah it's the first screen when the browser opens