Skip to content

Onboard to BundleWatch#7039

Merged
PavelVanecek merged 3 commits intomainfrom
copilot/onboard-bundlewatch
Feb 22, 2026
Merged

Onboard to BundleWatch#7039
PavelVanecek merged 3 commits intomainfrom
copilot/onboard-bundlewatch

Conversation

Copy link
Contributor

Copilot AI commented Feb 21, 2026

Integrates BundleWatch to track bundle sizes on every CI run, with PR comments showing size deltas against main.

Description

.bundlewatch.config.json — new config tracking 6 bundles:

  • umd/Recharts.js (minified UMD, 600kB limit)
  • bundlewatch-bundles/treeshaking-{cartesian,polar,treemap,sunburst,sankey}.js (300kB limit each)

scripts/upload-bundle-analysis.jsgenerateAndUploadTreeshakingBundle now accepts an optional bundlewatchOutputFile; when provided, copies the bundle to bundlewatch-bundles/ before the temp dir is cleaned up. All 5 tree-shaking calls pass their respective output paths so BundleWatch has persistent files to read.

.github/workflows/ci.ymlBundleWatch step added after the Codecov bundle analysis step (which now populates bundlewatch-bundles/). Passes BUNDLEWATCH_GITHUB_TOKEN from secrets and sets the required CI env vars (CI_COMMIT_SHA uses the PR head SHA for pull requests, CI_BRANCH_BASE falls back to main for direct pushes).

.gitignorebundlewatch-bundles/ excluded.

package.jsonbundlewatch@^0.4.1 added to devDependencies; bundlewatch npm script added as bundlewatch --config .bundlewatch.config.json (BundleWatch does not auto-discover .bundlewatch.config.json by name — without an explicit --config flag it looks in package.json and fails with "Configuration missing").

Related Issue

Tracks the same 5 tree-shaking bundles plus the UMD artifact introduced in #7032.

Motivation and Context

Without BundleWatch, there is no automated per-PR signal on whether bundle sizes are growing. BundleWatch posts a PR comment summarising size changes vs the main baseline, giving reviewers actionable data before merging.

How Has This Been Tested?

CI workflow updated; will validate on first run against this PR. The upload-bundle-analysis.js change is additive (file copy before temp-dir cleanup) and does not affect the existing Codecov upload path.

Screenshots (if appropriate):

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have added tests to cover my changes.
  • I have added a storybook story or VR test, or extended an existing story or VR test to show my changes
Original prompt

This section details on the original issue you should resolve

<issue_title>Onboard to BundleWatch</issue_title>
<issue_description>Onboard this repository to BundleWatch so that we can track bundle sizes. Follow https://bundlewatch.io/guide/getting-started. Make it track the same bundles as codecov is tracking. Note that we have added new bundles in #7032.

I have already configured BUNDLEWATCH_GITHUB_TOKEN action environment secret.

We want to track bundle sizes in main branch, then each PR, and have a comment on each PR that shows how much each bundle size will change if we were to merge that PR.</issue_description>

Comments on the Issue (you are @copilot in this section)


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Summary by CodeRabbit

  • Chores
    • Added bundle size monitoring to the continuous integration pipeline to automatically track and enforce library size limits across distribution formats.

Co-authored-by: PavelVanecek <1100170+PavelVanecek@users.noreply.github.com>
Copilot AI changed the title [WIP] Onboard repository to BundleWatch for tracking bundle sizes Onboard to BundleWatch Feb 21, 2026
Copilot AI requested a review from PavelVanecek February 21, 2026 14:40
@codecov
Copy link

codecov bot commented Feb 21, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 90.13%. Comparing base (15b5407) to head (869d96b).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #7039   +/-   ##
=======================================
  Coverage   90.12%   90.13%           
=======================================
  Files         526      526           
  Lines       39242    39253   +11     
  Branches     5438     5438           
=======================================
+ Hits        35368    35379   +11     
  Misses       3865     3865           
  Partials        9        9           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@codecov
Copy link

codecov bot commented Feb 21, 2026

Bundle Report

Bundle size has no change ✅

