Skip to content

fix(ui): html reporter serializes module graph like blob reporter - #10352

Closed
hi-ogawa wants to merge 12 commits into
vitest-dev:mainfrom
hi-ogawa:refactor-html-reproter-module-graph
Closed

hi-ogawa wants to merge 12 commits into
vitest-dev:mainfrom
hi-ogawa:refactor-html-reproter-module-graph

Conversation

@hi-ogawa

@hi-ogawa hi-ogawa commented May 15, 2026 •

Copy link
Copy Markdown
Collaborator

The html reporter stored a full ModuleGraphData per test file, so the report grew with test files × modules and crashed flatted.stringify with RangeError: Invalid string length. Now it stores the module graph the way the blob reporter does, once per project and Vite environment, and the static client derives each test file's graph on demand.

// before: moduleGraph[project][testFile], repeated for every test file
"/a.test.ts": { graph: { "/shared.ts": [], "/util.ts": ["/shared.ts"], "/a.test.ts": ["/util.ts"] }, ... }
"/b.test.ts": { graph: { "/shared.ts": [], "/util.ts": ["/shared.ts"], "/b.test.ts": ["/util.ts", "/dep.js"] }, ... }

// after: environmentModules[project], same data as the blob reporter
{
  environments: {
    ssr: {
      idTable: ["/a.test.ts", "/util.ts", "/shared.ts", "/b.test.ts", "/dep.js", ...],
      modules: [[0, 0, 0, [1]], [1, 1, 1, [2]], [2, 2, 2, []], [3, 3, 3, [1, 4]], ...], // [id, file, url, importedIds]
    },
  },
  external: [["/dep.js", "/dep.js"]],
  setupFiles: [],
}
blob reporter  ──┐
                 ├─ serializeProjectModules   (one on-disk format)
html reporter  ──┘
static client  ── deriveModuleGraphData(serialized, testFile)   (repeats getModuleGraph's classification)

Compared with #11419 (both measured on the same repro, before: 421 MB / 24 MB, 3.1 GB, RangeError):

#10352 #11419
html graph data raw environment graph, same as blob (serializeProjectModules) classified ModuleGraphData + per-file roots
graph formats 1, shared with blob blob format + html-only format
classification logic 2 copies: getModuleGraph + deriveModuleGraphData (test checks they agree) 1: createModuleGraphCollector; client only walks reachability
1000×3000 raw / gz 2.1 MB / 0.26 MB 2.5 MB / 0.23 MB
1000×3000 peak RSS 275 MB 263 MB
1000×5000 --merge-reports + html 0.67s 0.76s
behavior change none browser optimized deps in externalized lose ?v=hash (snapshot change)

On Vitest's own test/unit report the effect is small (graph 798 KB → 327 KB, total about 3%), because the files task data dominates there.

@netlify

netlify Bot commented May 15, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for vitest-dev ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit cfbb58c
🔍 Latest deploy log https://app.netlify.com/projects/vitest-dev/deploys/6a0bb903f7fa650008e5faac
😎 Deploy Preview https://deploy-preview-10352--vitest-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

hi-ogawa and others added 2 commits May 19, 2026 10:12
Co-authored-by: Codex <noreply@openai.com>
Co-authored-by: Codex <noreply@openai.com>
@hi-ogawa
hi-ogawa force-pushed the refactor-html-reproter-module-graph branch from e816a61 to cfbb58c Compare May 19, 2026 01:12
@hi-ogawa hi-ogawa closed this Jun 1, 2026
@github-actions github-actions Bot locked and limited conversation to collaborators Aug 1, 2026
…ter-module-graph

Resolve conflicts and follow main changes:
- browser mode uses `project.vite.environments.client` (vitest-dev#10386), so drop the separate browser graph and select the environment by `viteEnvironment` or project default
- move client-side types and `deriveModuleGraphData` to `utils/serialized-module-graph.ts` so the UI client does not typecheck node sources
- test that the html report module graph equals `getModuleGraph`

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@hi-ogawa hi-ogawa reopened this Oct 1, 2026
@hi-ogawa hi-ogawa changed the title perf(ui): html reporter serializes module graph like blob reporter fix(ui): html reporter serializes module graph like blob reporter Oct 1, 2026
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@hi-ogawa

hi-ogawa commented Oct 1, 2026

Copy link
Copy Markdown
Collaborator Author

Reviving the PR since this take looked more promising than #11419.

hi-ogawa and others added 8 commits October 1, 2026 15:33
…n a serialized shell

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Module graph ids are resolved file paths, so `/@fs/` only appears in urls.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- utils/module-graph: shared types, test file graph query, serialized shell
- node/module-graph: live getModuleGraph, serialize and restore project modules

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@hi-ogawa

hi-ogawa commented Oct 1, 2026

Copy link
Copy Markdown
Collaborator Author

closing in favor of #11421

@hi-ogawa hi-ogawa closed this Oct 1, 2026
@hi-ogawa
hi-ogawa deleted the refactor-html-reproter-module-graph branch October 1, 2026 08:28
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Optimize html reporter module graph data

1 participant