Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Telemetry: Add metadata distinguishing "apps" from "design systems" #30070

Merged
merged 8 commits into from
Dec 16, 2024

Conversation

tmeasday
Copy link
Member

@tmeasday tmeasday commented Dec 15, 2024

Closes #

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

  • stories
  • unit tests
  • integration tests
  • end-to-end tests

Manual testing

Create a project with a router and some pages and install Storybook with STORYBOOK_TELEMETRY_DEBUG=1. Bonus points if it's in a monorepo.

Documentation

  • Add or update documentation reflecting your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Checklist for Maintainers

  • When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

  • Make 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-30070-sha-0b45cb37. Try it out in a new sandbox by running npx storybook@0.0.0-pr-30070-sha-0b45cb37 sandbox or in an existing project with npx storybook@0.0.0-pr-30070-sha-0b45cb37 upgrade.

More information
Published version 0.0.0-pr-30070-sha-0b45cb37
Triggered by @tmeasday
Repository storybookjs/storybook
Branch tom/metadata-tweaks
Commit 0b45cb37
Datetime Mon Dec 16 05:52:50 UTC 2024 (1734328370)
Workflow run 12346768870

To request a new release of this pull request, mention the @storybookjs/core team.

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

name before after diff z %
createSize 0 B 0 B 0 B - -
generateSize 77.7 MB 77.7 MB 48 B 1.11 0%
initSize 136 MB 136 MB 4.41 kB 1.11 0%
diffSize 58.4 MB 58.4 MB 4.37 kB 1.11 0%
buildSize 7.24 MB 7.24 MB 87 B 0.91 0%
buildSbAddonsSize 1.88 MB 1.88 MB 0 B 0.9 0%
buildSbCommonSize 195 kB 195 kB 0 B - 0%
buildSbManagerSize 1.86 MB 1.86 MB 37 B 0.9 0%
buildSbPreviewSize 0 B 0 B 0 B - -
buildStaticSize 0 B 0 B 0 B - -
buildPrebuildSize 3.93 MB 3.93 MB 37 B 0.9 0%
buildPreviewSize 3.3 MB 3.3 MB 50 B 1.55 0%
testBuildSize 0 B 0 B 0 B - -
testBuildSbAddonsSize 0 B 0 B 0 B - -
testBuildSbCommonSize 0 B 0 B 0 B - -
testBuildSbManagerSize 0 B 0 B 0 B - -
testBuildSbPreviewSize 0 B 0 B 0 B - -
testBuildStaticSize 0 B 0 B 0 B - -
testBuildPrebuildSize 0 B 0 B 0 B - -
testBuildPreviewSize 0 B 0 B 0 B - -
name before after diff z %
createTime 8s 6.7s -1s -280ms -0.98 -18.9%
generateTime 20.2s 19.2s -1s -32ms -1.03 -5.4%
initTime 14.5s 13.3s -1s -267ms -0.75 -9.5%
buildTime 11.9s 10s -1s -824ms 0.27 -18.1%
testBuildTime 0ms 0ms 0ms - -
devPreviewResponsive 5.6s 5.2s -357ms 0.26 -6.8%
devManagerResponsive 4.1s 3.8s -301ms 0.02 -7.8%
devManagerHeaderVisible 748ms 559ms -189ms -0.42 -33.8%
devManagerIndexVisible 770ms 584ms -186ms -0.75 -31.8%
devStoryVisibleUncached 1.9s 1.1s -883ms -2.63 🔰-80.2%
devStoryVisible 792ms 585ms -207ms -0.73 -35.4%
devAutodocsVisible 501ms 535ms 34ms 0.21 6.4%
devMDXVisible 578ms 522ms -56ms -0.08 -10.7%
buildManagerHeaderVisible 642ms 564ms -78ms -0.46 -13.8%
buildManagerIndexVisible 744ms 651ms -93ms -0.54 -14.3%
buildStoryVisible 603ms 529ms -74ms -0.31 -14%
buildAutodocsVisible 504ms 457ms -47ms 0.14 -10.3%
buildMDXVisible 475ms 444ms -31ms -0.16 -7%

Greptile Summary