Co-authored-by: PavelVanecek <1100170+PavelVanecek@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Feb 22, 2026

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • firebasedynamiclinks.googleapis.com
    • Triggering command: /opt/hostedtoolcache/node/24.13.0/x64/bin/node node node_modules/.bin/bundlewatch --config .bundlewatch.config.json (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

@github-actions
Copy link
Contributor

Staging Deployment Details

These deployments will remain available for 30 days.

To update snapshots: Comment /update-snapshots on this PR to automatically update the baseline screenshots.

@PavelVanecek PavelVanecek marked this pull request as ready for review February 22, 2026 02:09
@PavelVanecek
Copy link
Collaborator

@coderabbitai review

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 22, 2026

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 22, 2026

Walkthrough

This PR adds BundleWatch integration to monitor bundle sizes across CI/CD pipelines. It includes configuration files, a new CI workflow step, package updates with the bundlewatch dependency and script, and modifications to the bundle upload script to output treeshaking bundles for size tracking.

Changes

Cohort / File(s) Summary
Configuration & Build Setup
.bundlewatch.config.json, .gitignore, package.json
Added BundleWatch configuration file with size limits for UMD and treeshaking bundles; updated .gitignore to exclude bundlewatch-bundles directory; added bundlewatch npm script and ^0.4.1 devDependency.
CI Workflow Integration
.github/workflows/ci.yml
Added new BundleWatch workflow step after bundle analysis upload, setting environment variables and executing the bundlewatch npm script in the CI pipeline.
Bundle Generation Script
scripts/upload-bundle-analysis.js
Extended generateAndUploadTreeshakingBundle function to accept optional bundlewatchOutputFile parameter; now generates and copies treeshaking bundles (cartesian, polar, treemap, sunburst, sankey) to bundlewatch-bundles directory for size monitoring.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ 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%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title 'Onboard to BundleWatch' clearly and concisely summarizes the main objective of the PR: integrating BundleWatch for bundle size tracking.
Description check ✅ Passed The description is comprehensive and well-structured, covering all major template sections including motivation, context, testing approach, and change types.
Linked Issues check ✅ Passed The PR fully implements all requirements from issue #7038: BundleWatch integration, tracking six bundles (UMD and five tree-shaking), CI configuration with token and env vars, and persistent bundle file handling.
Out of Scope Changes check ✅ Passed All changes are directly aligned with the objective of integrating BundleWatch; no out-of-scope modifications detected.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch copilot/onboard-bundlewatch

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

🧹 Nitpick comments (2)
.github/workflows/ci.yml (2)

175-183: BundleWatch step is not guarded — transient failures will block Chromatic publishing.

Unlike the Chromatic step (which has if: ${{ env.ENCRYPTED_CHROMATIC_TOKEN }}), the BundleWatch step has no continue-on-error: true and no guard condition. Any BundleWatch failure — including service outages, upstream API errors, or a stale BUNDLEWATCH_GITHUB_TOKEN — will fail the whole build_test_pack job and prevent Chromatic from publishing.

If the intent is for bundle size regressions to be hard-blocking, this is fine. But consider adding continue-on-error: true (at least initially while baselining) so that infrastructure issues don't cascade into blocking the rest of the job.

💡 Suggested guard pattern (optional)
      - name: BundleWatch
+       continue-on-error: true
        env:
          BUNDLEWATCH_GITHUB_TOKEN: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In @.github/workflows/ci.yml around lines 175 - 183, The BundleWatch step named
"BundleWatch" is currently unguarded and can fail the entire build_test_pack
job; update that workflow step to either add continue-on-error: true to the
BundleWatch step or add a guard condition (e.g., only run when
BUNDLEWATCH_GITHUB_TOKEN is present) so transient BundleWatch failures do not
block Chromatic publishing—locate the step that sets BUNDLEWATCH_GITHUB_TOKEN
and run: npm run bundlewatch and add the chosen guard (continue-on-error or an
if: check) to that step.

175-183: Add explicit step dependency or pre-check for bundlewatch-bundles files.

The BundleWatch step (lines 175-183) implicitly depends on bundlewatch-bundles/treeshaking-*.js files created by the "Upload bundle analysis report to Codecov" step, but there is no explicit needs: clause. Additionally, error handling in scripts/upload-bundle-analysis.js swallows failures: the .catch() at line 36 logs errors without rethrowing, so if the promise chain exits early (e.g., before all five fs.copyFileSync calls at line 118), BundleWatch will silently find missing files or report 0 bytes without a clear diagnostic.

Clarify this coupling by adding an explicit needs: dependency in the workflow, or add a pre-check in the BundleWatch step to verify the expected files exist.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In @.github/workflows/ci.yml around lines 175 - 183, The BundleWatch job
currently implicitly depends on artifacts produced by the "Upload bundle
analysis report to Codecov" step and should either declare that dependency or
perform a pre-check; update the workflow so the BundleWatch step (name:
BundleWatch) includes an explicit needs: reference to the job that runs
scripts/upload-bundle-analysis.js, or add a pre-check before running npm run
bundlewatch that validates the presence of bundlewatch-bundles/treeshaking-*.js
files and fails fast with a clear message if any are missing; also update
scripts/upload-bundle-analysis.js to stop swallowing errors by removing the
top-level .catch() that only logs and instead rethrow or propagate the error (so
failures during fs.copyFileSync calls cannot silently leave missing files).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In @.github/workflows/ci.yml:
- Around line 175-183: The BundleWatch step named "BundleWatch" is currently
unguarded and can fail the entire build_test_pack job; update that workflow step
to either add continue-on-error: true to the BundleWatch step or add a guard
condition (e.g., only run when BUNDLEWATCH_GITHUB_TOKEN is present) so transient
BundleWatch failures do not block Chromatic publishing—locate the step that sets
BUNDLEWATCH_GITHUB_TOKEN and run: npm run bundlewatch and add the chosen guard
(continue-on-error or an if: check) to that step.
- Around line 175-183: The BundleWatch job currently implicitly depends on
artifacts produced by the "Upload bundle analysis report to Codecov" step and
should either declare that dependency or perform a pre-check; update the
workflow so the BundleWatch step (name: BundleWatch) includes an explicit needs:
reference to the job that runs scripts/upload-bundle-analysis.js, or add a
pre-check before running npm run bundlewatch that validates the presence of
bundlewatch-bundles/treeshaking-*.js files and fails fast with a clear message
if any are missing; also update scripts/upload-bundle-analysis.js to stop
swallowing errors by removing the top-level .catch() that only logs and instead
rethrow or propagate the error (so failures during fs.copyFileSync calls cannot
silently leave missing files).

@PavelVanecek PavelVanecek merged commit fa8d0c9 into main Feb 22, 2026
48 checks passed
@PavelVanecek PavelVanecek deleted the copilot/onboard-bundlewatch branch February 22, 2026 02:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Onboard to BundleWatch

2 participants