Core: Add preview-first-load telemetry
#32770
Conversation
📝 WalkthroughWalkthroughAdds a PREVIEW_INITIALIZED event emitted after preview initialization and wires server-side handling that records a "preview-first-load" telemetry event (timeSinceInit, isInitSession, userAgent) when telemetry is enabled and no previous preview-first-load exists. Changes
Sequence Diagram(s)sequenceDiagram
participant Preview as Preview.tsx
participant Channel as Channel
participant ServerHandler as preview-initialized-channel
participant Telemetry as Telemetry
Preview->>Preview: initialize()
Preview->>Preview: initializeWithProjectAnnotations()
Note right of Preview: capture userAgent
Preview->>Channel: emit PREVIEW_INITIALIZED { userAgent }
Channel->>ServerHandler: subscribed event
Note right of ServerHandler: if telemetry enabled
ServerHandler->>ServerHandler: getSessionId()
ServerHandler->>ServerHandler: getLastEvents()
alt no prior "preview-first-load"
ServerHandler->>Telemetry: emit "preview-first-load" { timeSinceInit, isInitSession, userAgent }
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes ✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Comment |
shilman
added
maintenance
|
View your CI Pipeline Execution ↗ for commit 44d650a
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
code/core/src/core-events/index.ts(2 hunks)code/core/src/core-server/presets/common-preset.ts(2 hunks)code/core/src/core-server/server-channel/preview-initialized-channel.ts(1 hunks)code/core/src/manager/globals/exports.ts(1 hunks)code/core/src/preview-api/modules/preview-web/Preview.tsx(2 hunks)code/core/src/telemetry/event-cache.ts(1 hunks)code/core/src/telemetry/telemetry.ts(1 hunks)code/core/src/telemetry/types.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (useyarn lint:js:cmd <file>)
Files:
code/core/src/core-events/index.tscode/core/src/manager/globals/exports.tscode/core/src/preview-api/modules/preview-web/Preview.tsxcode/core/src/core-server/server-channel/preview-initialized-channel.tscode/core/src/telemetry/event-cache.tscode/core/src/core-server/presets/common-preset.tscode/core/src/telemetry/types.tscode/core/src/telemetry/telemetry.ts
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions from modules when they need to be unit-tested
Files:
code/core/src/core-events/index.tscode/core/src/manager/globals/exports.tscode/core/src/preview-api/modules/preview-web/Preview.tsxcode/core/src/core-server/server-channel/preview-initialized-channel.tscode/core/src/telemetry/event-cache.tscode/core/src/core-server/presets/common-preset.tscode/core/src/telemetry/types.tscode/core/src/telemetry/telemetry.ts
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In application code, use Storybook loggers instead of
console.*(client code:storybook/internal/client-logger; server code:storybook/internal/node-logger)
Files:
code/core/src/core-events/index.tscode/core/src/manager/globals/exports.tscode/core/src/preview-api/modules/preview-web/Preview.tsxcode/core/src/core-server/server-channel/preview-initialized-channel.tscode/core/src/telemetry/event-cache.tscode/core/src/core-server/presets/common-preset.tscode/core/src/telemetry/types.tscode/core/src/telemetry/telemetry.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/core/src/core-events/index.tscode/core/src/manager/globals/exports.tscode/core/src/preview-api/modules/preview-web/Preview.tsxcode/core/src/core-server/server-channel/preview-initialized-channel.tscode/core/src/telemetry/event-cache.tscode/core/src/core-server/presets/common-preset.tscode/core/src/telemetry/types.tscode/core/src/telemetry/telemetry.ts
🧠 Learnings (1)
📚 Learning: 2025-09-24T09:39:39.233Z
Learnt from: ndelangen
PR: storybookjs/storybook#32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.
Applied to files:
code/core/src/manager/globals/exports.ts
🧬 Code graph analysis (3)
code/core/src/preview-api/modules/preview-web/Preview.tsx (1)
code/renderers/web-components/template/components/Html.js (1)
globalThis(5-5)
code/core/src/core-server/server-channel/preview-initialized-channel.ts (3)
code/core/src/telemetry/types.ts (1)
Options(93-100)code/core/src/types/modules/core-common.ts (1)
CoreConfig(20-57)code/core/src/telemetry/event-cache.ts (1)
getLastEvents(31-33)
code/core/src/core-server/presets/common-preset.ts (1)
code/core/src/core-server/server-channel/preview-initialized-channel.ts (1)
initPreviewInitializedChannel(9-31)
⏰ 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
🔇 Additional comments (10)
code/core/src/telemetry/event-cache.ts (1)
26-33: LGTM! Clean refactoring to improve reusability.Extracting
getLastEvents()as a separate exported function is a good refactoring that enables other modules to access the last events cache with a safe default.code/core/src/core-server/presets/common-preset.ts (2)
36-36: LGTM! Proper integration of the new preview-initialized channel.The import follows the established pattern for other server channel modules.
262-262: LGTM! Consistent with other channel initializations.The initialization call follows the same pattern as the other channel initializers in this function.
code/core/src/core-events/index.ts (2)
61-62: LGTM! Standard event addition.The new
PREVIEW_INITIALIZEDevent follows the established naming and documentation conventions.
119-119: LGTM! Proper public export.The event is correctly included in the named exports for external consumption.
code/core/src/telemetry/types.ts (1)
35-36: LGTM! Type extension for new telemetry event.The new
'preview-first-load'event type is correctly added to the union.code/core/src/telemetry/telemetry.ts (1)
117-118: LGTM! Improved consistency in awaiting cache operations.The refactored logic ensures
saveToCacheis consistently awaited in both immediate and non-immediate modes, which is more reliable than the previous implementation.code/core/src/preview-api/modules/preview-web/Preview.tsx (2)
12-12: LGTM! Proper import of the new event.The
PREVIEW_INITIALIZEDevent is correctly imported from the core-events module.
132-134: LGTM! Proper event emission after initialization.The event is emitted at the right time (after initialization completes) with appropriate optional chaining for
userAgentextraction. The eslint-disable comment acknowledges the browser compatibility consideration.code/core/src/manager/globals/exports.ts (1)
570-570: LGTM! Proper export addition.The
PREVIEW_INITIALIZEDevent is correctly added to the manager globals exports in alphabetical order.
Package BenchmarksCommit: No significant changes detected, all good. 👏 |
Core: Add `preview-first-load` telemetry (cherry picked from commit 124987d)
github-actions
bot
added
the
patch:done
ndelangen
removed
the
patch:yes
Closes #
What I did
We want to know whether the preview successfully loaded to help identify and eliminate key setup errors in newly initialized Storybooks.
This pull request introduces a new telemetry event,
preview-first-load, to track when the preview is initialized for the first time. The implementation includes a newPREVIEW_INITIALIZEDevent, updates to the event system and telemetry logic, and integration into the preview lifecycle. These changes help improve analytics and session tracking for preview initialization.Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
STORYBOOK_TELEMETRY_DEBUG=1. Afterdevit should emit apreview-first-loadevent withisInitSession: true.preview-first-loadbecause it is the same session.node_modules/.cacheand restart Storybook. It should send apreview-first-loadevent withisInitSession: false.preview-first-loadshould be sent.preview-first-loadshould be sent.Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This pull request has been released as version
0.0.0-pr-32770-sha-44d650a9. Try it out in a new sandbox by runningnpx [email protected] sandboxor in an existing project withnpx [email protected] upgrade.More information
0.0.0-pr-32770-sha-44d650a9shilman/preview-first-load44d650a91761305850)To request a new release of this pull request, mention the
@storybookjs/coreteam.core team members can create a new canary release here or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=32770Summary by CodeRabbit
New Features
Improvements