From 60275914d8a3643ace4d8d68a00a04446fd84b5e Mon Sep 17 00:00:00 2001 From: Catalin4513 Date: Mon, 29 Jun 2026 16:53:18 +0300 Subject: [PATCH 01/73] feat: add React + Sentry example --- README.md | 9 + react/.env.example | 10 + react/.gitignore | 5 + react/README.md | 103 +++ react/index.html | 12 + react/package-lock.json | 1915 +++++++++++++++++++++++++++++++++++++++ react/package.json | 23 + react/src/App.css | 271 ++++++ react/src/App.tsx | 260 ++++++ react/src/index.css | 44 + react/src/instrument.ts | 40 + react/src/main.tsx | 20 + react/tsconfig.json | 27 + react/vite.config.ts | 8 + 14 files changed, 2747 insertions(+) create mode 100644 react/.env.example create mode 100644 react/.gitignore create mode 100644 react/README.md create mode 100644 react/index.html create mode 100644 react/package-lock.json create mode 100644 react/package.json create mode 100644 react/src/App.css create mode 100644 react/src/App.tsx create mode 100644 react/src/index.css create mode 100644 react/src/instrument.ts create mode 100644 react/src/main.tsx create mode 100644 react/tsconfig.json create mode 100644 react/vite.config.ts diff --git a/README.md b/README.md index 42c34b0..f4df6c1 100644 --- a/README.md +++ b/README.md @@ -1 +1,10 @@ # examples + +Runnable examples of sending data from Sentry SDKs to [Uptrace](https://uptrace.dev). +Each example is named after its framework or platform. + +| Example | Description | +| --- | --- | +| [react](react) | A minimal React (Vite + TS) todo app instrumented with `@sentry/react`, sending errors, breadcrumbs and spans to Uptrace. | + +Each example has its own `README.md` with setup and run instructions. diff --git a/react/.env.example b/react/.env.example new file mode 100644 index 0000000..9fbc639 --- /dev/null +++ b/react/.env.example @@ -0,0 +1,10 @@ +# Copy this file to `.env` and paste your Uptrace Sentry DSN. +# +# Get it from Uptrace: open your project, go to "DSN", switch to the +# "Sentry" tab, and copy the DSN. It looks like: +# +# http://@/ +# +# For a local self-hosted Uptrace the ingest host is usually localhost:14318, +# e.g. http://project2_secret_token@localhost:14318/2 +VITE_SENTRY_DSN= diff --git a/react/.gitignore b/react/.gitignore new file mode 100644 index 0000000..a697a69 --- /dev/null +++ b/react/.gitignore @@ -0,0 +1,5 @@ +node_modules +dist +.env +*.local +*.tsbuildinfo diff --git a/react/README.md b/react/README.md new file mode 100644 index 0000000..6518fe9 --- /dev/null +++ b/react/README.md @@ -0,0 +1,103 @@ +# React + Sentry → Uptrace + +A minimal React (Vite + TypeScript) todo app instrumented with the +[`@sentry/react`](https://docs.sentry.io/platforms/javascript/guides/react/) +SDK. Uptrace speaks the Sentry ingest protocol, so the Sentry SDK sends data to +Uptrace **without any extra exporter** — you just point the SDK's DSN at your +Uptrace project. + +You'll be able to: + +- click around a todo list and generate **breadcrumbs**, +- press a button to throw an **error** (of a few different types) that shows up in Uptrace, +- press a button to send a **log message** at a chosen level, +- press a button to run a traced task and see the resulting **spans / trace**. + +## How it works + +The Sentry SDK builds its request URLs from the DSN you give it +(`https://@/` → `POST /api//envelope/`). +Uptrace exposes exactly those endpoints, where the Sentry "key" is your Uptrace +**project token** and the project id is the final segment of the DSN. So +instrumentation is just a standard `Sentry.init({ dsn })` — see +[`src/instrument.ts`](src/instrument.ts). + +## Prerequisites + +- [Node.js](https://nodejs.org) 18 or newer (includes `npm`). +- A running Uptrace and a project to send data to: + - **Self-hosted:** follow the [Uptrace get-started guide](https://uptrace.dev/get-started). + The Sentry ingest host is usually `localhost:14318`. + - **Uptrace Cloud:** create a project at . + +## 1. Get your Uptrace Sentry DSN + +1. Open your project in Uptrace. +2. In the left sidebar, open the **Project** section and click **Data Source + Name** (the page at `/projects//dsn`). +3. Switch to the **Sentry** tab and use the copy button next to the DSN. + +It looks like: + +``` +http://project2_secret_token@localhost:14318/2 +``` + +(`project2_secret_token` is your project token, `2` is the project id.) + +## 2. Configure and run + +```bash +# from this directory: examples/react +cp .env.example .env +# then edit .env and paste your DSN into VITE_SENTRY_DSN + +npm install +npm run dev +``` + +Open the URL Vite prints (default ). + +## 3. Generate some data + +In the app: + +- **Add / toggle / delete / filter** a few todos — each action records a + breadcrumb, so the error you trigger next has a trail leading up to it. +- Click **Run traced task** — runs a span with two child spans. +- Click **Send log message** — sends a log message at a random level + (info / warning / error). +- Click **Throw test error** — throws an uncaught error that Sentry captures. + +The last two buttons pick from a small pool each click, so repeated clicks +produce a variety of messages and error types in Uptrace. The SDK sends events +over the network as you interact. (Open your browser's devtools Network tab and +look for requests to `/api//envelope/` to confirm they're leaving +the browser.) + +## 4. See it in Uptrace + +- **Errors** — open your project and look under **Errors** / **Logs**. Each + click of **Throw test error** sends one of several types (`Error`, + `TypeError`, `RangeError`, `TodoSyncError`). Open one to see the stack trace + (which runs through the app's `syncTodos` / `buildSyncPayload` frames) and, in + the event detail, the **breadcrumbs** (the trail of todo actions that preceded + it). +- **Messages** — the **Send log message** events also appear under + **Logs** / **Errors**, tagged with their level. +- **Traces / spans** — open **Traces & Spans** and look for `run_traced_task` + (with `step_one` / `step_two` children) and `add_todo`. The browser tracing + integration also produces page-load and navigation spans. + +If nothing shows up, double-check that `VITE_SENTRY_DSN` is set (the app logs a +warning in the browser console if it isn't) and that the DSN host matches your +Uptrace ingest address. Restart `npm run dev` after editing `.env`. + +## Project layout + +| File | Purpose | +| --- | --- | +| `src/instrument.ts` | `Sentry.init()` — the only Uptrace-specific wiring. | +| `src/main.tsx` | Imports instrumentation first; wraps the app in `Sentry.ErrorBoundary`. | +| `src/App.tsx` | The todo UI plus the breadcrumb / error / span demo actions. | +| `.env.example` | Template for the `VITE_SENTRY_DSN` setting. | diff --git a/react/index.html b/react/index.html new file mode 100644 index 0000000..a964ae0 --- /dev/null +++ b/react/index.html @@ -0,0 +1,12 @@ + + + + + + Uptrace + Sentry React example + + +
+ + + diff --git a/react/package-lock.json b/react/package-lock.json new file mode 100644 index 0000000..8ef9a6e --- /dev/null +++ b/react/package-lock.json @@ -0,0 +1,1915 @@ +{ + "name": "uptrace-sentry-react-example", + "version": "0.1.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "uptrace-sentry-react-example", + "version": "0.1.0", + "dependencies": { + "@sentry/react": "^10.57.0", + "react": "^19.2.0", + "react-dom": "^19.2.0" + }, + "devDependencies": { + "@types/react": "^19.2.0", + "@types/react-dom": "^19.2.0", + "@vitejs/plugin-react": "^5.0.0", + "typescript": "^5.7.0", + "vite": "^6.0.0" + } + }, + "node_modules/@babel/code-frame": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz", + "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-validator-identifier": "^7.29.7", + "js-tokens": "^4.0.0", + "picocolors": "^1.1.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/compat-data": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz", + "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/core": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz", + "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.7", + "@babel/helper-compilation-targets": "^7.29.7", + "@babel/helper-module-transforms": "^7.29.7", + "@babel/helpers": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/template": "^7.29.7", + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7", + "@jridgewell/remapping": "^2.3.5", + "convert-source-map": "^2.0.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.2", + "json5": "^2.2.3", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/babel" + } + }, + "node_modules/@babel/generator": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz", + "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7", + "@jridgewell/gen-mapping": "^0.3.12", + "@jridgewell/trace-mapping": "^0.3.28", + "jsesc": "^3.0.2" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-compilation-targets": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz", + "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/compat-data": "^7.29.7", + "@babel/helper-validator-option": "^7.29.7", + "browserslist": "^4.24.0", + "lru-cache": "^5.1.1", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-globals": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz", + "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-imports": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz", + "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-transforms": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz", + "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-module-imports": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7", + "@babel/traverse": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/helper-plugin-utils": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz", + "integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz", + "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz", + "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-option": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz", + "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helpers": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz", + "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/parser": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz", + "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.29.7" + }, + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-self": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.29.7.tgz", + "integrity": "sha512-TL0hMc9xzy86VD31nUiwzd5otRAcyEPcsegCxolO0PvcXuH1v0kECe/UIznYFihpkvU5wg/jk4v0TTEFfm53fw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-source": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.29.7.tgz", + "integrity": "sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/template": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz", + "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.7.tgz", + "integrity": "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.7", + "@babel/helper-globals": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.7", + "debug": "^4.3.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/types": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz", + "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-string-parser": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@esbuild/aix-ppc64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz", + "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-arm": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz", + "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz", + "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz", + "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz", + "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz", + "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz", + "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz", + "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz", + "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz", + "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz", + "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz", + "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz", + "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==", + "cpu": [ + "mips64el" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz", + "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz", + "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz", + "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz", + "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/netbsd-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz", + "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz", + "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openbsd-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz", + "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz", + "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openharmony-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz", + "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openharmony" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz", + "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz", + "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz", + "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz", + "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.3.13", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", + "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.0", + "@jridgewell/trace-mapping": "^0.3.24" + } + }, + "node_modules/@jridgewell/remapping": { + "version": "2.3.5", + "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz", + "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.24" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", + "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.5.5", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz", + "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==", + "dev": true, + "license": "MIT" + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.31", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz", + "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, + "node_modules/@rolldown/pluginutils": { + "version": "1.0.0-rc.3", + "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.3.tgz", + "integrity": "sha512-eybk3TjzzzV97Dlj5c+XrBFW57eTNhzod66y9HrBlzJ6NsCrWCp/2kaPS3K9wJmurBC0Tdw4yPjXKZqlznim3Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/@rollup/rollup-android-arm-eabi": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.62.2.tgz", + "integrity": "sha512-6o7ZLZK+BeenkZCFNDXqpbjw9bD6nuWonvS/lwQJp7NoVVxm6p3qE7qQ5jGuBjiFsgvqjD8mZAU5oWxTmbOeOg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-android-arm64": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.62.2.tgz", + "integrity": "sha512-BaH7BllCACHoH1LguOU56UItGfUWjujlO65kS9LAodViaN4bwIKd7oeW/ZHJ/4ljr/7MIiENnNy3HJ0zXv8Zkw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.62.2.tgz", + "integrity": "sha512-v39RCCvj4He82I9sFmk+M1VZ0PLM9sfsLVikjfx2hYBNALhrrOR2D3JjQA6AhlaSOgcR+RzrKY7e1+bT6SUO/A==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-darwin-x64": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.62.2.tgz", + "integrity": "sha512-yl0y2vq3S3lHeuXhEdss6TWfKW8vkujImO12tn4ZkG/4oghr09LvdYm2RElVjokTQiUvDUGXLGsYeLqUMCKpGA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-freebsd-arm64": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.62.2.tgz", + "integrity": "sha512-tT4pvt4qXD+vEoezupCWi+a1F0vvDiksiHc+PxRlYTOH1I6/X4id9jPxTP+Fg+545euaFT1jJVs4CEdHZAU1vw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ] + }, + "node_modules/@rollup/rollup-freebsd-x64": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.62.2.tgz", + "integrity": "sha512-6nU5F2wCW+qvCBhTn1pdIU3bzsIoF7EUwsCDRxilWGprQR6yd508YnH9+OKFCwpfS8pjZqDUmnCAr7exax0XCg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ] + }, + "node_modules/@rollup/rollup-linux-arm-gnueabihf": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.62.2.tgz", + "integrity": "sha512-n1GJHPOvpIfhi3TmrCeh6S6URt9BFCt0KQE3qvexyGCTAKpR4Lg+eWvNZEqu7epxwus/8ElT3hacYEucm49SZg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm-musleabihf": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.62.2.tgz", + "integrity": "sha512-JqgflS8wEB+UXV/vS1RpRbifGBeN4D5lz8D8oOFbFZw4vedvdOgCFAjfBmIMdW3yL10XpQQ0Ambepw6MXrhOnA==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-gnu": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.62.2.tgz", + "integrity": "sha512-wnFJkogWvN4jm/hQRF2UBaeUmk20j5+DmHvoyWii2b8HJDyvz1MF2OU/6ynXt2KR63rbZLWkFpoytpdc/yBuSA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-musl": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.62.2.tgz", + "integrity": "sha512-HVu2bp0zhvJ8xHEV9+UUs7S90VadmBSY3LcIMvozbPo4AuMGDWlz3ymHLHZPX4hR67TKTt8Qp5PJ5RBg/i+RMQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-loong64-gnu": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.62.2.tgz", + "integrity": "sha512-mQqqAV8QaoSgr9I2fKDLY2BAVvmKjWoGiu/cSYQonsLvtqwEn1E4QYfnCOcp5zoEqNhsDYin1s6jx/VJmrxlZg==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-loong64-musl": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.62.2.tgz", + "integrity": "sha512-IxKLoxCQ2IWi6bT2akyDUBGsOImDKB+sPp4EsTmwFQ/fMwpCKm8uLSSgP/Kx/QYUgKis6SEZ5/Nlhup0DIA0PQ==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-ppc64-gnu": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.62.2.tgz", + "integrity": "sha512-Mk5ha2RQSgyFfmYYLkBpPnUk8D8FriBxesO1u9O75X0mHgXL1UQcH5Itl2lurWL2tj0RxV9b9tJgipac0hRY9A==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-ppc64-musl": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.62.2.tgz", + "integrity": "sha512-CjvEnqJL/0/TQ3TXX3OPIJ/kmBellrWd4heXUmHeJlTnmwjKpSJzoehLaL6Xk0ZnMHBu9dZuFADNOrtjF4v+2w==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-riscv64-gnu": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.62.2.tgz", + "integrity": "sha512-1SiZbzwdkaDURsew/tSOrooKiYy7EQGT6m8ufavAi9NEyQb/6VuIxFXAL1fqa4iZe3g4NbNk4P7J32z2tw5Mgg==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-riscv64-musl": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.62.2.tgz", + "integrity": "sha512-nQts12zJ3NQRoE6uYljOH89v7szzLDvG2JD/vsX+vGXU8w/At1GowTZ5/7qeFQ8m7L55rpR8Okugnuo5bgjy2Q==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-s390x-gnu": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.62.2.tgz", + "integrity": "sha512-E9/ll019jhPIJgpzfZoIkBGhcz+kKNgVWYRY0zr9srBdPPFVpvOKW8VaJKUbeK+eZXyQF9ltME+Kk6affeaPgg==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.62.2.tgz", + "integrity": "sha512-5BqxR/pshjey51iliyzTD5Xi3EN0aLmQ2lZ3lvefVV9c82BvrLo2/6OT55iifpWBufs6kdwWbuOKS841DrmK9A==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.62.2.tgz", + "integrity": "sha512-uNN83XxQrRAh/w0/pmAfibcwyb6YWt4gP+dpnQKPVJshAloQ785ii8CT8ZCIxkGg9opVsvAlGhFitSm6D1Jjpg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-openbsd-x64": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.62.2.tgz", + "integrity": "sha512-srjEIxSH3LRnJN6THczDHWQplqEMFiAJrTab0msUryh9kwNpkICf3Ea6q6MN/2cZwRFUNx5w+h6Hpi4QuHS6Zg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ] + }, + "node_modules/@rollup/rollup-openharmony-arm64": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.62.2.tgz", + "integrity": "sha512-8hOJnxgbyObnCm5AlRA3A931xX19xq80RjVTKgJOvEKWqJruP/Uf12IbAOaDjjEXYRewwHLfmF0YRIdK3OwKWA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openharmony" + ] + }, + "node_modules/@rollup/rollup-win32-arm64-msvc": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.62.2.tgz", + "integrity": "sha512-mmF4AY1i0hG/bLWUctUq59gtmgaSIRa3cu/A3JFRp/sCNEme2bgDEiDS22P9FbnJB8NJNF4jPJiSP5RHQpUTDg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-ia32-msvc": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.62.2.tgz", + "integrity": "sha512-DZgkknc6jhHrk46V25vbAM0zZkyP0nSDkJB8/dRkLTxv470dOmWDqGoEJl/9A0dFfS7yE3REOwNDxpHwSLSt0Q==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-x64-gnu": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.62.2.tgz", + "integrity": "sha512-T6xr6ucWSFto+VGajA8YH26LdpHRuP4YLHEKAtCWvJDOlnmWcDZVCI2Jmjr+IFHDlt2zRaTAKE4tfjTaWLgJBg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.62.2.tgz", + "integrity": "sha512-BfzEnDJOt9T8M989/lA37EcJgat01wLRnoi5dQf3QzOH7jzpqTAzdDbVfRljVr5r+jzKqpbHeyOfAaXxAd0PAA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@sentry/browser": { + "version": "10.62.0", + "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-10.62.0.tgz", + "integrity": "sha512-uJi0yPssB3Nt/cZ8/S8opW42gaM59/6IyNtPFYD7C0ciudi/nIo5QMVpCYBBI3jnKFOIQLlsMT4pDlOLuxxNuQ==", + "license": "MIT", + "dependencies": { + "@sentry/browser-utils": "10.62.0", + "@sentry/core": "10.62.0", + "@sentry/feedback": "10.62.0", + "@sentry/replay": "10.62.0", + "@sentry/replay-canvas": "10.62.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@sentry/browser-utils": { + "version": "10.62.0", + "resolved": "https://registry.npmjs.org/@sentry/browser-utils/-/browser-utils-10.62.0.tgz", + "integrity": "sha512-mS9HVVuWIdye9o0xUGFmzNOBqktF4n5kugrF8NCOYYDrr5ZV8Cx7BlquHQn5UpCeViVhZtcDlEm4iOK7++Px7A==", + "license": "MIT", + "dependencies": { + "@sentry/core": "10.62.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@sentry/core": { + "version": "10.62.0", + "resolved": "https://registry.npmjs.org/@sentry/core/-/core-10.62.0.tgz", + "integrity": "sha512-tV69fMg2sS5DUFmQSnS7Jd5qJAp0izxwcsvBVz2ieTM9VMRi99IfOSYW9UYr3p1yfuksk41kefN5PEbeedUE+A==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/@sentry/feedback": { + "version": "10.62.0", + "resolved": "https://registry.npmjs.org/@sentry/feedback/-/feedback-10.62.0.tgz", + "integrity": "sha512-d0BVjJVny6qpBgGJgWL0fbcoQHjtD3z3R8EK/KzTS3RO92JX5n3A536n5D/rh0gZFgcIwiUzBXegmyPOSQn9ng==", + "license": "MIT", + "dependencies": { + "@sentry/core": "10.62.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@sentry/react": { + "version": "10.62.0", + "resolved": "https://registry.npmjs.org/@sentry/react/-/react-10.62.0.tgz", + "integrity": "sha512-PChimVpY0wzs3H/hJqyl87/ITTHwIZWTSY68QoENZyLnp7DvLcFiZYub/gFws1pzDPhtIQXVLU72fbmUjT5PSg==", + "license": "MIT", + "dependencies": { + "@sentry/browser": "10.62.0", + "@sentry/core": "10.62.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "react": "^16.14.0 || 17.x || 18.x || 19.x" + } + }, + "node_modules/@sentry/replay": { + "version": "10.62.0", + "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-10.62.0.tgz", + "integrity": "sha512-rWp4hBhZOmdQhisxcKzAwTGiRk/LvWnNaElWe7nbRhjsM/usp2095yfjq4iJ47v9MtO7xxY6eUz++fLBycqXKg==", + "license": "MIT", + "dependencies": { + "@sentry/browser-utils": "10.62.0", + "@sentry/core": "10.62.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@sentry/replay-canvas": { + "version": "10.62.0", + "resolved": "https://registry.npmjs.org/@sentry/replay-canvas/-/replay-canvas-10.62.0.tgz", + "integrity": "sha512-CzPAxmpe5US/ABGA1TzpjFKOFZN5uqlzrRh/uM9/daVuzLVKIAQ0XRNxo/PPEXvlDm/PoMdI5L0qIODuIKnyyw==", + "license": "MIT", + "dependencies": { + "@sentry/core": "10.62.0", + "@sentry/replay": "10.62.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@types/babel__core": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", + "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.20.7", + "@babel/types": "^7.20.7", + "@types/babel__generator": "*", + "@types/babel__template": "*", + "@types/babel__traverse": "*" + } + }, + "node_modules/@types/babel__generator": { + "version": "7.27.0", + "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz", + "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__template": { + "version": "7.4.4", + "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz", + "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.1.0", + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__traverse": { + "version": "7.28.0", + "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz", + "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.28.2" + } + }, + "node_modules/@types/estree": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz", + "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/react": { + "version": "19.2.17", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz", + "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==", + "dev": true, + "license": "MIT", + "dependencies": { + "csstype": "^3.2.2" + } + }, + "node_modules/@types/react-dom": { + "version": "19.2.3", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz", + "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "@types/react": "^19.2.0" + } + }, + "node_modules/@vitejs/plugin-react": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.2.0.tgz", + "integrity": "sha512-YmKkfhOAi3wsB1PhJq5Scj3GXMn3WvtQ/JC0xoopuHoXSdmtdStOpFrYaT1kie2YgFBcIe64ROzMYRjCrYOdYw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/core": "^7.29.0", + "@babel/plugin-transform-react-jsx-self": "^7.27.1", + "@babel/plugin-transform-react-jsx-source": "^7.27.1", + "@rolldown/pluginutils": "1.0.0-rc.3", + "@types/babel__core": "^7.20.5", + "react-refresh": "^0.18.0" + }, + "engines": { + "node": "^20.19.0 || >=22.12.0" + }, + "peerDependencies": { + "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" + } + }, + "node_modules/baseline-browser-mapping": { + "version": "2.10.40", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.40.tgz", + "integrity": "sha512-BSSLZ9/Cjjv7Gtj5B68ZzXcXUg8iOf3fme+FCuh8rC/Go+Kmh8cox7M3A8dolou16s64QjLPOSdngh7GxXvkSw==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "baseline-browser-mapping": "dist/cli.cjs" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/browserslist": { + "version": "4.28.4", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.4.tgz", + "integrity": "sha512-MTc8i/x9jBQd1iMw2CFGS+rwMa07eYjLR0CCTLDACl9xhxy+nIs3KeML/biicXtk9JrZ6dnnTatmc7ErPXIxqw==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "baseline-browser-mapping": "^2.10.38", + "caniuse-lite": "^1.0.30001799", + "electron-to-chromium": "^1.5.376", + "node-releases": "^2.0.48", + "update-browserslist-db": "^1.2.3" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" + } + }, + "node_modules/caniuse-lite": { + "version": "1.0.30001799", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001799.tgz", + "integrity": "sha512-hG1bReV+OUU+MOqK4t/ZWI0tZOyz3rqS9XuhOUz1cIcbwBKjOyJEJuw9ER5JuNyqxNk8u/JUVbGibBOL1yrjFw==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "CC-BY-4.0" + }, + "node_modules/convert-source-map": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", + "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", + "dev": true, + "license": "MIT" + }, + "node_modules/csstype": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", + "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/debug": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", + "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/electron-to-chromium": { + "version": "1.5.381", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.381.tgz", + "integrity": "sha512-n9Wa6yB+vDsGuA8AKbl/0z7HbvWqt5jxIdvr1IUicd0ryPrk7/xzwqLv8D9AbbvZ6avVNtXYLTfmgFHkwkyelg==", + "dev": true, + "license": "ISC" + }, + "node_modules/esbuild": { + "version": "0.25.12", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz", + "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.25.12", + "@esbuild/android-arm": "0.25.12", + "@esbuild/android-arm64": "0.25.12", + "@esbuild/android-x64": "0.25.12", + "@esbuild/darwin-arm64": "0.25.12", + "@esbuild/darwin-x64": "0.25.12", + "@esbuild/freebsd-arm64": "0.25.12", + "@esbuild/freebsd-x64": "0.25.12", + "@esbuild/linux-arm": "0.25.12", + "@esbuild/linux-arm64": "0.25.12", + "@esbuild/linux-ia32": "0.25.12", + "@esbuild/linux-loong64": "0.25.12", + "@esbuild/linux-mips64el": "0.25.12", + "@esbuild/linux-ppc64": "0.25.12", + "@esbuild/linux-riscv64": "0.25.12", + "@esbuild/linux-s390x": "0.25.12", + "@esbuild/linux-x64": "0.25.12", + "@esbuild/netbsd-arm64": "0.25.12", + "@esbuild/netbsd-x64": "0.25.12", + "@esbuild/openbsd-arm64": "0.25.12", + "@esbuild/openbsd-x64": "0.25.12", + "@esbuild/openharmony-arm64": "0.25.12", + "@esbuild/sunos-x64": "0.25.12", + "@esbuild/win32-arm64": "0.25.12", + "@esbuild/win32-ia32": "0.25.12", + "@esbuild/win32-x64": "0.25.12" + } + }, + "node_modules/escalade": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", + "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/fdir": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", + "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "picomatch": "^3 || ^4" + }, + "peerDependenciesMeta": { + "picomatch": { + "optional": true + } + } + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/gensync": { + "version": "1.0.0-beta.2", + "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", + "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/jsesc": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz", + "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==", + "dev": true, + "license": "MIT", + "bin": { + "jsesc": "bin/jsesc" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/json5": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", + "dev": true, + "license": "MIT", + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/lru-cache": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", + "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", + "dev": true, + "license": "ISC", + "dependencies": { + "yallist": "^3.0.2" + } + }, + "node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true, + "license": "MIT" + }, + "node_modules/nanoid": { + "version": "3.3.15", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz", + "integrity": "sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/node-releases": { + "version": "2.0.50", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.50.tgz", + "integrity": "sha512-J6l92tKHX6w8Jy5nO1Vuc01NoIiRGi/d6qBKVxh+IQ8Cr3b6HbVNfKiF8ZpFKufTwpwxMmce2W3iQZ861ZRyTg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/picocolors": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", + "dev": true, + "license": "ISC" + }, + "node_modules/picomatch": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", + "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/postcss": { + "version": "8.5.16", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.16.tgz", + "integrity": "sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.12", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/react": { + "version": "19.2.7", + "resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz", + "integrity": "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "19.2.7", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.7.tgz", + "integrity": "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==", + "license": "MIT", + "dependencies": { + "scheduler": "^0.27.0" + }, + "peerDependencies": { + "react": "^19.2.7" + } + }, + "node_modules/react-refresh": { + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz", + "integrity": "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/rollup": { + "version": "4.62.2", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.2.tgz", + "integrity": "sha512-RFnrW4lhXA3s3eqHDZvN654g8OTjzRfqpIRJYczCGB6HzphckVAi/Qh4tbPUbRuDi7s1Llv8g/NspLkttY3gTA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/estree": "1.0.9" + }, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "@rollup/rollup-android-arm-eabi": "4.62.2", + "@rollup/rollup-android-arm64": "4.62.2", + "@rollup/rollup-darwin-arm64": "4.62.2", + "@rollup/rollup-darwin-x64": "4.62.2", + "@rollup/rollup-freebsd-arm64": "4.62.2", + "@rollup/rollup-freebsd-x64": "4.62.2", + "@rollup/rollup-linux-arm-gnueabihf": "4.62.2", + "@rollup/rollup-linux-arm-musleabihf": "4.62.2", + "@rollup/rollup-linux-arm64-gnu": "4.62.2", + "@rollup/rollup-linux-arm64-musl": "4.62.2", + "@rollup/rollup-linux-loong64-gnu": "4.62.2", + "@rollup/rollup-linux-loong64-musl": "4.62.2", + "@rollup/rollup-linux-ppc64-gnu": "4.62.2", + "@rollup/rollup-linux-ppc64-musl": "4.62.2", + "@rollup/rollup-linux-riscv64-gnu": "4.62.2", + "@rollup/rollup-linux-riscv64-musl": "4.62.2", + "@rollup/rollup-linux-s390x-gnu": "4.62.2", + "@rollup/rollup-linux-x64-gnu": "4.62.2", + "@rollup/rollup-linux-x64-musl": "4.62.2", + "@rollup/rollup-openbsd-x64": "4.62.2", + "@rollup/rollup-openharmony-arm64": "4.62.2", + "@rollup/rollup-win32-arm64-msvc": "4.62.2", + "@rollup/rollup-win32-ia32-msvc": "4.62.2", + "@rollup/rollup-win32-x64-gnu": "4.62.2", + "@rollup/rollup-win32-x64-msvc": "4.62.2", + "fsevents": "~2.3.2" + } + }, + "node_modules/scheduler": { + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", + "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", + "license": "MIT" + }, + "node_modules/semver": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/source-map-js": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/tinyglobby": { + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz", + "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==", + "dev": true, + "license": "MIT", + "dependencies": { + "fdir": "^6.5.0", + "picomatch": "^4.0.4" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/SuperchupuDev" + } + }, + "node_modules/typescript": { + "version": "5.9.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", + "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, + "node_modules/update-browserslist-db": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz", + "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "escalade": "^3.2.0", + "picocolors": "^1.1.1" + }, + "bin": { + "update-browserslist-db": "cli.js" + }, + "peerDependencies": { + "browserslist": ">= 4.21.0" + } + }, + "node_modules/vite": { + "version": "6.4.3", + "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.3.tgz", + "integrity": "sha512-NTKlcQjlAK7MlQoyb6LgaqHc8sso/pVyUJYWMws3jg21uTJw/LddqIFPcPqP6PzpgbIcZyKI85sFE4HBrQDA8A==", + "dev": true, + "license": "MIT", + "dependencies": { + "esbuild": "^0.25.0", + "fdir": "^6.4.4", + "picomatch": "^4.0.2", + "postcss": "^8.5.3", + "rollup": "^4.34.9", + "tinyglobby": "^0.2.13" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^18.0.0 || ^20.0.0 || >=22.0.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", + "jiti": ">=1.21.0", + "less": "*", + "lightningcss": "^1.21.0", + "sass": "*", + "sass-embedded": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.16.0", + "tsx": "^4.8.1", + "yaml": "^2.4.2" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "jiti": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + }, + "tsx": { + "optional": true + }, + "yaml": { + "optional": true + } + } + }, + "node_modules/yallist": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", + "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", + "dev": true, + "license": "ISC" + } + } +} diff --git a/react/package.json b/react/package.json new file mode 100644 index 0000000..3e7b055 --- /dev/null +++ b/react/package.json @@ -0,0 +1,23 @@ +{ + "name": "uptrace-sentry-react-example", + "private": true, + "version": "0.1.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc -b && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@sentry/react": "^10.57.0", + "react": "^19.2.0", + "react-dom": "^19.2.0" + }, + "devDependencies": { + "@types/react": "^19.2.0", + "@types/react-dom": "^19.2.0", + "@vitejs/plugin-react": "^5.0.0", + "typescript": "^5.7.0", + "vite": "^6.0.0" + } +} diff --git a/react/src/App.css b/react/src/App.css new file mode 100644 index 0000000..c5b5250 --- /dev/null +++ b/react/src/App.css @@ -0,0 +1,271 @@ +.app { + max-width: 34rem; + margin: 0 auto; + padding: clamp(2.5rem, 8vh, 5rem) 1.25rem 4rem; +} + +/* Masthead -------------------------------------------------------------- */ + +.masthead h1 { + margin: 0; + font-size: 2.25rem; + font-weight: 680; + letter-spacing: -0.02em; +} + +.tagline { + margin: 0.25rem 0 0; + color: var(--muted); + font-size: 0.95rem; +} + +/* Composer -------------------------------------------------------------- */ + +.composer { + display: flex; + gap: 0.5rem; + margin-top: 2rem; +} + +.composer input { + flex: 1; + padding: 0.6rem 0.75rem; + font-size: 0.95rem; + color: var(--ink); + background: var(--raised); + border: 1px solid var(--line-strong); + border-radius: var(--radius); + transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); +} + +.composer input::placeholder { + color: var(--faint); +} + +.composer input:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px var(--accent-ghost); +} + +/* Buttons --------------------------------------------------------------- */ + +.btn { + padding: 0.6rem 1rem; + font: inherit; + font-size: 0.9rem; + font-weight: 560; + border: 1px solid transparent; + border-radius: var(--radius); + cursor: pointer; + transition: background 0.15s var(--ease), border-color 0.15s var(--ease), + transform 0.08s var(--ease); +} + +.btn:active { + transform: translateY(1px); +} + +.btn-primary { + color: var(--on-accent); + background: var(--accent); +} + +.btn-primary:hover { + background: var(--accent-strong); +} + +.btn-quiet { + color: var(--ink); + background: var(--raised); + border-color: var(--line-strong); +} + +.btn-quiet:hover { + border-color: var(--ink); +} + +.btn-danger { + color: var(--danger); + background: transparent; + border-color: var(--danger); +} + +.btn-danger:hover { + background: var(--danger-tint); +} + +/* Toolbar: count, filters, clear --------------------------------------- */ + +.toolbar { + display: flex; + align-items: center; + gap: 0.75rem; + margin: 1.75rem 0 0.5rem; + font-size: 0.85rem; +} + +.count { + color: var(--muted); + font-variant-numeric: tabular-nums; +} + +.filters { + display: flex; + gap: 0.125rem; + margin-left: auto; + padding: 0.15rem; + background: var(--raised); + border: 1px solid var(--line); + border-radius: 7px; +} + +.filter { + padding: 0.25rem 0.6rem; + font: inherit; + font-size: 0.82rem; + text-transform: capitalize; + color: var(--muted); + background: transparent; + border: none; + border-radius: 5px; + cursor: pointer; + transition: color 0.15s var(--ease), background 0.15s var(--ease); +} + +.filter:hover { + color: var(--ink); +} + +.filter[aria-pressed='true'] { + color: var(--ink); + background: var(--paper); + box-shadow: 0 1px 2px oklch(0.27 0.018 60 / 0.08); +} + +.btn-text { + font: inherit; + font-size: 0.82rem; + color: var(--muted); + background: none; + border: none; + padding: 0.25rem 0; + cursor: pointer; + transition: color 0.15s var(--ease); +} + +.btn-text:hover:not(:disabled) { + color: var(--danger); +} + +.btn-text:disabled { + color: var(--faint); + cursor: not-allowed; +} + +/* Todo list ------------------------------------------------------------- */ + +.todos { + list-style: none; + margin: 0; + padding: 0; +} + +.todo { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.7rem 0; + border-bottom: 1px solid var(--line); + animation: enter 0.22s var(--ease); +} + +.todo label { + display: flex; + align-items: center; + gap: 0.65rem; + flex: 1; + cursor: pointer; +} + +.todo input[type='checkbox'] { + width: 1.05rem; + height: 1.05rem; + accent-color: var(--accent); + cursor: pointer; +} + +.todo label.done span { + color: var(--faint); + text-decoration: line-through; +} + +.remove { + font: inherit; + font-size: 0.8rem; + color: var(--faint); + background: none; + border: none; + padding: 0.2rem 0.3rem; + cursor: pointer; + opacity: 0; + transition: color 0.15s var(--ease), opacity 0.15s var(--ease); +} + +.todo:hover .remove, +.remove:focus-visible { + opacity: 1; +} + +.remove:hover { + color: var(--danger); +} + +.empty { + padding: 1.5rem 0; + color: var(--faint); + font-size: 0.9rem; +} + +/* Demo section ---------------------------------------------------------- */ + +.demo { + margin-top: 3rem; + padding-top: 1.5rem; + border-top: 1px solid var(--line); +} + +.demo h2 { + margin: 0 0 0.75rem; + font-size: 0.8rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--muted); +} + +.demo-actions { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.hint { + margin: 0.75rem 0 0; + font-size: 0.82rem; + color: var(--faint); +} + +@keyframes enter { + from { + opacity: 0; + transform: translateY(-4px); + } +} + +@media (prefers-reduced-motion: reduce) { + * { + animation: none !important; + transition: none !important; + } +} diff --git a/react/src/App.tsx b/react/src/App.tsx new file mode 100644 index 0000000..fb35bb8 --- /dev/null +++ b/react/src/App.tsx @@ -0,0 +1,260 @@ +import { useEffect, useMemo, useState } from 'react' +import * as Sentry from '@sentry/react' + +import './App.css' + +// A single todo item. +interface Todo { + id: string + text: string + done: boolean +} + +// Which todos the list is showing. +type Filter = 'all' | 'active' | 'completed' + +const STORAGE_KEY = 'uptrace-sentry-todos' + +// App is a small but real todo list: add, complete, filter, delete, and clear +// completed, persisted to localStorage. Every interaction also leaves a Sentry +// breadcrumb, so when an event reaches Uptrace you can see the trail of actions +// that led to it. Two extra buttons exist purely to generate telemetry: one +// throws an error, one runs a traced task (a span). +export default function App() { + const [todos, setTodos] = useState(loadTodos) + const [filter, setFilter] = useState('all') + const [text, setText] = useState('') + + // Persist on every change so a reload (or a developer coming back to the tab) + // keeps the list. + useEffect(() => { + localStorage.setItem(STORAGE_KEY, JSON.stringify(todos)) + }, [todos]) + + const remaining = todos.filter((t) => !t.done).length + const completed = todos.length - remaining + const visible = useMemo( + () => + todos.filter((t) => { + if (filter === 'active') return !t.done + if (filter === 'completed') return t.done + return true + }), + [todos, filter], + ) + + function addTodo() { + const trimmed = text.trim() + if (!trimmed) { + return + } + + // Wrap the work in a span so adding a todo shows up as a trace in Uptrace. + Sentry.startSpan({ name: 'add_todo', op: 'ui.action' }, () => { + setTodos((prev) => [...prev, { id: crypto.randomUUID(), text: trimmed, done: false }]) + setText('') + breadcrumb(`Added todo "${trimmed}"`) + }) + } + + function toggleTodo(id: string) { + setTodos((prev) => prev.map((t) => (t.id === id ? { ...t, done: !t.done } : t))) + breadcrumb(`Toggled todo ${id}`) + } + + function deleteTodo(id: string) { + setTodos((prev) => prev.filter((t) => t.id !== id)) + breadcrumb(`Deleted todo ${id}`) + } + + function clearCompleted() { + setTodos((prev) => prev.filter((t) => !t.done)) + breadcrumb('Cleared completed todos') + } + + function changeFilter(next: Filter) { + setFilter(next) + breadcrumb(`Filtered by "${next}"`) + } + + return ( +
+
+

Todo

+

React, instrumented with Sentry, reporting to Uptrace.

+
+ +
+ setText(e.target.value)} + onKeyDown={(e) => e.key === 'Enter' && addTodo()} + /> + +
+ +
+ {remaining} left +
+ {(['all', 'active', 'completed'] as const).map((f) => ( + + ))} +
+ +
+ +
    + {visible.length === 0 ? ( +
  • + {todos.length === 0 + ? 'Nothing here yet. Add your first todo above.' + : `No ${filter} todos.`} +
    • + ) : ( + visible.map((todo) => ( +
  • + + +
    • + )) + )} +
+ +
+

Send data to Uptrace

+
+ + + +
+

+ Each button sends a different signal. Click a few times, then open your project in + Uptrace to see the spans, messages, and errors. +

+
+
+ ) +} + +// breadcrumb records an action so it appears in the breadcrumb trail of any +// event sent to Uptrace. +function breadcrumb(message: string) { + Sentry.addBreadcrumb({ category: 'todo', message, level: 'info' }) +} + +// A severity level Sentry understands. Kept local so we don't import a type. +type Level = 'info' | 'warning' | 'error' + +// MESSAGES are log-style events sent with Sentry.captureMessage. Picking one at +// random gives Uptrace a mix of levels to display. +const MESSAGES: ReadonlyArray = [ + ['Todos synced with the backend', 'info'], + ['Todo sync retried after a timeout', 'warning'], + ['Could not reach the sync backend', 'error'], +] + +// ERRORS are the demo failures. Varied types and messages so Uptrace groups +// them as distinct issues instead of one repeated error. Each is built fresh on +// throw so its stack trace points at the app, not this list. +const ERRORS: ReadonlyArray<() => Error> = [ + () => new Error('Example error from the React Todo app'), + () => new TypeError("Cannot read properties of undefined (reading 'text')"), + () => new RangeError('Todo limit of 100 exceeded'), + () => Object.assign(new Error('Failed to sync todos: network request timed out'), { + name: 'TodoSyncError', + }), +] + +// sendTestMessage captures a random log message at its level. This is a handled +// (non-error) event, the "send" counterpart to throwing. +function sendTestMessage() { + const [message, level] = pickRandom(MESSAGES) + breadcrumb(`Sent a ${level} message`) + Sentry.captureMessage(message, level) +} + +// throwTestError simulates a real app operation that fails a few calls deep, so +// the error reported to Uptrace has app frames in its stack trace (syncTodos -> +// buildSyncPayload) instead of only the React internals that call the handler. +// The app does not catch it, so Sentry's global handler captures and reports it. +function throwTestError() { + breadcrumb('About to throw a test error') + syncTodos() +} + +// syncTodos pretends to push the saved todos to a backend. +function syncTodos() { + const payload = buildSyncPayload(loadTodos()) + console.debug('would send payload', payload) +} + +// buildSyncPayload pretends to serialize the todos, but always fails here on +// purpose with a randomly chosen error. (The length check is just to keep the +// return reachable for the type checker.) +function buildSyncPayload(todos: Todo[]): string { + if (todos.length >= 0) { + throw pickRandom(ERRORS)() + } + return JSON.stringify(todos) +} + +// pickRandom returns a random element of a non-empty array. +function pickRandom(items: ReadonlyArray): T { + return items[Math.floor(Math.random() * items.length)] +} + +// runTracedTask runs fake async work inside a span. The span and its children +// appear as a trace in Uptrace. +async function runTracedTask() { + await Sentry.startSpan({ name: 'run_traced_task', op: 'task' }, async () => { + await Sentry.startSpan({ name: 'step_one', op: 'task.step' }, () => wait(150)) + await Sentry.startSpan({ name: 'step_two', op: 'task.step' }, () => wait(250)) + }) +} + +// loadTodos reads the persisted list, tolerating absent or corrupt storage. +function loadTodos(): Todo[] { + try { + const raw = localStorage.getItem(STORAGE_KEY) + return raw ? (JSON.parse(raw) as Todo[]) : [] + } catch { + return [] + } +} + +// wait resolves after `ms` milliseconds, standing in for real async work. +function wait(ms: number): Promise { + return new Promise((resolve) => setTimeout(resolve, ms)) +} diff --git a/react/src/index.css b/react/src/index.css new file mode 100644 index 0000000..ef972fb --- /dev/null +++ b/react/src/index.css @@ -0,0 +1,44 @@ +:root { + /* Warm-tinted neutrals (no pure black/white) plus one cool violet accent. + OKLCH keeps the tints consistent in lightness. */ + --paper: oklch(0.985 0.006 85); + --raised: oklch(0.998 0.004 85); + --ink: oklch(0.27 0.018 60); + --muted: oklch(0.55 0.016 70); + --faint: oklch(0.7 0.014 75); + --line: oklch(0.92 0.008 80); + --line-strong: oklch(0.84 0.01 80); + + --accent: oklch(0.55 0.19 300); + --accent-strong: oklch(0.48 0.2 300); + --on-accent: oklch(0.99 0.01 300); + --accent-ghost: oklch(0.55 0.19 300 / 0.12); + + --danger: oklch(0.55 0.18 25); + --danger-tint: oklch(0.96 0.03 25); + + --radius: 9px; + --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */ + + font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + + color: var(--ink); + background-color: var(--paper); +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; +} + +:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; + border-radius: 4px; +} diff --git a/react/src/instrument.ts b/react/src/instrument.ts new file mode 100644 index 0000000..12776e3 --- /dev/null +++ b/react/src/instrument.ts @@ -0,0 +1,40 @@ +// Sentry initialization for the browser. +// +// This file is imported FIRST in main.tsx (before React) so that Sentry can +// install its instrumentation before the app starts rendering. +// +// The DSN is read from the `VITE_SENTRY_DSN` environment variable. Copy +// `.env.example` to `.env` and paste the Sentry DSN from your Uptrace project +// (Project -> DSN -> "Sentry" tab). See README.md for details. +import * as Sentry from '@sentry/react' + +const dsn = import.meta.env.VITE_SENTRY_DSN + +if (!dsn) { + // Make the misconfiguration loud instead of silently dropping every event. + console.warn( + 'VITE_SENTRY_DSN is not set. Copy .env.example to .env and paste your ' + + 'Uptrace Sentry DSN, then restart `npm run dev`.', + ) +} + +Sentry.init({ + dsn, + + // browserTracingIntegration emits performance spans for page loads, + // navigations and fetch/XHR requests. Together with the manual spans in + // App.tsx these show up as traces in Uptrace. + integrations: [Sentry.browserTracingIntegration()], + + // Sample 100% of traces. Lower this in production; for a demo we want to + // see every interaction in Uptrace. + tracesSampleRate: 1.0, + + // Attach a default user/IP so events are easier to find in the UI. Turn + // this off if you do not want to send personally identifiable information. + sendDefaultPii: true, + + // Surfaces as an attribute on every event so you can filter this example's + // data in Uptrace. + environment: 'development', +}) diff --git a/react/src/main.tsx b/react/src/main.tsx new file mode 100644 index 0000000..cda57d8 --- /dev/null +++ b/react/src/main.tsx @@ -0,0 +1,20 @@ +// Import Sentry instrumentation BEFORE anything else so it is initialized +// before React renders. +import './instrument.ts' + +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import * as Sentry from '@sentry/react' + +import App from './App.tsx' +import './index.css' + +createRoot(document.getElementById('root')!).render( + + {/* Sentry.ErrorBoundary reports any uncaught render error to Uptrace and + shows a fallback instead of a blank screen. */} + Something went wrong — check Uptrace.

}> + + + , +) diff --git a/react/tsconfig.json b/react/tsconfig.json new file mode 100644 index 0000000..ab81502 --- /dev/null +++ b/react/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "target": "ES2022", + "useDefineForClassFields": true, + "lib": ["ES2022", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + + /* Vite injects this type for `import.meta.env` */ + "types": ["vite/client"] + }, + "include": ["src"] +} diff --git a/react/vite.config.ts b/react/vite.config.ts new file mode 100644 index 0000000..567aecb --- /dev/null +++ b/react/vite.config.ts @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// Minimal Vite config for the React + Sentry example. +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react()], +}) From 9e7e5b39c5e142b1879c2244d3c3069d8f78c10c Mon Sep 17 00:00:00 2001 From: Catalin4513 Date: Tue, 30 Jun 2026 14:10:47 +0300 Subject: [PATCH 02/73] feat(react): add trace links and Uptrace activity feed, polish UI --- react/.env.example | 6 ++ react/AGENTS.md | 39 +++++++++ react/README.md | 12 ++- react/src/App.css | 101 +++++++++++++++++++++- react/src/App.tsx | 204 +++++++++++++++++++++++++++++++------------- react/src/index.css | 1 + 6 files changed, 299 insertions(+), 64 deletions(-) create mode 100644 react/AGENTS.md diff --git a/react/.env.example b/react/.env.example index 9fbc639..5a46db9 100644 --- a/react/.env.example +++ b/react/.env.example @@ -8,3 +8,9 @@ # For a local self-hosted Uptrace the ingest host is usually localhost:14318, # e.g. http://project2_secret_token@localhost:14318/2 VITE_SENTRY_DSN= + +# Optional: base URL of your Uptrace UI (its site URL), used to turn each demo +# action into a clickable link to its trace. Self-hosted default is +# http://localhost:5000; Uptrace Cloud is https://app.uptrace.dev. Without it the +# app still logs the trace id to the console. +VITE_UPTRACE_URL= diff --git a/react/AGENTS.md b/react/AGENTS.md new file mode 100644 index 0000000..47b07f1 --- /dev/null +++ b/react/AGENTS.md @@ -0,0 +1,39 @@ +# React + Sentry example + +Rules here apply to `examples/react`, one of the `uptrace/examples` projects: +small, runnable apps that show how to send data to Uptrace. This one shows how +to integrate the Sentry SDK (`@sentry/react`) with a React frontend reporting to +Uptrace, and that is the one thing it teaches. Keep it minimal: an example is +read more than it is run, so every extra feature, file, or dependency is noise +that hides the integration. Add something only when it makes the integration +clearer, not the app richer. The `README.md` is the primary deliverable; when +behavior changes, update it in the same change. + +## Core Rules + +- The only Uptrace-specific code is `Sentry.init()` in `src/instrument.ts`, + imported first in `src/main.tsx` (before React) so instrumentation is in place + before the app renders. +- The DSN comes from `VITE_SENTRY_DSN`; never hardcode a DSN. `.env` is + gitignored — keep `.env.example` as the template and document it in the README. +- Uptrace ingests the standard Sentry protocol, so there is no Uptrace exporter + or adapter. If you reach for one, you are doing it wrong. +- The app is a small todo list: Vite + React + TypeScript, state in `useState` + held in memory only. No router, no backend, no UI framework. +- Every user action (add / toggle / delete / filter) leaves a Sentry breadcrumb + so a reported event carries the trail that led to it; keep that going for new + actions. The "Send data to Uptrace" buttons exist only to emit telemetry (a + span, a log message, an error). Document any new button in the README. +- TypeScript with `strict` on. JS/TS comments use `//` line comments, including + comments for exported types and functions. +- Plain CSS only. Design tokens (OKLCH colors, radius, easing) live in `:root` in + `src/index.css`; component styles in `src/App.css`. No Tailwind, no component + library, no CSS-in-JS. Keep the dependency list short. + +## Commands + +- `npm install` +- `npm run dev` — local dev server. +- `npm run build` — type-check (`tsc -b`) and production build. This is the + verification step; there are no unit tests (it is an example). Also run the app + and click through it when changing behavior. diff --git a/react/README.md b/react/README.md index 6518fe9..363917a 100644 --- a/react/README.md +++ b/react/README.md @@ -9,10 +9,13 @@ Uptrace project. You'll be able to: - click around a todo list and generate **breadcrumbs**, -- press a button to throw an **error** (of a few different types) that shows up in Uptrace, +- press a button to report an **error** (of a few different types) that shows up in Uptrace, - press a button to send a **log message** at a chosen level, - press a button to run a traced task and see the resulting **spans / trace**. +Each demo button prints its trace id to the browser console and, if you set +`VITE_UPTRACE_URL`, shows a link straight to that trace in Uptrace. + ## How it works The Sentry SDK builds its request URLs from the DSN you give it @@ -51,6 +54,8 @@ http://project2_secret_token@localhost:14318/2 # from this directory: examples/react cp .env.example .env # then edit .env and paste your DSN into VITE_SENTRY_DSN +# optionally set VITE_UPTRACE_URL to your Uptrace UI (e.g. http://localhost:5000) +# to get clickable trace links npm install npm run dev @@ -67,8 +72,11 @@ In the app: - Click **Run traced task** — runs a span with two child spans. - Click **Send log message** — sends a log message at a random level (info / warning / error). -- Click **Throw test error** — throws an uncaught error that Sentry captures. +- Click **Throw test error** — raises an error (caught and reported with + `captureException`) so its trace is linkable. +Each click runs in its own trace, prints `[uptrace] … sent on trace ` to the +console, and shows a **view in Uptrace** link (when `VITE_UPTRACE_URL` is set). The last two buttons pick from a small pool each click, so repeated clicks produce a variety of messages and error types in Uptrace. The SDK sends events over the network as you interact. (Open your browser's devtools Network tab and diff --git a/react/src/App.css b/react/src/App.css index c5b5250..93f1bbd 100644 --- a/react/src/App.css +++ b/react/src/App.css @@ -62,16 +62,21 @@ transform 0.08s var(--ease); } -.btn:active { +.btn:active:not(:disabled) { transform: translateY(1px); } +.btn:disabled { + cursor: not-allowed; + opacity: 0.45; +} + .btn-primary { color: var(--on-accent); background: var(--accent); } -.btn-primary:hover { +.btn-primary:hover:not(:disabled) { background: var(--accent-strong); } @@ -171,6 +176,21 @@ padding: 0; } +/* Past ~10 rows the list becomes a scrollable panel so the content below it + (the activity feed) stays in place instead of being pushed down. */ +.todos--scroll { + max-height: 29rem; + overflow-y: auto; + scrollbar-gutter: stable; + padding: 0 0.7rem; + border: 1px solid var(--line); + border-radius: var(--radius); +} + +.todos--scroll .todo:last-child { + border-bottom: none; +} + .todo { display: flex; align-items: center; @@ -256,6 +276,83 @@ color: var(--faint); } +.feed { + list-style: none; + margin: 1rem 0 0; + padding: 0 0.85rem; + background: var(--raised); + border: 1px solid var(--line); + border-radius: var(--radius); +} + +.feed__row { + display: flex; + align-items: center; + gap: 0.55rem; + padding: 0.55rem 0; + border-top: 1px solid var(--line); + animation: enter 0.24s var(--ease); + /* The dot color follows the signal kind. */ + --signal: var(--accent); +} + +.feed__row:first-child { + border-top: none; +} + +.feed__row[data-kind='log'] { + --signal: var(--info); +} + +.feed__row[data-kind='error'] { + --signal: var(--danger); +} + +.feed__dot { + flex: none; + width: 0.5rem; + height: 0.5rem; + border-radius: 999px; + background: var(--signal); + box-shadow: 0 0 0 3px color-mix(in oklch, var(--signal) 18%, transparent); +} + +.feed__label { + flex: none; + font-size: 0.82rem; + font-weight: 560; + color: var(--ink); +} + +.feed__id { + flex: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 0.74rem; + color: var(--muted); +} + +.feed__cta { + flex: none; + font-size: 0.8rem; + font-weight: 560; + white-space: nowrap; + color: var(--accent); + text-decoration: none; +} + +.feed__cta:hover { + text-decoration: underline; +} + +.feed__hint { + flex: none; + font-size: 0.76rem; + color: var(--faint); +} + @keyframes enter { from { opacity: 0; diff --git a/react/src/App.tsx b/react/src/App.tsx index fb35bb8..f3e7634 100644 --- a/react/src/App.tsx +++ b/react/src/App.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useState } from 'react' +import { useMemo, useState } from 'react' import * as Sentry from '@sentry/react' import './App.css' @@ -13,23 +13,37 @@ interface Todo { // Which todos the list is showing. type Filter = 'all' | 'active' | 'completed' -const STORAGE_KEY = 'uptrace-sentry-todos' +// Base URL of your Uptrace UI (its site URL, e.g. http://localhost:5000), used +// to build a link to each trace. Optional: without it we still log the trace id. +const UPTRACE_URL = import.meta.env.VITE_UPTRACE_URL -// App is a small but real todo list: add, complete, filter, delete, and clear -// completed, persisted to localStorage. Every interaction also leaves a Sentry -// breadcrumb, so when an event reaches Uptrace you can see the trail of actions -// that led to it. Two extra buttons exist purely to generate telemetry: one -// throws an error, one runs a traced task (a span). +// Project id, taken from the last path segment of the Sentry DSN. The trace link +// is project-scoped (/explore//traces/), so we need it. +const PROJECT_ID = projectIdFromDsn(import.meta.env.VITE_SENTRY_DSN) + +// The kind of signal a demo action produced, used to color the result. +type Signal = 'trace' | 'log' | 'error' + +// TraceLink describes one signal sent to Uptrace, for the console and the feed. +interface TraceLink { + kind: Signal + label: string + traceId: string + url: string | null +} + +// App is a small todo list: add, complete, filter, delete, and clear completed. +// State is in memory only. Every interaction also leaves a Sentry breadcrumb, so +// when an event reaches Uptrace you can see the trail of actions that led to it. +// Two extra buttons exist purely to generate telemetry: one throws an error, one +// runs a traced task (a span). export default function App() { - const [todos, setTodos] = useState(loadTodos) + const [todos, setTodos] = useState([]) const [filter, setFilter] = useState('all') const [text, setText] = useState('') - - // Persist on every change so a reload (or a developer coming back to the tab) - // keeps the list. - useEffect(() => { - localStorage.setItem(STORAGE_KEY, JSON.stringify(todos)) - }, [todos]) + // A running feed of signals sent to Uptrace, newest first, capped. + const [sent, setSent] = useState([]) + const recordTrace = (link: TraceLink) => setSent((prev) => [link, ...prev].slice(0, 8)) const remaining = todos.filter((t) => !t.done).length const completed = todos.length - remaining @@ -49,11 +63,19 @@ export default function App() { return } - // Wrap the work in a span so adding a todo shows up as a trace in Uptrace. - Sentry.startSpan({ name: 'add_todo', op: 'ui.action' }, () => { - setTodos((prev) => [...prev, { id: crypto.randomUUID(), text: trimmed, done: false }]) - setText('') - breadcrumb(`Added todo "${trimmed}"`) + const id = crypto.randomUUID() + // Adding a todo is instrumented like the demo actions: its own trace, with a + // link in the result panel. Real app interactions are traced too, not just + // the demo buttons. + Sentry.startNewTrace(() => { + Sentry.startSpan({ name: 'add_todo', op: 'ui.action' }, (span) => { + setTodos((prev) => [{ id, text: trimmed, done: false }, ...prev]) + setText('') + breadcrumb(`Added todo "${trimmed}"`) + recordTrace( + announce('trace', 'Added todo', span.spanContext().traceId, span.spanContext().spanId), + ) + }) }) } @@ -92,7 +114,7 @@ export default function App() { onChange={(e) => setText(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && addTodo()} /> - @@ -116,7 +138,7 @@ export default function App() { -
    +
      10 ? 'todos todos--scroll' : 'todos'}> {visible.length === 0 ? (
    • {todos.length === 0 @@ -149,20 +171,39 @@ export default function App() {

      Send data to Uptrace

      - - -
      -

      - Each button sends a different signal. Click a few times, then open your project in - Uptrace to see the spans, messages, and errors. -

      + {sent.length > 0 ? ( +
        + {sent.map((s) => ( +
      • +
        • + ))} +
      + ) : ( +

      + Every action here, and adding a todo, is traced. Each one prints its trace to the + console and appears below with a link to Uptrace. +

      + )}
      ) @@ -174,6 +215,41 @@ function breadcrumb(message: string) { Sentry.addBreadcrumb({ category: 'todo', message, level: 'info' }) } +// announce logs the trace to the console and returns a link for the UI. Every +// action shares the page's trace, so we deep-link to this action's own span to +// land on the right place (the error, the log message, the task). +function announce(kind: Signal, label: string, traceId: string, spanId: string): TraceLink { + const url = traceUrl(traceId, spanId) + console.log( + `[uptrace] ${label} sent on trace ${traceId}`, + url ?? '(set VITE_UPTRACE_URL to get a link)', + ) + return { kind, label, traceId, url } +} + +// traceUrl builds a link to a span within a trace in the Uptrace UI. We use the +// project-scoped /explore route; the bare /traces/ shortcut can 404. +function traceUrl(traceId: string, spanId: string): string | null { + if (!UPTRACE_URL || !PROJECT_ID) { + return null + } + return `${UPTRACE_URL.replace(/\/+$/, '')}/explore/${PROJECT_ID}/traces/${traceId}/${spanId}` +} + +// projectIdFromDsn returns the project id, the last path segment of the DSN +// (e.g. "2" in http://token@host/2), or null if the DSN is absent or malformed. +function projectIdFromDsn(dsn: string | undefined): string | null { + if (!dsn) { + return null + } + try { + const segments = new URL(dsn).pathname.split('/').filter(Boolean) + return segments.at(-1) ?? null + } catch { + return null + } +} + // A severity level Sentry understands. Kept local so we don't import a type. type Level = 'info' | 'warning' | 'error' @@ -198,36 +274,50 @@ const ERRORS: ReadonlyArray<() => Error> = [ ] // sendTestMessage captures a random log message at its level. This is a handled -// (non-error) event, the "send" counterpart to throwing. -function sendTestMessage() { +// (non-error) event, the "send" counterpart to throwing. It runs in its own +// trace so we can link to it. +function sendTestMessage(onTrace: (link: TraceLink) => void) { const [message, level] = pickRandom(MESSAGES) breadcrumb(`Sent a ${level} message`) - Sentry.captureMessage(message, level) + // startNewTrace gives each click its own trace, so repeated clicks are + // distinct in Uptrace rather than sharing the page's trace. + Sentry.startNewTrace(() => { + Sentry.startSpan({ name: 'send_log_message', op: 'task' }, (span) => { + Sentry.captureMessage(message, level) + onTrace(announce('log', `Message (${level})`, span.spanContext().traceId, span.spanContext().spanId)) + }) + }) } // throwTestError simulates a real app operation that fails a few calls deep, so // the error reported to Uptrace has app frames in its stack trace (syncTodos -> -// buildSyncPayload) instead of only the React internals that call the handler. -// The app does not catch it, so Sentry's global handler captures and reports it. -function throwTestError() { +// buildSyncPayload) instead of only the React internals. We catch and report it +// with captureException (rather than letting it propagate) so the event lands on +// this trace and we can link to it; a real unhandled error is auto-captured. +function throwTestError(onTrace: (link: TraceLink) => void) { breadcrumb('About to throw a test error') - syncTodos() + Sentry.startNewTrace(() => { + Sentry.startSpan({ name: 'throw_test_error', op: 'task' }, (span) => { + try { + syncTodos() + } catch (err) { + Sentry.captureException(err) + } + onTrace(announce('error', 'Error', span.spanContext().traceId, span.spanContext().spanId)) + }) + }) } -// syncTodos pretends to push the saved todos to a backend. +// syncTodos pretends to push the todos to a backend. function syncTodos() { - const payload = buildSyncPayload(loadTodos()) + const payload = buildSyncPayload() console.debug('would send payload', payload) } // buildSyncPayload pretends to serialize the todos, but always fails here on -// purpose with a randomly chosen error. (The length check is just to keep the -// return reachable for the type checker.) -function buildSyncPayload(todos: Todo[]): string { - if (todos.length >= 0) { - throw pickRandom(ERRORS)() - } - return JSON.stringify(todos) +// purpose with a randomly chosen error. +function buildSyncPayload(): string { + throw pickRandom(ERRORS)() } // pickRandom returns a random element of a non-empty array. @@ -236,22 +326,16 @@ function pickRandom(items: ReadonlyArray): T { } // runTracedTask runs fake async work inside a span. The span and its children -// appear as a trace in Uptrace. -async function runTracedTask() { - await Sentry.startSpan({ name: 'run_traced_task', op: 'task' }, async () => { - await Sentry.startSpan({ name: 'step_one', op: 'task.step' }, () => wait(150)) - await Sentry.startSpan({ name: 'step_two', op: 'task.step' }, () => wait(250)) - }) -} - -// loadTodos reads the persisted list, tolerating absent or corrupt storage. -function loadTodos(): Todo[] { - try { - const raw = localStorage.getItem(STORAGE_KEY) - return raw ? (JSON.parse(raw) as Todo[]) : [] - } catch { - return [] - } +// appear as a trace in Uptrace. The trace id is reported as soon as the parent +// span opens, while the child spans keep running. +async function runTracedTask(onTrace: (link: TraceLink) => void) { + await Sentry.startNewTrace(() => + Sentry.startSpan({ name: 'run_traced_task', op: 'task' }, async (span) => { + onTrace(announce('trace', 'Traced task', span.spanContext().traceId, span.spanContext().spanId)) + await Sentry.startSpan({ name: 'step_one', op: 'task.step' }, () => wait(150)) + await Sentry.startSpan({ name: 'step_two', op: 'task.step' }, () => wait(250)) + }), + ) } // wait resolves after `ms` milliseconds, standing in for real async work. diff --git a/react/src/index.css b/react/src/index.css index ef972fb..c87f27e 100644 --- a/react/src/index.css +++ b/react/src/index.css @@ -16,6 +16,7 @@ --danger: oklch(0.55 0.18 25); --danger-tint: oklch(0.96 0.03 25); + --info: oklch(0.6 0.12 230); --radius: 9px; --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */ From bb76ae1a4697707bba7faa244b5cff7be65c30a5 Mon Sep 17 00:00:00 2001 From: Catalin4513 Date: Wed, 1 Jul 2026 08:40:40 +0300 Subject: [PATCH 03/73] docs(react): drop concrete dev/cloud URLs from .env.example --- react/.env.example | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/react/.env.example b/react/.env.example index 5a46db9..28c67dc 100644 --- a/react/.env.example +++ b/react/.env.example @@ -4,13 +4,9 @@ # "Sentry" tab, and copy the DSN. It looks like: # # http://@/ -# -# For a local self-hosted Uptrace the ingest host is usually localhost:14318, -# e.g. http://project2_secret_token@localhost:14318/2 VITE_SENTRY_DSN= # Optional: base URL of your Uptrace UI (its site URL), used to turn each demo -# action into a clickable link to its trace. Self-hosted default is -# http://localhost:5000; Uptrace Cloud is https://app.uptrace.dev. Without it the -# app still logs the trace id to the console. +# action into a clickable link to its trace. Without it the app still logs the +# trace id to the console. VITE_UPTRACE_URL= From 0e6f94710528959e4d0fb469f8b468129bc4c8d4 Mon Sep 17 00:00:00 2001 From: Catalin4513 Date: Wed, 1 Jul 2026 08:45:47 +0300 Subject: [PATCH 04/73] refactor(examples): rename react example to sentry-react for naming consistency --- README.md | 2 +- {react => sentry-react}/.env.example | 0 {react => sentry-react}/.gitignore | 0 {react => sentry-react}/AGENTS.md | 2 +- {react => sentry-react}/README.md | 2 +- {react => sentry-react}/index.html | 0 {react => sentry-react}/package-lock.json | 0 {react => sentry-react}/package.json | 0 {react => sentry-react}/src/App.css | 0 {react => sentry-react}/src/App.tsx | 0 {react => sentry-react}/src/index.css | 0 {react => sentry-react}/src/instrument.ts | 0 {react => sentry-react}/src/main.tsx | 0 {react => sentry-react}/tsconfig.json | 0 {react => sentry-react}/vite.config.ts | 0 15 files changed, 3 insertions(+), 3 deletions(-) rename {react => sentry-react}/.env.example (100%) rename {react => sentry-react}/.gitignore (100%) rename {react => sentry-react}/AGENTS.md (96%) rename {react => sentry-react}/README.md (99%) rename {react => sentry-react}/index.html (100%) rename {react => sentry-react}/package-lock.json (100%) rename {react => sentry-react}/package.json (100%) rename {react => sentry-react}/src/App.css (100%) rename {react => sentry-react}/src/App.tsx (100%) rename {react => sentry-react}/src/index.css (100%) rename {react => sentry-react}/src/instrument.ts (100%) rename {react => sentry-react}/src/main.tsx (100%) rename {react => sentry-react}/tsconfig.json (100%) rename {react => sentry-react}/vite.config.ts (100%) diff --git a/README.md b/README.md index 0f2069a..1b1dc94 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,7 @@ project. - [sentry-go](sentry-go) — errors and tracing with sentry-go. - [sentry-python](sentry-python) — nested exception chains with sentry-python. - [sentry-browser](sentry-browser) — events with @sentry/browser. -- [react](react) — errors, breadcrumbs, and tracing with @sentry/react in a todo app. +- [sentry-react](sentry-react) — errors, breadcrumbs, and tracing with @sentry/react in a todo app. ### Logs, Collector, and demos diff --git a/react/.env.example b/sentry-react/.env.example similarity index 100% rename from react/.env.example rename to sentry-react/.env.example diff --git a/react/.gitignore b/sentry-react/.gitignore similarity index 100% rename from react/.gitignore rename to sentry-react/.gitignore diff --git a/react/AGENTS.md b/sentry-react/AGENTS.md similarity index 96% rename from react/AGENTS.md rename to sentry-react/AGENTS.md index 47b07f1..5708efe 100644 --- a/react/AGENTS.md +++ b/sentry-react/AGENTS.md @@ -1,6 +1,6 @@ # React + Sentry example -Rules here apply to `examples/react`, one of the `uptrace/examples` projects: +Rules here apply to `examples/sentry-react`, one of the `uptrace/examples` projects: small, runnable apps that show how to send data to Uptrace. This one shows how to integrate the Sentry SDK (`@sentry/react`) with a React frontend reporting to Uptrace, and that is the one thing it teaches. Keep it minimal: an example is diff --git a/react/README.md b/sentry-react/README.md similarity index 99% rename from react/README.md rename to sentry-react/README.md index 363917a..c72508d 100644 --- a/react/README.md +++ b/sentry-react/README.md @@ -51,7 +51,7 @@ http://project2_secret_token@localhost:14318/2 ## 2. Configure and run ```bash -# from this directory: examples/react +# from this directory: examples/sentry-react cp .env.example .env # then edit .env and paste your DSN into VITE_SENTRY_DSN # optionally set VITE_UPTRACE_URL to your Uptrace UI (e.g. http://localhost:5000) diff --git a/react/index.html b/sentry-react/index.html similarity index 100% rename from react/index.html rename to sentry-react/index.html diff --git a/react/package-lock.json b/sentry-react/package-lock.json similarity index 100% rename from react/package-lock.json rename to sentry-react/package-lock.json diff --git a/react/package.json b/sentry-react/package.json similarity index 100% rename from react/package.json rename to sentry-react/package.json diff --git a/react/src/App.css b/sentry-react/src/App.css similarity index 100% rename from react/src/App.css rename to sentry-react/src/App.css diff --git a/react/src/App.tsx b/sentry-react/src/App.tsx similarity index 100% rename from react/src/App.tsx rename to sentry-react/src/App.tsx diff --git a/react/src/index.css b/sentry-react/src/index.css similarity index 100% rename from react/src/index.css rename to sentry-react/src/index.css diff --git a/react/src/instrument.ts b/sentry-react/src/instrument.ts similarity index 100% rename from react/src/instrument.ts rename to sentry-react/src/instrument.ts diff --git a/react/src/main.tsx b/sentry-react/src/main.tsx similarity index 100% rename from react/src/main.tsx rename to sentry-react/src/main.tsx diff --git a/react/tsconfig.json b/sentry-react/tsconfig.json similarity index 100% rename from react/tsconfig.json rename to sentry-react/tsconfig.json diff --git a/react/vite.config.ts b/sentry-react/vite.config.ts similarity index 100% rename from react/vite.config.ts rename to sentry-react/vite.config.ts From 9ec90892c746a0297c77773b3a596677a0916a12 Mon Sep 17 00:00:00 2001 From: Catalin4513 Date: Mon, 6 Jul 2026 10:31:34 +0300 Subject: [PATCH 05/73] feat(sentry-react): emit logs for add/delete todos and escalate the error demo to a multi-record sync --- sentry-react/README.md | 26 ++++++++----- sentry-react/src/App.tsx | 81 ++++++++++++++++++++++++++-------------- 2 files changed, 70 insertions(+), 37 deletions(-) diff --git a/sentry-react/README.md b/sentry-react/README.md index c72508d..c445935 100644 --- a/sentry-react/README.md +++ b/sentry-react/README.md @@ -69,11 +69,15 @@ In the app: - **Add / toggle / delete / filter** a few todos — each action records a breadcrumb, so the error you trigger next has a trail leading up to it. + **Adding** and **deleting** also send a structured info **log** carrying the + todo's text and id as attributes (`tags_todo_text`, `tags_todo_id`). - Click **Run traced task** — runs a span with two child spans. - Click **Send log message** — sends a log message at a random level (info / warning / error). -- Click **Throw test error** — raises an error (caught and reported with - `captureException`) so its trace is linkable. +- Click **Throw test error** — simulates a failing backend sync: a single trace + that emits an **info**, then a **warning**, then the **error** (a random type, + caught and reported with `captureException`), so one trace carries several + Logs & Errors records with the breadcrumb trail linking back to them. Each click runs in its own trace, prints `[uptrace] … sent on trace ` to the console, and shows a **view in Uptrace** link (when `VITE_UPTRACE_URL` is set). @@ -86,15 +90,17 @@ the browser.) ## 4. See it in Uptrace - **Errors** — open your project and look under **Errors** / **Logs**. Each - click of **Throw test error** sends one of several types (`Error`, - `TypeError`, `RangeError`, `TodoSyncError`). Open one to see the stack trace - (which runs through the app's `syncTodos` / `buildSyncPayload` frames) and, in - the event detail, the **breadcrumbs** (the trail of todo actions that preceded - it). -- **Messages** — the **Send log message** events also appear under - **Logs** / **Errors**, tagged with their level. + click of **Throw test error** runs a `sync_todos` trace with three records — an + info, a warning, and the error (one of `Error`, `TypeError`, `RangeError`, + `TodoSyncError`). Open the error to see the stack trace (which runs through the + app's `syncTodos` / `buildSyncPayload` frames) and, in the event detail, the + **breadcrumbs** (the trail of todo actions that preceded it). +- **Messages / logs** — **Send log message**, plus the info logs from **adding** + and **deleting** todos, appear under **Logs** / **Errors**, tagged with their + level. The add / delete logs carry the todo's text and id as `tags_todo_*` + attributes. - **Traces / spans** — open **Traces & Spans** and look for `run_traced_task` - (with `step_one` / `step_two` children) and `add_todo`. The browser tracing + (with `step_one` / `step_two` children) and `sync_todos`. The browser tracing integration also produces page-load and navigation spans. If nothing shows up, double-check that `VITE_SENTRY_DSN` is set (the app logs a diff --git a/sentry-react/src/App.tsx b/sentry-react/src/App.tsx index f3e7634..c145d58 100644 --- a/sentry-react/src/App.tsx +++ b/sentry-react/src/App.tsx @@ -64,18 +64,20 @@ export default function App() { } const id = crypto.randomUUID() - // Adding a todo is instrumented like the demo actions: its own trace, with a - // link in the result panel. Real app interactions are traced too, not just - // the demo buttons. + setTodos((prev) => [{ id, text: trimmed, done: false }, ...prev]) + setText('') + breadcrumb(`Added todo "${trimmed}"`) + // A real interaction, reported as a structured info log rather than a span: + // the entered text and id ride along as queryable attributes (tags_todo_*), + // and the breadcrumb trail links back to this log on the trace's Events tab. + // startNewTrace gives each add its own trace so repeated adds stay distinct. Sentry.startNewTrace(() => { - Sentry.startSpan({ name: 'add_todo', op: 'ui.action' }, (span) => { - setTodos((prev) => [{ id, text: trimmed, done: false }, ...prev]) - setText('') - breadcrumb(`Added todo "${trimmed}"`) - recordTrace( - announce('trace', 'Added todo', span.spanContext().traceId, span.spanContext().spanId), - ) + Sentry.captureMessage(`Added todo "${trimmed}"`, { + level: 'info', + tags: { todo_text: trimmed, todo_id: id }, }) + const traceId = Sentry.getCurrentScope().getPropagationContext().traceId + recordTrace(announce('log', 'Added todo', traceId)) }) } @@ -85,8 +87,20 @@ export default function App() { } function deleteTodo(id: string) { + const removed = todos.find((t) => t.id === id) setTodos((prev) => prev.filter((t) => t.id !== id)) - breadcrumb(`Deleted todo ${id}`) + breadcrumb(`Deleted todo "${removed?.text ?? id}"`) + // Mirror addTodo: report the removal as a structured info log with the todo's + // text and id as queryable attributes, on its own trace so the breadcrumb + // trail links back to it in Uptrace. + Sentry.startNewTrace(() => { + Sentry.captureMessage(`Deleted todo "${removed?.text ?? id}"`, { + level: 'info', + tags: { todo_text: removed?.text ?? '', todo_id: id }, + }) + const traceId = Sentry.getCurrentScope().getPropagationContext().traceId + recordTrace(announce('log', 'Deleted todo', traceId)) + }) } function clearCompleted() { @@ -215,10 +229,11 @@ function breadcrumb(message: string) { Sentry.addBreadcrumb({ category: 'todo', message, level: 'info' }) } -// announce logs the trace to the console and returns a link for the UI. Every -// action shares the page's trace, so we deep-link to this action's own span to -// land on the right place (the error, the log message, the task). -function announce(kind: Signal, label: string, traceId: string, spanId: string): TraceLink { +// announce logs the trace to the console and returns a link for the UI. Span +// actions deep-link to their own span to land on the right place (the error, +// the task); a log has no span of its own, so it links to the trace and omits +// the span id. +function announce(kind: Signal, label: string, traceId: string, spanId?: string): TraceLink { const url = traceUrl(traceId, spanId) console.log( `[uptrace] ${label} sent on trace ${traceId}`, @@ -227,13 +242,15 @@ function announce(kind: Signal, label: string, traceId: string, spanId: string): return { kind, label, traceId, url } } -// traceUrl builds a link to a span within a trace in the Uptrace UI. We use the -// project-scoped /explore route; the bare /traces/ shortcut can 404. -function traceUrl(traceId: string, spanId: string): string | null { +// traceUrl builds a link into a trace in the Uptrace UI, optionally deep-linking +// to a span within it. We use the project-scoped /explore route; the bare +// /traces/ shortcut can 404. +function traceUrl(traceId: string, spanId?: string): string | null { if (!UPTRACE_URL || !PROJECT_ID) { return null } - return `${UPTRACE_URL.replace(/\/+$/, '')}/explore/${PROJECT_ID}/traces/${traceId}/${spanId}` + const base = `${UPTRACE_URL.replace(/\/+$/, '')}/explore/${PROJECT_ID}/traces/${traceId}` + return spanId ? `${base}/${spanId}` : base } // projectIdFromDsn returns the project id, the last path segment of the DSN @@ -289,21 +306,31 @@ function sendTestMessage(onTrace: (link: TraceLink) => void) { }) } -// throwTestError simulates a real app operation that fails a few calls deep, so -// the error reported to Uptrace has app frames in its stack trace (syncTodos -> -// buildSyncPayload) instead of only the React internals. We catch and report it -// with captureException (rather than letting it propagate) so the event lands on -// this trace and we can link to it; a real unhandled error is auto-captured. +// throwTestError simulates a real backend sync that logs its progress and then +// fails, so a single trace carries several Logs & Errors records (an info, then +// a warning, then the error) instead of just one. Each record inherits the +// breadcrumb trail of the actions before it, so in Uptrace the Events tab links +// back to every row on the trace. The failure runs a few calls deep (syncTodos +// -> buildSyncPayload) so the error's stack trace has app frames, not just React +// internals; we catch and report it with captureException so it lands on this +// trace and we can link to it. function throwTestError(onTrace: (link: TraceLink) => void) { - breadcrumb('About to throw a test error') Sentry.startNewTrace(() => { - Sentry.startSpan({ name: 'throw_test_error', op: 'task' }, (span) => { + Sentry.startSpan({ name: 'sync_todos', op: 'task' }, (span) => { + breadcrumb('Syncing todos with the backend') + Sentry.captureMessage('Syncing todos with the backend', 'info') + + breadcrumb('Sync timed out, retrying') + Sentry.captureMessage('Todo sync retried after a timeout', 'warning') + + breadcrumb('Retry failed, giving up') try { syncTodos() } catch (err) { Sentry.captureException(err) } - onTrace(announce('error', 'Error', span.spanContext().traceId, span.spanContext().spanId)) + + onTrace(announce('error', 'Sync failed', span.spanContext().traceId, span.spanContext().spanId)) }) }) } From 0ba13e883d5b8590d19dc258bff28361a9a3e4ef Mon Sep 17 00:00:00 2001 From: Catalin4513 Date: Mon, 6 Jul 2026 15:00:57 +0300 Subject: [PATCH 06/73] feat(sentry-react): wrap every telemetry action in a span via reportInSpan --- sentry-react/README.md | 8 +-- sentry-react/src/App.tsx | 107 +++++++++++++++++++++------------------ 2 files changed, 64 insertions(+), 51 deletions(-) diff --git a/sentry-react/README.md b/sentry-react/README.md index c445935..c768348 100644 --- a/sentry-react/README.md +++ b/sentry-react/README.md @@ -99,9 +99,11 @@ the browser.) and **deleting** todos, appear under **Logs** / **Errors**, tagged with their level. The add / delete logs carry the todo's text and id as `tags_todo_*` attributes. -- **Traces / spans** — open **Traces & Spans** and look for `run_traced_task` - (with `step_one` / `step_two` children) and `sync_todos`. The browser tracing - integration also produces page-load and navigation spans. +- **Traces / spans** — open **Traces & Spans**. Every action runs in its own + span: `run_traced_task` (with `step_one` / `step_two` children), `sync_todos`, + `send_log_message`, and `add_todo` / `delete_todo` (each with its info log + attached). The browser tracing integration also produces page-load and + navigation spans. If nothing shows up, double-check that `VITE_SENTRY_DSN` is set (the app logs a warning in the browser console if it isn't) and that the DSN host matches your diff --git a/sentry-react/src/App.tsx b/sentry-react/src/App.tsx index c145d58..605b0e9 100644 --- a/sentry-react/src/App.tsx +++ b/sentry-react/src/App.tsx @@ -67,18 +67,17 @@ export default function App() { setTodos((prev) => [{ id, text: trimmed, done: false }, ...prev]) setText('') breadcrumb(`Added todo "${trimmed}"`) - // A real interaction, reported as a structured info log rather than a span: - // the entered text and id ride along as queryable attributes (tags_todo_*), - // and the breadcrumb trail links back to this log on the trace's Events tab. - // startNewTrace gives each add its own trace so repeated adds stay distinct. - Sentry.startNewTrace(() => { - Sentry.captureMessage(`Added todo "${trimmed}"`, { - level: 'info', - tags: { todo_text: trimmed, todo_id: id }, - }) - const traceId = Sentry.getCurrentScope().getPropagationContext().traceId - recordTrace(announce('log', 'Added todo', traceId)) - }) + // A real interaction, reported as an info log inside its own span: the entered + // text and id ride along as queryable attributes (tags_todo_*), and the + // breadcrumb trail links back on the trace's Events tab. + recordTrace( + reportInSpan('add_todo', 'log', 'Added todo', () => { + Sentry.captureMessage(`Added todo "${trimmed}"`, { + level: 'info', + tags: { todo_text: trimmed, todo_id: id }, + }) + }), + ) } function toggleTodo(id: string) { @@ -90,17 +89,15 @@ export default function App() { const removed = todos.find((t) => t.id === id) setTodos((prev) => prev.filter((t) => t.id !== id)) breadcrumb(`Deleted todo "${removed?.text ?? id}"`) - // Mirror addTodo: report the removal as a structured info log with the todo's - // text and id as queryable attributes, on its own trace so the breadcrumb - // trail links back to it in Uptrace. - Sentry.startNewTrace(() => { - Sentry.captureMessage(`Deleted todo "${removed?.text ?? id}"`, { - level: 'info', - tags: { todo_text: removed?.text ?? '', todo_id: id }, - }) - const traceId = Sentry.getCurrentScope().getPropagationContext().traceId - recordTrace(announce('log', 'Deleted todo', traceId)) - }) + // Mirror addTodo: report the removal as an info log inside its own span. + recordTrace( + reportInSpan('delete_todo', 'log', 'Deleted todo', () => { + Sentry.captureMessage(`Deleted todo "${removed?.text ?? id}"`, { + level: 'info', + tags: { todo_text: removed?.text ?? '', todo_id: id }, + }) + }), + ) } function clearCompleted() { @@ -214,8 +211,8 @@ export default function App() {
    ) : (

    - Every action here, and adding a todo, is traced. Each one prints its trace to the - console and appears below with a link to Uptrace. + Every action here, plus adding or deleting a todo, is traced. Each one prints its + trace to the console and appears below with a link to Uptrace.

    )} @@ -229,11 +226,27 @@ function breadcrumb(message: string) { Sentry.addBreadcrumb({ category: 'todo', message, level: 'info' }) } -// announce logs the trace to the console and returns a link for the UI. Span -// actions deep-link to their own span to land on the right place (the error, -// the task); a log has no span of its own, so it links to the trace and omits -// the span id. -function announce(kind: Signal, label: string, traceId: string, spanId?: string): TraceLink { +// reportInSpan runs capture() in a fresh trace and a named span, then returns the +// trace link. Captured logs/errors attach to the span, passed in for status. +function reportInSpan( + name: string, + kind: Signal, + label: string, + capture: (span: Sentry.Span) => void, +): TraceLink { + return Sentry.startNewTrace(() => + Sentry.startSpan({ name, op: 'task' }, (span) => { + capture(span) + const { traceId, spanId } = span.spanContext() + return announce(kind, label, traceId, spanId) + }), + ) +} + +// announce logs the trace to the console and returns a link for the UI. Every +// action runs in its own span, so the link deep-links to that span to land on +// the right place (the error, the task, the log). +function announce(kind: Signal, label: string, traceId: string, spanId: string): TraceLink { const url = traceUrl(traceId, spanId) console.log( `[uptrace] ${label} sent on trace ${traceId}`, @@ -242,15 +255,15 @@ function announce(kind: Signal, label: string, traceId: string, spanId?: string) return { kind, label, traceId, url } } -// traceUrl builds a link into a trace in the Uptrace UI, optionally deep-linking -// to a span within it. We use the project-scoped /explore route; the bare -// /traces/ shortcut can 404. -function traceUrl(traceId: string, spanId?: string): string | null { +// traceUrl builds a link into a trace in the Uptrace UI, deep-linking to a span +// within it. We use the project-scoped /explore route; the bare /traces/ +// shortcut can 404. +function traceUrl(traceId: string, spanId: string): string | null { if (!UPTRACE_URL || !PROJECT_ID) { return null } const base = `${UPTRACE_URL.replace(/\/+$/, '')}/explore/${PROJECT_ID}/traces/${traceId}` - return spanId ? `${base}/${spanId}` : base + return `${base}/${spanId}` } // projectIdFromDsn returns the project id, the last path segment of the DSN @@ -296,14 +309,11 @@ const ERRORS: ReadonlyArray<() => Error> = [ function sendTestMessage(onTrace: (link: TraceLink) => void) { const [message, level] = pickRandom(MESSAGES) breadcrumb(`Sent a ${level} message`) - // startNewTrace gives each click its own trace, so repeated clicks are - // distinct in Uptrace rather than sharing the page's trace. - Sentry.startNewTrace(() => { - Sentry.startSpan({ name: 'send_log_message', op: 'task' }, (span) => { + onTrace( + reportInSpan('send_log_message', 'log', `Message (${level})`, () => { Sentry.captureMessage(message, level) - onTrace(announce('log', `Message (${level})`, span.spanContext().traceId, span.spanContext().spanId)) - }) - }) + }), + ) } // throwTestError simulates a real backend sync that logs its progress and then @@ -315,8 +325,8 @@ function sendTestMessage(onTrace: (link: TraceLink) => void) { // internals; we catch and report it with captureException so it lands on this // trace and we can link to it. function throwTestError(onTrace: (link: TraceLink) => void) { - Sentry.startNewTrace(() => { - Sentry.startSpan({ name: 'sync_todos', op: 'task' }, (span) => { + onTrace( + reportInSpan('sync_todos', 'error', 'Sync failed', (span) => { breadcrumb('Syncing todos with the backend') Sentry.captureMessage('Syncing todos with the backend', 'info') @@ -327,12 +337,13 @@ function throwTestError(onTrace: (link: TraceLink) => void) { try { syncTodos() } catch (err) { + // We catch the error, so startSpan sees the callback return normally and + // would leave the span OK — mark it failed so the trace reads as errored. + span.setStatus({ code: 2, message: 'internal_error' }) // SPAN_STATUS_ERROR Sentry.captureException(err) } - - onTrace(announce('error', 'Sync failed', span.spanContext().traceId, span.spanContext().spanId)) - }) - }) + }), + ) } // syncTodos pretends to push the todos to a backend. From ce200fbaaf42f8dea748d019a2bda6f9ff7959e2 Mon Sep 17 00:00:00 2001 From: Catalin4513 Date: Thu, 9 Jul 2026 10:47:55 +0300 Subject: [PATCH 07/73] docs(sentry-react): design spec for faithful Sentry signal-model refactor Co-Authored-By: Claude Opus 4.8 (1M context) --- ...-07-09-sentry-react-signal-model-design.md | 136 ++++++++++++++++++ 1 file changed, 136 insertions(+) create mode 100644 docs/superpowers/specs/2026-07-09-sentry-react-signal-model-design.md diff --git a/docs/superpowers/specs/2026-07-09-sentry-react-signal-model-design.md b/docs/superpowers/specs/2026-07-09-sentry-react-signal-model-design.md new file mode 100644 index 0000000..356c8a7 --- /dev/null +++ b/docs/superpowers/specs/2026-07-09-sentry-react-signal-model-design.md @@ -0,0 +1,136 @@ +# sentry-react — faithful Sentry signal model refactor + +Date: 2026-07-09 +Scope: `examples/sentry-react` +Status: approved design, pending spec review + +## Problem + +The example was built to demonstrate Sentry functionality against Uptrace, but +it models Sentry's behavior incorrectly. The single biggest defect: every user +action wraps itself in `Sentry.startNewTrace()` (via `reportInSpan`), so every +click, add, and delete mints its own artificial trace. The real browser SDK +never does this. The Sentry reference apps +(`react-send-to-sentry`, `nextjs-app-dir`, `sentry-javascript-examples`) all +state the same principle: + +> New trace ID only on page reload (pageload trace) or navigation (route +> change). `captureException` / spans / logs do NOT start a trace — they attach +> to the current route's trace, so multiple signals on one page share one +> `trace_id`. + +Secondary problems: + +- **No router.** Bare `browserTracingIntegration()`, so navigation traces and + parameterized routes are never demonstrated. +- **Logs use the wrong API.** Add/delete go out via `Sentry.captureMessage`, + which produces message *events*. The real Sentry Logs product is + `enableLogs: true` + `Sentry.logger.*`. +- **Artificial machinery.** `reportInSpan`, a fabricated `syncTodos` sequence + that emits info→warning→error on one synthetic trace, a per-action trace-link + feed, `runTracedTask`. All of it buries the integration it exists to teach. + +## Goal + +Rewrite the app so that each todo action maps to the *correct* Sentry signal, +using the real APIs, with trace boundaries that match the browser SDK — while +keeping the one genuinely Uptrace-specific feature (trace links) as a live +demonstration of the trace model. + +## Design + +### 1. Trace model (the core fix) + +- Remove `reportInSpan`, `startNewTrace`, `traceUrl`-per-action, `projectIdFromDsn` + as an action helper, `runTracedTask`, `syncTodos`/`buildSyncPayload`, and all + `captureMessage` calls. +- No app code ever starts a trace. New traces come only from the browser-tracing + integration on pageload and navigation. +- Errors, spans, and logs attach to the current route's trace. Firing the error + button twice on the same page yields the same `trace_id`. + +### 2. Routing + +Add `react-router-dom` v6 with the Sentry integration, exactly as the reference: + +- `reactRouterV6BrowserTracingIntegration({ useEffect, useLocation, useNavigationType, createRoutesFromChildren, matchRoutes })` +- `withSentryReactRouterV6Routing(Routes)` + +Routes: + +- `/` — todo list: composer, list, demo buttons, current-trace badge. +- `/todo/:id` — todo detail page. Clicking a todo navigates here. Complete / + delete available from the detail page too. Navigating here produces a + navigation trace named by the parameterized route `/todo/:id` (not the literal + id). + +### 3. Signal mapping + +| Action | Signal | API | +| --- | --- | --- | +| Add todo | open a span (held in state) + a log | `startInactiveSpan({ name: 'todo.open', attributes: { todo_id, todo_text } })`; `Sentry.logger.info('Added todo', { todo_id, todo_text })` | +| Complete todo | end the span (sends it) | `span.end()` — duration = how long the todo stayed open | +| Delete open todo | end the span, tagged cancelled | `span.setAttribute('cancelled', true); span.end()`; `Sentry.logger.info('Deleted todo', {...})` | +| Toggle back to active / change filter | breadcrumb only | `Sentry.addBreadcrumb({ category: 'todo', ... })` | +| Throw test error | error on current trace | `Sentry.captureException(pickRandom(ERRORS)())` | +| Sync todos | nested wrapping spans + error path | `Sentry.startSpan({ name: 'sync_todos' }, async () => { startSpan('serialize', ...); startSpan('upload', ...) })`, may throw → `captureException` | + +Notes: + +- The **lifecycle span** (add → complete/delete) is the inactive start/stop + idiom, integrated into real business logic — one meaningful span per todo, no + hover noise. +- The **sync** button is the wrapping/nested idiom (parent + child spans with + real awaited durations), and is where the error demo lives naturally. +- Keep the varied `ERRORS` pool (`Error`, `TypeError`, `RangeError`, + `TodoSyncError`) — richer than the references and worth keeping so Uptrace + groups distinct issues. +- Span attributes carry the todo id/text so they are queryable in Uptrace. + +Open spans are stored in a `Map` in component state so the +lifecycle can end them by id. On unmount / clear, any still-open spans are ended +with a `cancelled` attribute so nothing leaks. + +### 4. Config (`src/instrument.ts`) + +- Swap `browserTracingIntegration()` → `reactRouterV6BrowserTracingIntegration({...})`. +- Add `enableLogs: true`. +- Keep `dsn` from `VITE_SENTRY_DSN`, `tracesSampleRate: 1.0`, + `environment: 'development'`. Keep the missing-DSN warning. +- `sendDefaultPii` — keep, documented. + +### 5. Current-trace badge (replaces the per-action feed) + +The old feed showed one row per action with a link, which only made sense under +the (wrong) one-trace-per-action model. Replace it with a single **current-trace +badge**: shows the active `trace_id` and a "view in Uptrace" link, read from the +active span (`Sentry.getActiveSpan()` / root span). It updates only on pageload +and navigation — visibly demonstrating that the trace id is stable across +button clicks and changes only when the route changes. `projectIdFromDsn` + +`traceUrl` are retained solely to build this one link. + +### 6. Docs + +- `README.md`: rewrite sections 3–4 to describe routes, the lifecycle span, the + log API, the error button, the sync button, and the current-trace badge. + Update the "How it works" and project-layout sections. +- `AGENTS.md`: update the "no router" rule and the breadcrumb/telemetry + description to match the new model. + +## Out of scope + +- No Playwright / e2e tests (this stays a user-facing example, not an SDK test + app). +- No Replay integration. +- No backend; state stays in-memory `useState`. + +## Verification + +- `npm run build` (`tsc -b` + `vite build`) passes clean. +- `npm run dev`, then in the browser confirm via devtools Network + (`/api//envelope/`) and the trace badge: + - Trace id changes on reload and on navigating to `/todo/:id`, and only then. + - Two error-button clicks on one page share a trace id. + - Completing a todo sends a `todo.open` span with a non-zero duration. + - Sync sends `sync_todos` with `serialize` / `upload` children. + - Add/delete appear as logs (not message events) in Uptrace. From 1a7edb6be760827fa7337895f0abb572c453fcf1 Mon Sep 17 00:00:00 2001 From: Catalin4513 Date: Thu, 9 Jul 2026 10:55:30 +0300 Subject: [PATCH 08/73] docs(sentry-react): implementation plan for signal-model refactor Co-Authored-By: Claude Opus 4.8 (1M context) --- .../2026-07-09-sentry-react-signal-model.md | 923 ++++++++++++++++++ 1 file changed, 923 insertions(+) create mode 100644 docs/superpowers/plans/2026-07-09-sentry-react-signal-model.md diff --git a/docs/superpowers/plans/2026-07-09-sentry-react-signal-model.md b/docs/superpowers/plans/2026-07-09-sentry-react-signal-model.md new file mode 100644 index 0000000..d64d753 --- /dev/null +++ b/docs/superpowers/plans/2026-07-09-sentry-react-signal-model.md @@ -0,0 +1,923 @@ +# sentry-react Signal-Model Refactor — Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Rewrite the `sentry-react` example so each todo action maps to the correct Sentry signal (span / log / error) using real APIs, with trace boundaries that match the browser SDK (new trace only on pageload/navigation). + +**Architecture:** All Sentry-usage logic lives in one pure module (`src/telemetry.ts`). Todo state + action→telemetry wiring lives in a React context (`src/todos-context.tsx`). Two routed pages (`/`, `/todo/:id`) render the UI. `src/instrument.ts` swaps to the react-router tracing integration and enables logs. No app code ever starts a trace. + +**Tech Stack:** React 19, TypeScript (strict), Vite 6, `@sentry/react` v10, `react-router-dom` v7 (declarative routing with Sentry's v6 integration). + +## Global Constraints + +- Working directory: `examples/sentry-react` (git root is `examples/`). +- **No unit-test harness** and adding one is out of scope. The verification cycle for every task is: `npm run build` (runs `tsc -b` + `vite build`; the typecheck is the guardrail) must pass clean, plus any manual browser check the task names. Do NOT add a test runner. +- TypeScript `strict`, plus `noUnusedLocals` / `noUnusedParameters` are on — no unused imports/vars or the build fails. +- Comments use `//` line comments, including on exported types/functions. +- Plain CSS only. Tokens live in `src/index.css` `:root`; component styles in `src/App.css`. No Tailwind/CSS-in-JS/component libs. +- Never hardcode a DSN; it comes from `VITE_SENTRY_DSN`. +- No app code may call `Sentry.startNewTrace()` — that is the exact anti-pattern being removed. +- Commit after each task with the shown message. + +--- + +### Task 1: Telemetry module + router dependency + +**Files:** +- Modify: `package.json` (declare `react-router-dom`) +- Create: `src/telemetry.ts` + +**Interfaces:** +- Produces: + - `breadcrumb(message: string): void` + - `openTodoSpan(id: string, text: string): Sentry.Span` + - `endTodoSpan(span: Sentry.Span, opts?: { cancelled?: boolean }): void` + - `logAdded(id: string, text: string): void` + - `logDeleted(id: string, text: string): void` + - `captureTestError(): void` + - `syncTodos(count: number): Promise` + - `interface TraceLink { traceId: string; url: string | null }` + - `currentTraceLink(): TraceLink | null` + +- [ ] **Step 1: Declare react-router-dom in package.json** + +`react-router-dom` v7 is already present in `node_modules` but undeclared. Add it to `dependencies` in `package.json` (keep alphabetical grouping with the other runtime deps): + +```json + "dependencies": { + "@sentry/react": "^10.57.0", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "react-router-dom": "^7.18.0" + }, +``` + +- [ ] **Step 2: Run install to sync the lockfile** + +Run: `npm install` +Expected: completes without errors; `react-router-dom` now in `package.json` + lockfile. + +- [ ] **Step 3: Create `src/telemetry.ts` with the full module** + +```ts +// telemetry.ts — every Sentry SDK call the app makes lives here, isolated from +// the UI. Nothing in this file starts a new trace: spans, logs and errors all +// attach to the trace the browser-tracing integration opened for the current +// page load or navigation. That is the whole point of the example — signals +// share the current route's trace instead of each minting its own. +import * as Sentry from '@sentry/react' + +// Base URL of the Uptrace UI (e.g. http://localhost:5000), used to build a link +// to the current trace. Optional: without it the badge still shows the trace id. +const UPTRACE_URL = import.meta.env.VITE_UPTRACE_URL + +// Project id, taken from the last path segment of the DSN. The trace link is +// project-scoped (/explore//traces/), so we need it. +const PROJECT_ID = projectIdFromDsn(import.meta.env.VITE_SENTRY_DSN) + +// breadcrumb records an action so it appears in the breadcrumb trail of any +// event later sent on this trace. +export function breadcrumb(message: string): void { + Sentry.addBreadcrumb({ category: 'todo', message, level: 'info' }) +} + +// openTodoSpan starts an inactive span standing for an open todo. The caller +// holds the span and ends it when the todo is completed or deleted, so the +// span's duration measures how long the todo stayed open. It is an inactive +// span (startInactiveSpan, not startSpan) precisely because its lifetime is a +// user's, not a function call's. No startNewTrace: it joins the current trace. +export function openTodoSpan(id: string, text: string): Sentry.Span { + return Sentry.startInactiveSpan({ + name: 'todo.open', + op: 'todo', + attributes: { todo_id: id, todo_text: text }, + }) +} + +// endTodoSpan closes a todo's span. When the todo was removed before being +// completed we tag it cancelled so the two outcomes are distinguishable. +export function endTodoSpan(span: Sentry.Span, opts?: { cancelled?: boolean }): void { + if (opts?.cancelled) { + span.setAttribute('cancelled', true) + } + span.end() +} + +// logAdded / logDeleted emit real structured logs via the Sentry Logs API +// (enabled with enableLogs in instrument.ts). This is NOT captureMessage, which +// produces message events; logger.* is how Sentry models logs. The todo id and +// text ride along as queryable attributes. +export function logAdded(id: string, text: string): void { + Sentry.logger.info('Added todo', { todo_id: id, todo_text: text }) +} + +export function logDeleted(id: string, text: string): void { + Sentry.logger.info('Deleted todo', { todo_id: id, todo_text: text }) +} + +// ERRORS are the demo failures. Varied types and messages so Uptrace groups +// them as distinct issues instead of one repeated error. Each is built fresh on +// use so its stack trace points at the app. +const ERRORS: ReadonlyArray<() => Error> = [ + () => new Error('Example error from the React Todo app'), + () => new TypeError("Cannot read properties of undefined (reading 'text')"), + () => new RangeError('Todo limit of 100 exceeded'), + () => + Object.assign(new Error('Failed to sync todos: network request timed out'), { + name: 'TodoSyncError', + }), +] + +// captureTestError reports a random error on the CURRENT trace. captureException +// does not start a trace, so firing this twice on one page yields two errors +// that share the page's trace id. +export function captureTestError(): void { + breadcrumb('Reporting a test error') + Sentry.captureException(pickRandom(ERRORS)()) +} + +// syncTodos demonstrates nested wrapping spans. startSpan measures the callback +// and auto-ends the span; the parent 'sync_todos' has 'serialize' and 'upload' +// children with real awaited durations. The upload fails part of the time, +// producing an error attached to the same trace, nested under its span. +export async function syncTodos(count: number): Promise { + breadcrumb(`Syncing ${count} todos`) + await Sentry.startSpan( + { name: 'sync_todos', op: 'task', attributes: { count } }, + async () => { + await Sentry.startSpan({ name: 'serialize', op: 'task.step' }, () => wait(150)) + await Sentry.startSpan({ name: 'upload', op: 'task.step' }, async () => { + await wait(250) + if (Math.random() < 0.5) { + throw pickRandom(ERRORS)() + } + }) + }, + ).catch((err) => { + // startSpan already marked the spans errored and rethrew; report the error + // so it lands on this trace, then swallow it (the UI stays responsive). + Sentry.captureException(err) + }) +} + +// TraceLink is the current trace id plus an optional deep link to it in Uptrace. +export interface TraceLink { + traceId: string + url: string | null +} + +// currentTraceLink reads the trace id of the active root span — the pageload or +// navigation trace the integration opened — and builds a link to it. Read it +// right after a navigation, while that idle span is still active. +export function currentTraceLink(): TraceLink | null { + const active = Sentry.getActiveSpan() + const root = active ? Sentry.getRootSpan(active) : undefined + if (!root) { + return null + } + const { traceId } = root.spanContext() + return { traceId, url: traceUrl(traceId) } +} + +// traceUrl builds a project-scoped link into a trace in the Uptrace UI, or null +// when the UI URL or project id is unavailable. +function traceUrl(traceId: string): string | null { + if (!UPTRACE_URL || !PROJECT_ID) { + return null + } + const base = UPTRACE_URL.replace(/\/+$/, '') + return `${base}/explore/${PROJECT_ID}/traces/${traceId}` +} + +// projectIdFromDsn returns the project id, the last path segment of the DSN +// (e.g. "2" in http://token@host/2), or null if the DSN is absent or malformed. +function projectIdFromDsn(dsn: string | undefined): string | null { + if (!dsn) { + return null + } + try { + const segments = new URL(dsn).pathname.split('/').filter(Boolean) + return segments.at(-1) ?? null + } catch { + return null + } +} + +// pickRandom returns a random element of a non-empty array. +function pickRandom(items: ReadonlyArray): T { + return items[Math.floor(Math.random() * items.length)] +} + +// wait resolves after `ms` milliseconds, standing in for real async work. +function wait(ms: number): Promise { + return new Promise((resolve) => setTimeout(resolve, ms)) +} +``` + +- [ ] **Step 4: Run the build** + +Run: `npm run build` +Expected: PASS. `telemetry.ts` is not imported yet, but it must type-check. If `Sentry.logger` errors, confirm `@sentry/react` is v10 (`node -e "console.log(require('@sentry/react/package.json').version)"`). + +- [ ] **Step 5: Commit** + +```bash +git add package.json package-lock.json src/telemetry.ts +git commit -m "feat(sentry-react): add telemetry module with faithful signal APIs" +``` + +--- + +### Task 2: Todo state + action→telemetry context + +**Files:** +- Create: `src/todos-context.tsx` + +**Interfaces:** +- Consumes (from Task 1): `breadcrumb`, `openTodoSpan`, `endTodoSpan`, `logAdded`, `logDeleted` from `./telemetry`. +- Produces: + - `interface Todo { id: string; text: string; done: boolean }` + - `type Filter = 'all' | 'active' | 'completed'` + - `function TodosProvider({ children }: { children: ReactNode }): JSX.Element` + - `function useTodos(): TodosValue` where `TodosValue = { todos: Todo[]; filter: Filter; addTodo(text: string): void; toggleTodo(id: string): void; deleteTodo(id: string): void; clearCompleted(): void; setFilter(f: Filter): void }` + +- [ ] **Step 1: Create `src/todos-context.tsx`** + +Note: side effects (telemetry, span map mutation) are kept OUT of the `setTodos` updater callbacks, because React StrictMode invokes updaters twice — running telemetry inside them would double-fire. Updaters stay pure; telemetry runs once per handler call. + +```tsx +// todos-context.tsx — the in-memory todo list plus the wiring from each action +// to its Sentry signal. State is useState only; there is no backend. Open todos +// hold a span in `spans` until they are completed or deleted. +import { createContext, useCallback, useContext, useRef, useState } from 'react' +import type { ReactNode } from 'react' +import type { Span } from '@sentry/react' +import { + breadcrumb, + endTodoSpan, + logAdded, + logDeleted, + openTodoSpan, +} from './telemetry' + +// Todo is a single item in the list. +export interface Todo { + id: string + text: string + done: boolean +} + +// Filter is which todos the list is showing. +export type Filter = 'all' | 'active' | 'completed' + +// TodosValue is the state and actions exposed to the pages. +interface TodosValue { + todos: Todo[] + filter: Filter + addTodo: (text: string) => void + toggleTodo: (id: string) => void + deleteTodo: (id: string) => void + clearCompleted: () => void + setFilter: (f: Filter) => void +} + +const TodosContext = createContext(null) + +// TodosProvider holds the list so both routes (`/` and `/todo/:id`) share it, +// and turns each action into the matching Sentry signal. +export function TodosProvider({ children }: { children: ReactNode }) { + const [todos, setTodos] = useState([]) + const [filter, setFilterState] = useState('all') + // Open todos' spans, keyed by todo id. Ended on completion or deletion. + const spans = useRef(new Map()).current + + const addTodo = useCallback( + (raw: string) => { + const text = raw.trim() + if (!text) { + return + } + const id = crypto.randomUUID() + setTodos((prev) => [{ id, text, done: false }, ...prev]) + breadcrumb(`Added todo "${text}"`) + logAdded(id, text) + spans.set(id, openTodoSpan(id, text)) + }, + [spans], + ) + + const toggleTodo = useCallback( + (id: string) => { + const todo = todos.find((t) => t.id === id) + if (!todo) { + return + } + const done = !todo.done + setTodos((prev) => prev.map((t) => (t.id === id ? { ...t, done } : t))) + const span = spans.get(id) + if (done) { + // Completing ends the open span, sending its measured duration. + if (span) { + endTodoSpan(span) + spans.delete(id) + } + } else if (!span) { + // Reopening starts a fresh span. + spans.set(id, openTodoSpan(id, todo.text)) + } + breadcrumb(`${done ? 'Completed' : 'Reopened'} todo "${todo.text}"`) + }, + [todos, spans], + ) + + const deleteTodo = useCallback( + (id: string) => { + const todo = todos.find((t) => t.id === id) + setTodos((prev) => prev.filter((t) => t.id !== id)) + const span = spans.get(id) + if (span) { + // Deleting an open (not-yet-done) todo cancels its span. + endTodoSpan(span, { cancelled: todo ? !todo.done : true }) + spans.delete(id) + } + if (todo) { + breadcrumb(`Deleted todo "${todo.text}"`) + logDeleted(id, todo.text) + } + }, + [todos, spans], + ) + + const clearCompleted = useCallback(() => { + // Completed todos already ended their spans when toggled done. + setTodos((prev) => prev.filter((t) => !t.done)) + breadcrumb('Cleared completed todos') + }, []) + + const setFilter = useCallback((f: Filter) => { + setFilterState(f) + breadcrumb(`Filtered by "${f}"`) + }, []) + + const value: TodosValue = { + todos, + filter, + addTodo, + toggleTodo, + deleteTodo, + clearCompleted, + setFilter, + } + + return {children} +} + +// useTodos reads the shared todo state. Throws if used outside the provider. +export function useTodos(): TodosValue { + const value = useContext(TodosContext) + if (!value) { + throw new Error('useTodos must be used within a TodosProvider') + } + return value +} +``` + +- [ ] **Step 2: Run the build** + +Run: `npm run build` +Expected: PASS. The provider is unused so far but must type-check. + +- [ ] **Step 3: Commit** + +```bash +git add src/todos-context.tsx +git commit -m "feat(sentry-react): add todos context wiring actions to telemetry" +``` + +--- + +### Task 3: Trace badge + both pages + styles + +**Files:** +- Create: `src/components/TraceBadge.tsx` +- Create: `src/pages/TodoList.tsx` +- Create: `src/pages/TodoDetail.tsx` +- Modify: `src/App.css` (add badge/detail styles, remove `.feed*` styles) + +**Interfaces:** +- Consumes (Task 1): `currentTraceLink`, `TraceLink`, `captureTestError`, `syncTodos` from `../telemetry`. +- Consumes (Task 2): `useTodos`, `Todo`, `Filter` from `../todos-context`. +- Produces: `function TraceBadge(): JSX.Element`, `function TodoList(): JSX.Element`, `function TodoDetail(): JSX.Element`. + +- [ ] **Step 1: Create `src/components/TraceBadge.tsx`** + +```tsx +// TraceBadge shows the trace id of the current page and a link to it in Uptrace. +// It reads the active trace on each navigation (keyed on location) and keeps +// showing that id until the next navigation — so you can watch the id change +// ONLY on reload and route change, never on a button click. requestAnimationFrame +// defers the read until after the router integration has opened the new trace. +import { useEffect, useState } from 'react' +import { useLocation } from 'react-router-dom' +import { currentTraceLink } from '../telemetry' +import type { TraceLink } from '../telemetry' + +export function TraceBadge() { + const location = useLocation() + const [link, setLink] = useState(null) + + useEffect(() => { + const raf = requestAnimationFrame(() => setLink(currentTraceLink())) + return () => cancelAnimationFrame(raf) + }, [location.key]) + + return ( +
    + current trace + {link?.traceId ?? '—'} + {link?.url ? ( + + View in Uptrace ↗ + + ) : ( + set VITE_UPTRACE_URL for a link + )} +
    + ) +} +``` + +- [ ] **Step 2: Create `src/pages/TodoList.tsx`** + +```tsx +// TodoList is the main route (`/`): compose, list, filter todos, and the two +// demo buttons. Each todo's text links to its detail route, so clicking it +// triggers a navigation — and a new navigation trace named `/todo/:id`. +import { useMemo, useState } from 'react' +import { Link } from 'react-router-dom' +import { useTodos } from '../todos-context' +import type { Filter } from '../todos-context' +import { captureTestError, syncTodos } from '../telemetry' +import { TraceBadge } from '../components/TraceBadge' + +export function TodoList() { + const { todos, filter, addTodo, toggleTodo, deleteTodo, clearCompleted, setFilter } = useTodos() + const [text, setText] = useState('') + + const remaining = todos.filter((t) => !t.done).length + const completed = todos.length - remaining + const visible = useMemo( + () => + todos.filter((t) => { + if (filter === 'active') return !t.done + if (filter === 'completed') return t.done + return true + }), + [todos, filter], + ) + + function submit() { + if (!text.trim()) return + addTodo(text) + setText('') + } + + return ( +
    +
    +

    Todo

    +

    React, instrumented with Sentry, reporting to Uptrace.

    +
    + +
    + setText(e.target.value)} + onKeyDown={(e) => e.key === 'Enter' && submit()} + /> + +
    + +
    + {remaining} left +
    + {(['all', 'active', 'completed'] as const).map((f: Filter) => ( + + ))} +
    + +
    + +
      10 ? 'todos todos--scroll' : 'todos'}> + {visible.length === 0 ? ( +
    • + {todos.length === 0 + ? 'Nothing here yet. Add your first todo above.' + : `No ${filter} todos.`} +
      • + ) : ( + visible.map((todo) => ( +
    • + toggleTodo(todo.id)} + /> + + {todo.text} + + +
      • + )) + )} +
    + +
    +

    Send data to Uptrace

    +
    + + +
    +

    + Adding, completing and deleting todos emit spans and logs on this page's trace. Sync + runs nested spans; the error button reports an exception. All of them share the current + trace — it changes only when you reload or open a todo. +

    + +
    +
    + ) +} +``` + +- [ ] **Step 3: Create `src/pages/TodoDetail.tsx`** + +```tsx +// TodoDetail is the `/todo/:id` route. Reaching it is a navigation, so the SDK +// opens a new navigation trace named by the parameterized path `/todo/:id`. +import { Link, useParams } from 'react-router-dom' +import { useTodos } from '../todos-context' +import { TraceBadge } from '../components/TraceBadge' + +export function TodoDetail() { + const { id } = useParams() + const { todos, toggleTodo, deleteTodo } = useTodos() + const todo = todos.find((t) => t.id === id) + + return ( +
    +

    + + ← All todos + +

    + + {todo ? ( + <> +

    {todo.text}

    +

    {todo.done ? 'Completed' : 'Active'}

    +
    + + +
    + + ) : ( +

    This todo no longer exists.

    + )} + + +
    + ) +} +``` + +- [ ] **Step 4: Update `src/App.css` — remove feed styles, add badge/detail/text styles** + +Delete the entire `.feed` block — every rule from the `.feed {` line through the `.feed__hint:` rule (the block starting at `/* ... */`-commented feed section down to and including `.feed__hint { ... }`). Then append the following at the end of the file: + +```css +/* Todo text link -------------------------------------------------------- */ + +.todo__text { + flex: 1; + color: var(--ink); + text-decoration: none; +} + +.todo__text:hover { + text-decoration: underline; +} + +.todo__text.done { + color: var(--faint); + text-decoration: line-through; +} + +/* Detail page ----------------------------------------------------------- */ + +.detail__back { + color: var(--muted); + text-decoration: none; + font-size: 0.9rem; +} + +.detail__back:hover { + color: var(--ink); +} + +.detail__title { + margin: 0.5rem 0 0; + font-size: 1.75rem; + letter-spacing: -0.02em; +} + +.detail__title.done { + color: var(--faint); + text-decoration: line-through; +} + +/* Current-trace badge --------------------------------------------------- */ + +.trace-badge { + display: flex; + align-items: center; + gap: 0.5rem; + margin-top: 1rem; + padding: 0.5rem 0.75rem; + background: var(--raised); + border: 1px solid var(--line); + border-radius: var(--radius); + font-size: 0.8rem; +} + +.trace-badge__label { + flex: none; + color: var(--muted); +} + +.trace-badge__id { + flex: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 0.74rem; + color: var(--ink); +} + +.trace-badge__cta { + flex: none; + color: var(--accent); + text-decoration: none; + font-weight: 560; + white-space: nowrap; +} + +.trace-badge__cta:hover { + text-decoration: underline; +} +``` + +Note: the old `.todo label` rules still exist and are now unused (the row no longer wraps a `