@@ -84,6 +84,59 @@ test('db connects properly', async () => {
|
84 | 84 | }) |
85 | 85 | ``` |
86 | 86 | |
| 87 | +## Browser Mode |
| 88 | + |
| 89 | +When running tests in [browser mode](/guide/browser/), Vitest propagates trace context between Node.js and the browser. Node.js side traces (test orchestration, browser driver communication) are available without additional configuration. |
| 90 | + |
| 91 | +To capture traces from the browser runtime, provide a browser-compatible SDK via `browserSdkPath`: |
| 92 | + |
| 93 | +```shell |
| 94 | +npm i @opentelemetry/sdk-trace-web @opentelemetry/exporter-trace-otlp-proto |
| 95 | +``` |
| 96 | + |
| 97 | +::: code-group |
| 98 | +```js [otel-browser.js] |
| 99 | +import { |
| 100 | +BatchSpanProcessor, |
| 101 | +WebTracerProvider, |
| 102 | +} from '@opentelemetry/sdk-trace-web' |
| 103 | +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto' |
| 104 | + |
| 105 | +const provider = new WebTracerProvider({ |
| 106 | + spanProcessors: [ |
| 107 | +new BatchSpanProcessor(new OTLPTraceExporter()), |
| 108 | + ], |
| 109 | +}) |
| 110 | + |
| 111 | +provider.register() |
| 112 | +export default provider |
| 113 | +``` |
| 114 | +```js [vitest.config.js] |
| 115 | +import { defineConfig } from 'vitest/config' |
| 116 | + |
| 117 | +export default defineConfig({ |
| 118 | + test: { |
| 119 | + browser: { |
| 120 | + enabled: true, |
| 121 | + provider: 'playwright', |
| 122 | + instances: [{ browser: 'chromium' }], |
| 123 | + }, |
| 124 | + experimental: { |
| 125 | + openTelemetry: { |
| 126 | + enabled: true, |
| 127 | + sdkPath: './otel.js', |
| 128 | + browserSdkPath: './otel-browser.js', |
| 129 | + }, |
| 130 | + }, |
| 131 | + }, |
| 132 | +}) |
| 133 | +``` |
| 134 | +::: |
| 135 | + |
| 136 | +::: warning ASYNC CONTEXT |
| 137 | +Unlike Node.js, browsers do not have automatic async context propagation. Vitest handles this internally for test execution, but custom spans in deeply nested async code may not propagate context automatically. |
| 138 | +::: |
| 139 | + |
87 | 140 | ## View Traces |
88 | 141 | |
89 | 142 | To generate traces, run Vitest as usual. You can run Vitest in either watch mode or run mode. Vitest will call `sdk.shutdown()` manually after everything is finished to make sure traces are handled properly. |
|