feat: support openTelemetry for browser mode

[hi-ogawa]

Description

Resolves #9043

Summary

This PR improves open telemetry integration for browser by adding following traces:

• browser pool: vitest.browser.run, vitest.browser.open
• orchestrator: vitest.browser.orchestrator.run
• tester: vitest.browser.tester.run, vitest.browser.tester.command (+ enable existing test runner traces)

The browser runtime side traces (orchestrator and tester) rely on SDK provided through browserSdkPath. On browser runtime, async context doesn't work, so each test runner span aren't nested. However, main internal spans relations vitest.browser.run -> vitest.browser.orchestrator.run -> vitest.browser.tester.run -> vitest.test.runner.xxx are nested by manually passing otel carrier and setting up root context in each browser runtime.

TODO

• add browser pool runner side trace
  • this seems like a mostly copying current pools/poolRunner.ts traces to pools/browser.ts
• add browser runtime trace
  • figure out how to load sdk (deps optimization etc.).
    • So far I confirmed it sort of works on Vite SPA https://github.com/hi-ogawa/reproductions/tree/main/vite-otel
  • context management
    • propagate between runtime (main, orchestrator, tester)
    • propagate async context
      • tester root context for internal tracing
      • user land trace context (partially works, for example, when creating trace synchronously inside vitest.test.runner.test.callback)
  • trace tester / runtime runner
  • trace orchestrator (e.g. iframe creation)
• docs
• tests
• more spans and attributes
  • commands (tester side)
  • per-provider trace on node side? (e.g. playwright browser/context/page API)

To explore:

• how does it compare to performance track? https://react.dev/reference/dev-tools/react-performance-tracks
  • this requires recording performance from devtools.
  • don't think this can track async context either

Example

pnpm -C examples/opentelemetry/ compose up -d
pnpm -C examples/opentelemetry/ test --experimental.openTelemetry.enabled --browser.enabled run

Screenshot 📸

pnpm -C examples/opentelemetry/ test --experimental.openTelemetry.enabled --browser.enabled --browser.headless run

Screenshot 📸

npm -C examples/opentelemetry/ test --experimental.openTelemetry.enabled --browser.enabled --browser.headless --isolate=false --maxWorkers=1 run

(This looks weird because there are two vitest.browser.orchestrator.run but only one vitest.browser.tester.run, but it shows tester iframe is reused properly.)

Screenshot 📸

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
• Ideally, include a test that fails without this PR but passes with it.
• Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.
• Please check Allow edits by maintainers to make review process faster. Note that this option is not available for repositories that are owned by Github organizations.

Tests

• Run the tests with pnpm test:ci.

Documentation

• If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

• Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.

[netlify]

✅ Deploy Preview for vitest-dev ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	0c41299
🔍 Latest deploy log	https://app.netlify.com/projects/vitest-dev/deploys/693a4fff12a0e800083b0ab5
😎 Deploy Preview	https://deploy-preview-9180--vitest-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[Copilot]

Pull request overview

This PR adds OpenTelemetry tracing support for Vitest's browser mode, enabling trace collection from browser runtime in addition to the existing Node.js side tracing. The implementation propagates trace context from the Node.js orchestrator to browser contexts (orchestrator iframe and test iframes) using OTEL carrier objects, allowing proper parent-child span relationships across runtime boundaries.

Key Changes

• Added browserSdkPath configuration option to specify a browser-compatible OpenTelemetry SDK
• Implemented trace context propagation from Node.js to browser using OTEL carriers
• Added traces for browser pool operations, orchestrator lifecycle, tester execution, and browser commands

Reviewed changes

Copilot reviewed 28 out of 29 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
packages/vitest/src/utils/traces.ts	Added bind() and flush() methods; made SDK type support optional forceFlush; added @vite-ignore for dynamic imports
packages/vitest/src/types/browser.ts	Added otelCarrier field to BrowserTesterOptions for context propagation
packages/vitest/src/runtime/config.ts	Added openTelemetry config to SerializedConfig for browser runtime
packages/vitest/src/public/browser.ts	Exported Traces and OTELCarrier for browser use
packages/vitest/src/node/types/config.ts	Added browserSdkPath to OpenTelemetry config interface
packages/vitest/src/node/pools/browser.ts	Instrumented browser pool with vitest.browser, vitest.browser.open, and vitest.browser.run spans
packages/vitest/src/node/config/serializeConfig.ts	Serialized OpenTelemetry config for browser runtime
packages/vitest/src/node/config/resolveConfig.ts	Resolved browserSdkPath to absolute path
packages/browser/src/node/plugin.ts	Added browser SDK to Vite optimization entries
packages/browser/src/client/utils.ts	Added traces to BrowserRunnerState
packages/browser/src/client/tester/tester.ts	Initialized traces in tester, created root span, and instrumented test execution
packages/browser/src/client/tester/tester-utils.ts	Added tracing to browser commands
packages/browser/src/client/tester/runner.ts	Implemented trace method for browser test runner
packages/browser/src/client/orchestrator.ts	Created orchestrator traces and propagated context to iframes
packages/browser/src/client/channel.ts	Added otelCarrier to IframePrepareEvent
packages/browser/scripts/build-client.js	Added build wrapper script for client watch mode
packages/browser/package.json	Updated dev:client script; added @opentelemetry/api dependency
test/cli/test/open-telemetry.test.ts	Added test case for browser SDK configuration
test/cli/package.json	Added OpenTelemetry browser dependencies
test/cli/fixtures/otel-tests/otel.browser.sdk.js	Added minimal browser SDK fixture for testing
test/core/test/exports.test.ts	Updated snapshot for new Traces export
examples/opentelemetry/vite.config.ts	Added browserSdkPath to example config
examples/opentelemetry/src/other.test.ts	Added example tests demonstrating browser tracing
examples/opentelemetry/package.json	Added OpenTelemetry browser dependencies
examples/opentelemetry/otel-browser.js	Created example browser SDK setup
examples/opentelemetry/jaeger-config.yml	Configured CORS for browser trace exports
docs/guide/open-telemetry.md	Added browser mode documentation section
docs/config/experimental.md	Documented browserSdkPath configuration
pnpm-lock.yaml	Added OpenTelemetry browser dependencies and updated jsdom

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported