mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-05 16:10:43 +00:00
Omkar Kesarkhane
2c17c07a11
## Problem RUM-to-traces correlation stopped working after the browser SDK 0.4.x line. The SDK's identifiers became plain `BigInt`, so the unchanged `toString(16)` serialization silently started dropping leading zeros. Trace ids are UUIDv7-shaped (48-bit ms timestamp in the top bits), so the leading hex nibble is always zero today — effectively every RUM event stored a 31-char `_oo_trace_id`/`_o2_trace_id` while the traces stream stores the padded 32-char `trace_id` (the `traceparent` header was padded correctly, so backend traces have the full id). Exact-match correlation could never hit, in either direction. Verified against live data: for sampled traced requests, `'0' + stored_id` found the backend trace every time; the stored id never did. ## Fix (frontend compatibility layer) Works for the already-ingested short ids **and** for correct ids from the fixed SDK: - `utils/rum/fields.ts`: `normalizeTraceId` (pads to canonical 32-char hex), `traceIdLookupVariants` (padded + legacy zero-stripped forms), `rumFieldEqualsAnySql` (matches both namespace spellings x both id forms), and a shared `RUM_CORRELATION_TRACES_STREAM` constant replacing four scattered "default" literals. - `useRumSpanBuilder`: trace→RUM lookup queries both id forms; canonical id stamped on generated RUM spans. - `useTraceCorrelation`: backend-span query now targets the real `default` traces stream (was a nonexistent `_traces` stream) as `page_type: "traces"` (was `"logs"`), with the padded id. - `EventDetailDrawerContent`: trace navigation pads the id before building the route. - `PlayerTracesTab`: the session Traces tab canonicalizes ids before the traces-stream metadata join (rows were silently dropped). - `ErrorViewer`: error correlation card receives the padded id; implausible (non-hex) ids hide the card instead of showing a misleading empty state. - `package.json`: browser SDK bumped to 0.4.2-beta.3, which serializes trace/span ids as fixed-width canonical hex at the source (resolved `browser-rum-core` verified at 0.4.2-beta.3). ## Testing - New unit coverage: `fields.spec.ts` (16 tests) plus regression tests in each touched spec (legacy 31-char id fixtures asserting padded 32-char behavior); full RUM/traces suites green (53 files, 1971 passed). - Live-verified against real data: a trace from the broken window renders the full RUM hierarchy (Session→View→Action→Resource + backend spans) where the old code showed backend spans only; pre-regression sessions still correlate (no behavior change for correct ids). - `npm run lint` and `npm run type-check` clean.
178 lines
6.4 KiB
JSON
178 lines
6.4 KiB
JSON
{
|
|
"name": "zinc-observe-web",
|
|
"version": "0.1.0",
|
|
"license": "AGPL-3.0",
|
|
"private": true,
|
|
"type": "module",
|
|
"engines": {
|
|
"node": ">=20"
|
|
},
|
|
"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",
|
|
"type-check:app": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
|
|
"type-check:composite-alerts": "vue-tsc --noEmit -p tsconfig.composite-alerts-tests.json --composite false",
|
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
|
|
"lint:ci": "eslint \"src/**/*.{vue,ts,js,css}\" --no-fix",
|
|
"lint:styles": "stylelint \"src/**/*.{css,vue}\"",
|
|
"lint:tokens": "node scripts/check-css-tokens.mjs",
|
|
"lint:token-purity": "node scripts/check-token-purity.mjs",
|
|
"lint:design": "node scripts/check-design-consistency.mjs",
|
|
"lint:design:strict": "node scripts/check-design-consistency.mjs",
|
|
"format": "prettier --write \"src/**/*.{ts,tsx,vue,js,json,scss,css,md}\"",
|
|
"format:check": "prettier --check \"src/**/*.{ts,tsx,vue,js,json,scss,css,md}\"",
|
|
"verify": "npm run type-check:app && npm run lint:ci && npm run lint:styles && npm run lint:tokens && npm run lint:token-purity && npm run lint:design:strict",
|
|
"verify:all": "npm run verify && npm run test:coverage:check"
|
|
},
|
|
"dependencies": {
|
|
"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
|
|
"@joakimono/echarts-extension-leaflet": "^1.1.0",
|
|
"@openobserve/browser-logs": "0.4.2-beta.3",
|
|
"@openobserve/browser-rum": "0.4.2-beta.3",
|
|
"@openobserve/node-sql-parser": "^0.1.5",
|
|
"@openobserve/rrweb-player": "^0.2.1",
|
|
"@rudderstack/analytics-js": "3.6.0",
|
|
"@tanstack/vue-form": "^1.33.3",
|
|
"@tanstack/vue-table": "^8.21.3",
|
|
"@tanstack/vue-virtual": "^3.13.35",
|
|
"@types/js-yaml": "^4.0.9",
|
|
"@vue-flow/background": "^1.3.2",
|
|
"@vue-flow/controls": "^1.1.3",
|
|
"@vue-flow/core": "^1.48.2",
|
|
"acorn": "^8.18.0",
|
|
"acorn-walk": "^8.3.5",
|
|
"cron-parser": "^5.7.0",
|
|
"d3-force": "^3.0.0",
|
|
"d3-scale": "^4.0.2",
|
|
"date-fns": "^4.4.0",
|
|
"date-fns-tz": "^3.2.0",
|
|
"dompurify": "^3.4.13",
|
|
"echarts": "^6.1.0",
|
|
"echarts-gl": "^2.1.0",
|
|
"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.8",
|
|
"js-yaml": "^4.3.1",
|
|
"json-2-csv": "^5.5.11",
|
|
"jszip": "^3.10.1",
|
|
"leaflet": "^1.9.4",
|
|
"lodash-es": "^4.18.1",
|
|
"lucide-vue-next": "^0.562.0",
|
|
"luxon": "^3.7.2",
|
|
"marked": "^17.0.1",
|
|
"moment": "^2.30.1",
|
|
"moment-timezone": "^0.6.3",
|
|
"monaco-editor": "^0.52.2",
|
|
"reka-ui": "^2.10.1",
|
|
"reodotdev": "^1.1.0",
|
|
"rollup-plugin-node-polyfills": "^0.2.1",
|
|
"rollup-plugin-polyfill-node": "^0.13.0",
|
|
"sql-formatter": "^15.8.2",
|
|
"tw-animate-css": "^1.4.0",
|
|
"uuid": "^14.0.1",
|
|
"vue": "^3.5.41",
|
|
"vue-drag-resize": "^1.5.4",
|
|
"vue-draggable-next": "^2.3.0",
|
|
"vue-i18n": "^11.4.8",
|
|
"vue-router": "^4.6.4",
|
|
"vuex": "^4.1.0",
|
|
"zod": "^4.4.3"
|
|
},
|
|
"devDependencies": {
|
|
"@cypress/vue": "^6.0.3",
|
|
"@cypress/webpack-dev-server": "^5.6.2",
|
|
"@eslint/css": "^1.4.0",
|
|
"@eslint/css-tree": "^4.0.5",
|
|
"@iconify-json/logos": "^1.2.12",
|
|
"@iconify-json/majesticons": "^1.2.5",
|
|
"@iconify-json/material-symbols": "^1.2.88",
|
|
"@iconify-json/mdi": "^1.2.3",
|
|
"@iconify-json/octicon": "^1.2.31",
|
|
"@iconify-json/si": "^1.2.17",
|
|
"@intlify/core-base": "^11.4.8",
|
|
"@intlify/eslint-plugin-vue-i18n": "^4.5.1",
|
|
"@rushstack/eslint-patch": "^1.16.1",
|
|
"@tailwindcss/postcss": "^4.3.3",
|
|
"@tailwindcss/typography": "^0.5.20",
|
|
"@tailwindcss/vite": "^4.3.3",
|
|
"@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.22",
|
|
"@types/lodash-es": "^4.17.12",
|
|
"@types/luxon": "^3.7.3",
|
|
"@types/node": "^25.0.3",
|
|
"@types/uuid": "^11.0.0",
|
|
"@typescript-eslint/eslint-plugin": "^8.66.0",
|
|
"@typescript-eslint/parser": "^8.66.0",
|
|
"@vitejs/plugin-vue": "^6.0.8",
|
|
"@vitejs/plugin-vue-jsx": "^5.1.6",
|
|
"@vitest/coverage-v8": "^4.1.10",
|
|
"@vitest/ui": "^4.1.10",
|
|
"@vue/eslint-config-prettier": "^10.2.0",
|
|
"@vue/eslint-config-typescript": "^14.9.0",
|
|
"@vue/test-utils": "^2.4.11",
|
|
"@vue/tsconfig": "^0.8.1",
|
|
"autoprefixer": "^10.5.4",
|
|
"c8": "^10.1.3",
|
|
"cypress": "^15.20.0",
|
|
"cypress-localstorage-commands": "^2.3.0",
|
|
"dotenv": "^17.4.2",
|
|
"eslint": "^9.39.2",
|
|
"eslint-config-prettier": "^10.1.8",
|
|
"eslint-formatter-unix": "^9.0.1",
|
|
"eslint-plugin-cypress": "^5.2.0",
|
|
"eslint-plugin-vue": "^10.10.0",
|
|
"fs-extra": "^11.4.0",
|
|
"happy-dom": "^20.11.1",
|
|
"jsdom": "^27.4.0",
|
|
"msw": "^2.15.0",
|
|
"npm-run-all": "^4.1.5",
|
|
"postcss": "^8.5.26",
|
|
"postcss-html": "^1.8.1",
|
|
"prettier": "^3.9.6",
|
|
"prettier-plugin-tailwindcss": "^0.8.1",
|
|
"rollup-plugin-analyzer": "^4.0.0",
|
|
"rollup-plugin-visualizer": "^6.0.5",
|
|
"sass": "^1.102.0",
|
|
"sass-loader": "^16.0.6",
|
|
"start-server-and-test": "^2.1.3",
|
|
"stylelint": "^17.14.1",
|
|
"tailwindcss": "^4.1.18",
|
|
"typescript": "~5.9.3",
|
|
"unplugin-icons": "^23.0.1",
|
|
"vite": "^7.3.2",
|
|
"vite-plugin-istanbul": "^7.2.1",
|
|
"vite-plugin-monaco-editor": "^1.1.0",
|
|
"vitest": "^4.1.10",
|
|
"vitest-canvas-mock": "^1.1.4",
|
|
"vue-tsc": "^3.3.9"
|
|
},
|
|
"overrides": {
|
|
"axios": "1.18.0",
|
|
"sockjs": {
|
|
"uuid": "11.1.1"
|
|
}
|
|
}
|
|
}
|