mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-04 16:09:05 +00:00
Omkar KesarkhaneandSubhradeep Chakraborty
5426673cbd
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>
139 lines
4.7 KiB
JSON
139 lines
4.7 KiB
JSON
{
|
|
"name": "zinc-observe-web",
|
|
"version": "0.1.0",
|
|
"license": "AGPL-3.0",
|
|
"private": true,
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite --base /web/",
|
|
"devcloud": "NODE_ENV=devcloud vite --mode=devcloud",
|
|
"build-alpha1": "run-p type-check build-only-alpha1",
|
|
"build-cloud-prod": "run-p type-check build-only-cloud-prod",
|
|
"build": "run-p type-check build-only",
|
|
"postbuild": "run-p copy",
|
|
"preview": "vite preview",
|
|
"copy": "cd dist && mkdir src && cd src && mkdir assets && cd .. && cd .. && cp -r src/assets/* dist/src/assets/",
|
|
"test:unit": "vitest --environment jsdom --root src/",
|
|
"test:unit:coverage": "vitest --coverage --run",
|
|
"test:coverage:check": "./coverage.sh check",
|
|
"test:e2e": "start-server-and-test preview :4173 'cypress run --e2e'",
|
|
"test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
|
|
"build-only": "vite build",
|
|
"build-only-alpha1": "vite build --mode=alpha1",
|
|
"build-only-cloud-prod": "vite build --mode=production",
|
|
"type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
|
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix"
|
|
},
|
|
"dependencies": {
|
|
"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
|
|
"@joakimono/echarts-extension-leaflet": "^1.0.3",
|
|
"@openobserve/browser-logs": "0.3.2-beta.2",
|
|
"@openobserve/browser-rum": "0.3.2-beta.2",
|
|
"@openobserve/node-sql-parser": "^0.1.5",
|
|
"@openobserve/rrweb-player": "^0.2.1",
|
|
"@quasar/extras": "^1.17.0",
|
|
"@tanstack/vue-table": "^8.21.3",
|
|
"@tanstack/vue-virtual": "^3.13.16",
|
|
"@vue-flow/background": "^1.3.2",
|
|
"@vue-flow/controls": "^1.1.3",
|
|
"@vue-flow/core": "^1.48.1",
|
|
"acorn": "^8.15.0",
|
|
"acorn-walk": "^8.3.4",
|
|
"cron-parser": "^5.4.0",
|
|
"d3-force": "^3.0.0",
|
|
"d3-scale": "^4.0.2",
|
|
"date-fns": "^4.1.0",
|
|
"date-fns-tz": "^3.2.0",
|
|
"dompurify": "^3.3.1",
|
|
"echarts": "^5.6.0",
|
|
"echarts-gl": "^2.0.9",
|
|
"escodegen": "^2.1.0",
|
|
"flag-icons": "^7.5.0",
|
|
"gridstack": "^12.4.2",
|
|
"highlight.js": "^11.11.1",
|
|
"js-beautify": "^1.15.4",
|
|
"js-cookie": "^3.0.5",
|
|
"json-2-csv": "^5.5.10",
|
|
"jszip": "^3.10.1",
|
|
"leaflet": "^1.9.4",
|
|
"lodash-es": "^4.17.22",
|
|
"lucide-vue-next": "^0.562.0",
|
|
"luxon": "^3.7.2",
|
|
"marked": "^17.0.1",
|
|
"moment": "^2.30.1",
|
|
"moment-timezone": "^0.6.0",
|
|
"monaco-editor": "^0.52.2",
|
|
"node-polyfill-webpack-plugin": "^4.1.0",
|
|
"quasar": "^2.18.6",
|
|
"reodotdev": "^1.0.0",
|
|
"rollup-plugin-node-polyfills": "^0.2.1",
|
|
"rollup-plugin-polyfill-node": "^0.13.0",
|
|
"@rudderstack/analytics-js": "^3.0.0",
|
|
"sql-formatter": "^15.6.12",
|
|
"uuid": "^13.0.0",
|
|
"vue": "^3.5.26",
|
|
"vue-drag-resize": "^1.5.4",
|
|
"vue-draggable-next": "^2.3.0",
|
|
"vue-i18n": "^11.2.8",
|
|
"vue-router": "^4.6.4",
|
|
"vuex": "^4.1.0"
|
|
},
|
|
"devDependencies": {
|
|
"@cypress/vue": "^6.0.2",
|
|
"@cypress/webpack-dev-server": "^5.4.1",
|
|
"@quasar/vite-plugin": "^1.10.0",
|
|
"@rushstack/eslint-patch": "^1.15.0",
|
|
"@tailwindcss/postcss": "^4.1.18",
|
|
"@tailwindcss/typography": "^0.5.19",
|
|
"@tailwindcss/vite": "^4.1.18",
|
|
"@types/axios": "^0.14.4",
|
|
"@types/d3-force": "^3.0.10",
|
|
"@types/d3-scale": "^4.0.9",
|
|
"@types/fs-extra": "^11.0.4",
|
|
"@types/js-cookie": "^3.0.6",
|
|
"@types/jsdom": "^27.0.0",
|
|
"@types/leaflet": "^1.9.21",
|
|
"@types/lodash-es": "^4.17.12",
|
|
"@types/luxon": "^3.7.1",
|
|
"@types/node": "^25.0.3",
|
|
"@types/uuid": "^11.0.0",
|
|
"@vitejs/plugin-vue": "^6.0.3",
|
|
"@vitejs/plugin-vue-jsx": "^5.1.3",
|
|
"@vitest/coverage-v8": "^4.0.16",
|
|
"@vitest/ui": "^4.0.16",
|
|
"@vue/eslint-config-prettier": "^10.2.0",
|
|
"@vue/eslint-config-typescript": "^14.6.0",
|
|
"@vue/test-utils": "^2.4.6",
|
|
"@vue/tsconfig": "^0.8.1",
|
|
"autoprefixer": "^10.4.23",
|
|
"c8": "^10.1.3",
|
|
"cypress": "^15.8.1",
|
|
"cypress-localstorage-commands": "^2.2.8",
|
|
"dotenv": "^17.2.3",
|
|
"eslint": "^9.39.2",
|
|
"eslint-config-prettier": "^10.1.8",
|
|
"eslint-plugin-cypress": "^5.2.0",
|
|
"eslint-plugin-vue": "^10.6.2",
|
|
"fs-extra": "^11.3.3",
|
|
"happy-dom": "^20.0.11",
|
|
"jsdom": "^27.4.0",
|
|
"msw": "^2.12.7",
|
|
"npm-run-all": "^4.1.5",
|
|
"postcss": "^8.5.6",
|
|
"prettier": "^3.7.4",
|
|
"rollup-plugin-analyzer": "^4.0.0",
|
|
"rollup-plugin-visualizer": "^6.0.5",
|
|
"sass": "^1.97.1",
|
|
"sass-loader": "^16.0.6",
|
|
"start-server-and-test": "^2.1.3",
|
|
"tailwindcss": "^4.1.18",
|
|
"typescript": "~5.9.3",
|
|
"vite": "^7.3.0",
|
|
"vite-plugin-istanbul": "^7.2.1",
|
|
"vite-plugin-monaco-editor": "^1.1.0",
|
|
"vitest": "^4.0.16",
|
|
"vitest-canvas-mock": "^1.1.3",
|
|
"vue-tsc": "^3.2.1"
|
|
}
|
|
}
|