Enhanced Storybook's telemetry system to distinguish between applications and design systems by adding metrics for router package detection and application file counting.

  • Added getApplicationFileCount.ts to detect files with 'page' or 'screen' patterns using git ls-files
  • Added getHasRouterPackage.ts to identify routing dependencies across major frameworks
  • Added filesystem caching in runTelemetryOperation.ts with 24-hour TTL for expensive operations
  • Updated StorybookMetadata type with new hasRouterPackage and applicationFileCount fields
  • Changed default selected panel to 'chromaui/addon-visual-tests/panel' in layout module

💡 (3/5) Reply to the bot's comments like "Can you suggest a fix for this @greptileai?" or ask follow-up questions!

Copy link

nx-cloud bot commented Dec 15, 2024

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 2a5a855. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution


✅ Successfully ran 1 target

Sent with 💌 from NxCloud.

@tmeasday tmeasday force-pushed the tom/metadata-tweaks branch from d19abf0 to 766645f Compare December 16, 2024 02:55
@tmeasday tmeasday changed the title Record metadata.hasRouterPackage Telemetry: Add metadata distinguishing "apps" from "design systems" Dec 16, 2024
@tmeasday tmeasday requested a review from shilman December 16, 2024 05:25
@tmeasday tmeasday added maintenance User-facing maintenance tasks telemetry ci:normal labels Dec 16, 2024
});

// If the process errors, this will throw
await process;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i assume we're guaranteed to get all the lines before this exits?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, the "promise" doesn't resolve until the command is done. I guess theorectically the final on('line') might fire after that but I've never observed it in practice. I say theorectically just because I don't know for sure either way.

* @param packageJson The package JSON of the project
* @returns Boolean Does this project use a routing package?
*/
export function getHasRouterPackage(packageJson: PackageJson) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hasRouterPackage?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well the metadata field is called that, I though maybe the helper that gets it should be named differently.

const cache = createFileSystemCache({
basePath: resolvePathInStorybookCache('telemetry'),
ns: 'storybook',
ttl: 24 * 60 * 60 * 1000, // 24h
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want to lower the TTL?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤷 I figured we'd thought about it before :)


// We are looking for files with the word "page" or "screen" somewhere in them with these exts
const nameMatches = ['page', 'screen'];
const extensions = ['js', 'jsx', 'ts', 'tsx'];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mjs / cjs?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are mjsx and cjsx a thing?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess the answer is kinda no: https://www.reddit.com/r/webdev/comments/15mern2/is_there_such_a_thing_as_cjsxmjsx_in_javascript/

And that might be a good reason to not include mjs and cjs in this script -- they are sort of guaranteed to be node files rather than browser files, right? Or is that an incorrect assumption?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mjs can be browser files AFAIK

@storybook-pr-benchmarking
Copy link

storybook-pr-benchmarking bot commented Dec 16, 2024

Package Benchmarks

Commit: 2a5a855, ran on 16 December 2024 at 13:27:25 UTC

No significant changes detected, all good. 👏

@tmeasday tmeasday marked this pull request as ready for review December 16, 2024 08:45
Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

14 file(s) reviewed, 15 comment(s)
Edit PR Review Bot Settings | Greptile

Comment on lines +18 to +21
type ExecaStreamer = typeof Promise & {
stdout: Transform;
kill: () => void;
};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

logic: ExecaStreamer type extends Promise incorrectly - should extend Promise

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure what is being suggested here.

code/core/src/manager-api/modules/layout.ts Show resolved Hide resolved
code/core/src/telemetry/get-has-router-package.test.ts Outdated Show resolved Hide resolved
code/core/src/telemetry/get-has-router-package.test.ts Outdated Show resolved Hide resolved
code/core/src/telemetry/run-telemetry-operation.ts Outdated Show resolved Hide resolved
Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

14 file(s) reviewed, 6 comment(s)
Edit PR Review Bot Settings | Greptile


function createExecaStreamer() {
let resolver: () => void;
const promiseLike: ExecaStreamer = new Promise<void>((aResolver, aRejecter) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

logic: Unused aRejecter parameter in Promise constructor - error cases not being tested

@shilman shilman merged commit c3e1496 into next Dec 16, 2024
57 of 59 checks passed
@shilman shilman deleted the tom/metadata-tweaks branch December 16, 2024 14:16
@shilman shilman added the needs qa Indicates that this needs manual QA during the upcoming minor/major release label Dec 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ci:normal maintenance User-facing maintenance tasks needs qa Indicates that this needs manual QA during the upcoming minor/major release telemetry
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants