mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-05 00:09:35 +00:00
Design at: rum ### **PR Type** Enhancement, Bug fix, Tests ___ ### **Description** - Add `useTraceCorrelation` composable merging RUM and backend spans - Support `x-openobserve-trace-id`/`span-id` headers in backend - Fix span parent-child hierarchy in `setup_tracing_with_trace_id` - Add event/resource drawers for trace correlation UI - Configure CORS and `allowedTracingUrls` for tracing ___ ### Diagram Walkthrough ```mermaid flowchart LR A["Browser RUM SDK"] -- "x-openobserve-trace-id/span-id" --> B["Backend HTTP server"] B -- "get_or_create_trace_id / setup_tracing" --> C["OpenTelemetry context"] C -- "spans in _traces stream" --> D["APM traces"] E["useTraceCorrelation"] -- "searchService queries" --> F["_rumdata / _traces"] E -- "compute performance breakdown" --> G["CorrelationData"] G -- "render in drawers" --> H["EventDetailDrawer / ResourceDetailDrawer"] ``` <details> <summary><h3> File Walkthrough</h3></summary> <table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><details><summary>9 files</summary><table> <tr> <td><strong>useTraceCorrelation.ts</strong><dd><code>Composable for fetching RUM-trace correlation</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/10149/files#diff-12b26c2158a3ef524819fe592bbd31ad7eda4fa3775633317bdc98924fcbe500">+178/-0</a> </td> </tr> <tr> <td><strong>http.rs</strong><dd><code>Parse `x-openobserve-trace-id` and span propagation</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/10149/files#diff-3b50a69c1ec2f63f8eebb5f9880e17826463a586768aed3e3e15242833609d6b">+135/-0</a> </td> </tr> <tr> <td><strong>mod.rs</strong><dd><code>Maintain span hierarchy in trace setup</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/10149/files#diff-1b15316505c31acccb26ba66d920fdb0894567d08d2bf1e3457716d128a67b83">+25/-0</a> </td> </tr> <tr> <td><strong>search_stream.rs</strong><dd><code>Enter HTTP span before child search span</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/10149/files#diff-642de43ff6b19ae41087a9f1efc02d8b0b873809e0c92cbddfac1a30ef3f1184">+18/-10</a> </td> </tr> <tr> <td><strong>multi_streams.rs</strong><dd><code>Enter HTTP span before multi-stream span</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/10149/files#diff-c3233cdf1e68cb2455f91457719b9c2f477e735ee16546fdfe111e76768bd054">+9/-5</a> </td> </tr> <tr> <td><strong>EventDetailDrawer.vue</strong><dd><code>Add EventDetailDrawer correlation UI</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/10149/files#diff-f168d8fad42a6fd39bd4e4b499de54953b7b420831df98b40402b662dfefa88e">+723/-0</a> </td> </tr> <tr> <td><strong>ResourceDetailDrawer.vue</strong><dd><code>Add ResourceDetailDrawer correlation UI</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/10149/files#diff-cec3736de55c8f0a415cdbe912d9c630cce6f91aaf92c694b64bf2f7e4989b5b">+317/-0</a> </td> </tr> <tr> <td><strong>TraceDetails.vue</strong><dd><code>Merge RUM events into trace details view</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/10149/files#diff-bc7fe6b6339ee2cde6494c0982d4b860847447e79f7431f07d598e0446df06f2">+207/-22</a></td> </tr> <tr> <td><strong>TraceDetailsSidebar.vue</strong><dd><code>Improve trace sidebar formatting & correlation</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/10149/files#diff-0017bc08d8da96af6433770d0b274f825798d24401b33ce091b16a50fbaf4b57">+159/-102</a></td> </tr> </table></details></td></tr><tr><td><strong>Configuration changes</strong></td><td><details><summary>2 files</summary><table> <tr> <td><strong>main.ts</strong><dd><code>Configure RUM init and allowed tracing URLs</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/10149/files#diff-37b29c5a3b76595194070205d9a0cdedcd717bf7c4367022d1e2667395962f2e">+53/-41</a> </td> </tr> <tr> <td><strong>mod.rs</strong><dd><code>Allow custom tracing headers in CORS</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/10149/files#diff-02556e3f515441b5d2b6bbea7829df488beac03c4cc41309a6638ae3c0e0aec6">+4/-0</a> </td> </tr> </table></details></td></tr><tr><td><strong>Tests</strong></td><td><details><summary>1 files</summary><table> <tr> <td><strong>http.rs</strong><dd><code>Add tests for trace ID header validation</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/10149/files#diff-3b50a69c1ec2f63f8eebb5f9880e17826463a586768aed3e3e15242833609d6b">+135/-0</a> </td> </tr> </table></details></td></tr><tr><td><strong>Formatting</strong></td><td><details><summary>3 files</summary><table> <tr> <td><strong>SearchResult.vue</strong><dd><code>Clean up formatting in log results</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/10149/files#diff-5e65533aa4754bb6d0074fda18ffc1ecacded3b9ca6bc28a161c3f6b12f20195">+180/-78</a></td> </tr> <tr> <td><strong>PlayerEventsSidebar.vue</strong><dd><code>Tidy up player events sidebar formatting</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/10149/files#diff-a7d04eb87cd7588ba4811d79c6d32696a58d737a24931258329be4f96cee7610">+28/-8</a> </td> </tr> <tr> <td><strong>FrustrationEventBadge.vue</strong><dd><code>Increase padding on frustration badges</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/10149/files#diff-092623e0f5b95471d97cd4f39f065d35ea154df9051a44908c1aec3ea84ca682">+7/-3</a> </td> </tr> </table></details></td></tr><tr><td><strong>Dependencies</strong></td><td><details><summary>1 files</summary><table> <tr> <td><strong>package.json</strong><dd><code>Bump `@openobserve/browser-*` to beta versions</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/10149/files#diff-b861012a5dd72b8a9f3281b7cf09f5a779c98569d040b1bbc1db50f1b15e7cce">+2/-2</a> </td> </tr> </table></details></td></tr><tr><td><strong>Additional files</strong></td><td><details><summary>2 files</summary><table> <tr> <td><strong>TraceCorrelationCard.vue</strong></td> <td><a href="https://github.com/openobserve/openobserve/pull/10149/files#diff-e0d662d92758dec703db8d4d5be5a694f3454ee43512515488be24a2531a96a6">+291/-0</a> </td> </tr> <tr> <td><strong>SessionViewer.vue</strong></td> <td><a href="https://github.com/openobserve/openobserve/pull/10149/files#diff-9f7a183be1e2cfcb3c3c852c059f66003dd4f3f586421b012e1b835724929ca1">+122/-6</a> </td> </tr> </table></details></td></tr></tr></tbody></table> </details> ___ --------- Co-authored-by: Subhradeep Chakraborty <chakrabortysubhradeep556@gmail.com>
177 lines
6.0 KiB
TypeScript
177 lines
6.0 KiB
TypeScript
import { fileURLToPath } from 'node:url'
|
|
import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
|
|
import type { ConfigEnv } from 'vite'
|
|
import type { UserConfig } from 'vite'
|
|
import viteConfig from './vite.config'
|
|
|
|
// Convert the vite config to a plain object if it's a function
|
|
const viteConfigObj = typeof viteConfig === 'function'
|
|
? (viteConfig as (options: ConfigEnv) => UserConfig)({ command: 'serve', mode: 'development' })
|
|
: viteConfig
|
|
|
|
export default mergeConfig(
|
|
viteConfigObj,
|
|
defineConfig({
|
|
logLevel: 'error', // Suppress Vite warnings (e.g., Monaco editor source map issues)
|
|
customLogger: {
|
|
info: (msg) => console.info(msg),
|
|
warn: (msg) => {
|
|
// Suppress Monaco editor source map warnings
|
|
const msgStr = String(msg);
|
|
if ((msgStr.includes('Failed to load source map') || msgStr.includes('marked.umd.js.map')) &&
|
|
msgStr.includes('monaco-editor')) {
|
|
return;
|
|
}
|
|
console.warn(msg);
|
|
},
|
|
warnOnce: (msg) => {
|
|
const msgStr = String(msg);
|
|
if ((msgStr.includes('Failed to load source map') || msgStr.includes('marked.umd.js.map')) &&
|
|
msgStr.includes('monaco-editor')) {
|
|
return;
|
|
}
|
|
console.warn(msg);
|
|
},
|
|
error: (msg) => {
|
|
const msgStr = String(msg);
|
|
if ((msgStr.includes('Failed to load source map') || msgStr.includes('marked.umd.js.map')) &&
|
|
msgStr.includes('monaco-editor')) {
|
|
return;
|
|
}
|
|
console.error(msg);
|
|
},
|
|
clearScreen: () => {},
|
|
hasErrorLogged: () => false,
|
|
hasWarned: false,
|
|
},
|
|
resolve: {
|
|
alias: {
|
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
|
}
|
|
},
|
|
test: {
|
|
environment: 'jsdom',
|
|
exclude: [...configDefaults.exclude, 'e2e/**'],
|
|
include: ["src/**/*.spec.{ts,js,vue}"],
|
|
root: fileURLToPath(new URL('.', import.meta.url)),
|
|
setupFiles: ['src/test/unit/helpers/setupTests.ts'],
|
|
server: {
|
|
deps: {
|
|
inline: ["monaco-editor", "vitest-canvas-mock", "@openobserve/browser-rum", "@openobserve/browser-logs"],
|
|
},
|
|
},
|
|
// Prevent unhandled errors from failing the test suite
|
|
dangerouslyIgnoreUnhandledErrors: true,
|
|
// Suppress all console output during tests except test results
|
|
silent: false,
|
|
reporters: ['default'],
|
|
// Suppress all console output (both stderr and stdout)
|
|
onConsoleLog: (log: string, type: 'stdout' | 'stderr') => {
|
|
// Return false to prevent all console logs from being printed
|
|
// This keeps test output clean and only shows test results
|
|
return false;
|
|
},
|
|
coverage: {
|
|
provider: 'v8',
|
|
reporter: ["text", "json", "html", "json-summary"],
|
|
include: ['src/**/*.{js,ts,vue}'],
|
|
thresholds: {
|
|
lines: 27,
|
|
functions: 27,
|
|
branches: 40,
|
|
statements: 27
|
|
},
|
|
exclude: [
|
|
"coverage/**",
|
|
"dist/**",
|
|
"packages/*/test{,s}/**",
|
|
"cypress/**",
|
|
"src/test/**",
|
|
"test{,s}/**",
|
|
"test{,-*}.{js,cjs,mjs,ts,tsx,jsx}",
|
|
"**/*{.,-}test.{js,cjs,mjs,ts,tsx,jsx}",
|
|
"**/*{.,-}spec.{js,cjs,mjs,ts,tsx,jsx}",
|
|
"**/__tests__/**",
|
|
"**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*",
|
|
"**/.{eslint,mocha,prettier}rc.{js,cjs,yml}",
|
|
"**/*.config.js",
|
|
"quasar.conf.js",
|
|
"env.d.ts",
|
|
"src/assets/dashboard/**",
|
|
// Language/translation files - no tests needed
|
|
"src/locales/languages/**/*.json",
|
|
// Main entry point - bootstrapping code
|
|
"src/main.ts",
|
|
// Chart template data files - static configuration
|
|
"src/components/dashboards/addPanel/customChartExamples/chartTemplates/**/*.ts",
|
|
"src/components/dashboards/addPanel/customChartExamples/index.ts",
|
|
"src/components/dashboards/addPanel/customChartExamples/exampleTypes.ts",
|
|
// Type definition files
|
|
"**/*.d.ts",
|
|
"src/contextProviders/types.ts",
|
|
// Index files that only re-export
|
|
"src/components/alerts/index.ts",
|
|
"src/components/functions/index.ts",
|
|
"src/contextProviders/index.ts",
|
|
// Layout mixins (tested via integration)
|
|
"src/enterprise/mixins/layout.mixin.ts",
|
|
"src/mixins/layout.mixin.ts",
|
|
// Plugin index (just exports)
|
|
"src/plugins/index.ts",
|
|
// AWS exports (configuration)
|
|
"src/aws-exports.ts",
|
|
// Constants/config files with only static data
|
|
"src/constants/cards.ts",
|
|
],
|
|
},
|
|
},
|
|
}),
|
|
)
|
|
|
|
|
|
// import { defineConfig } from 'vitest/config';
|
|
// import path from 'path';
|
|
// import vue from '@vitejs/plugin-vue'
|
|
// import { quasar } from "@quasar/vite-plugin";
|
|
|
|
// export default defineConfig({
|
|
// plugins: [vue(), quasar()],
|
|
// test: {
|
|
// globals: true,
|
|
// setupFiles: "test/unit/helpers/setupTests.ts",
|
|
// deps: {
|
|
// inline: ["monaco-editor", "vitest-canvas-mock"],
|
|
// },
|
|
// coverage: {
|
|
// reporter: ["text", "json", "html"],
|
|
// all: true,
|
|
// exclude: [
|
|
// "coverage/**",
|
|
// "dist/**",
|
|
// "packages/*/test{,s}/**",
|
|
// "cypress/**",
|
|
// "src/test/**",
|
|
// "test{,s}/**",
|
|
// "test{,-*}.{js,cjs,mjs,ts,tsx,jsx}",
|
|
// "**/*{.,-}test.{js,cjs,mjs,ts,tsx,jsx}",
|
|
// "**/*{.,-}spec.{js,cjs,mjs,ts,tsx,jsx}",
|
|
// "**/__tests__/**",
|
|
// "**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*",
|
|
// "**/.{eslint,mocha,prettier}rc.{js,cjs,yml}",
|
|
// "quasar.conf.js",
|
|
// "env.d.ts",
|
|
// ],
|
|
// },
|
|
// environment: "jsdom",
|
|
// environmentOptions: {
|
|
// jsdom: {
|
|
// resources: "usable",
|
|
// },
|
|
// },
|
|
// },
|
|
// resolve: {
|
|
// alias: {
|
|
// '@': path.resolve(__dirname, './src'),
|
|
// },
|
|
// },
|
|
// });
|