Skip to content

fix(ui): upgrade react-router 7 -> 8 (JEF-623) - #154

Merged
thejefflarson merged 1 commit into
mainfrom
thejefflarson/jef-623-upgrade-react-router-78-to-clear-the-high-csrf-bypass
Jul 29, 2026
Merged

fix(ui): upgrade react-router 7 -> 8 (JEF-623)#154
thejefflarson merged 1 commit into
mainfrom
thejefflarson/jef-623-upgrade-react-router-78-to-clear-the-high-csrf-bypass

Conversation

@thejefflarson

Copy link
Copy Markdown
Owner

Summary

Clears the repo's one HIGH Dependabot advisory: react-router (GHSA-qwww-vcr4-c8h2), a CSRF bypass, vulnerable >=7.12.0 <8.3.0 and patched in 8.3.0. The fix is internal to react-router 8.3.0 -- no app-level CSRF handling was added.

What changed

  • ui/package.json / ui/package-lock.json: react-router-dom@^7.18.1 -> react-router@^8.3.0 (react-router v8 drops the react-router-dom package entirely).
  • Mechanical import-path swap, "react-router-dom" -> "react-router", across App.tsx, main.tsx, timerange.tsx, the route components (Alerts, LogView, MetricChart, MetricList, ServiceMap, Services, TraceList, TraceWaterfall), and routes.a11y.test.tsx. No source logic changed.

Why this is the only change needed

Checked the v8 upgrade guide/changelog against this app's actual usage:

  • v8's only breaking change touching this codebase is the removal of react-router-dom. In v7, react-router-dom was just export * from "react-router" plus RouterProvider/HydratedRouter (re-exported from react-router/dom) -- confirmed by inspecting the published package sources for both versions.
  • Every export this app uses (BrowserRouter, MemoryRouter, Routes, Route, Navigate, NavLink, Link, useNavigate, useParams, useSearchParams) is exported directly from react-router@8.3.0's main entry point (verified against its published .d.ts).
  • This app uses declarative-mode routing (<BrowserRouter>/<Routes>/<Route>), not the data router (RouterProvider), so the one thing that actually moved to react-router/dom in v8 (RouterProvider/HydratedRouter) isn't used here.
  • ui/src/links.ts (traceHref/logsHref) doesn't import react-router at all -- it's pure string building -- so deep-link URL behavior is untouched by construction, and links.test.ts still passes unchanged.
  • Other v8 breaking changes (Node 22.22+/React 19.2.7+ minimums, ESM-only, future.v8_* flag removal, @react-router/dev/Cloudflare-plugin/Architect changes) don't apply: this app already meets the React/Node baselines and doesn't use the dev-server/framework-mode tooling those flags gate.

Test plan

  • npm ci resolves cleanly (updated package-lock.json committed)
  • npx tsc --noEmit -- clean
  • npm run build (tsc + vite build) -- clean
  • npx eslint . -- clean
  • npx vitest run -- 33/33 tests pass across 6 files, including links.test.ts (byte-identical traceHref/logsHref URLs, unmodified) and routes.a11y.test.tsx (all top-level routes render and pass the axe structural gate, unmodified)
  • /simplify pass on all changed files: single-pass manual review (Agent tool unavailable in this subagent context) -- diff is a pure mechanical import-path swap, nothing to simplify
  • Self security review against soundcheck's pr-review gate: no Critical/High findings (this diff is the CSRF fix; no new logic was added)

Closes JEF-623

Clears the repo's one HIGH Dependabot advisory (GHSA-qwww-vcr4-c8h2, a
CSRF bypass in react-router, fixed >=8.3.0). The advisory fix is
internal to react-router 8.3.0 -- no app-level CSRF handling is added
here.

v8 removes the `react-router-dom` package (all its exports were
already re-exported unchanged from `react-router` since v7; only
`RouterProvider`/`HydratedRouter`, which this app's declarative-mode
router doesn't use, moved to `react-router/dom`). The only breaking
change that touches this codebase is that import specifier, so the fix
is a mechanical `react-router-dom` -> `react-router` swap across
App.tsx, main.tsx, timerange.tsx, the route components
(Alerts/LogView/MetricChart/MetricList/ServiceMap/Services/TraceList/
TraceWaterfall), and routes.a11y.test.tsx -- no source logic changed.
`links.ts` doesn't import react-router at all, so its URL-building
behavior (traceHref/logsHref) is untouched by construction.

Closes JEF-623

Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
@thejefflarson
thejefflarson merged commit 80a107d into main Jul 29, 2026
5 checks passed
@thejefflarson
thejefflarson deleted the thejefflarson/jef-623-upgrade-react-router-78-to-clear-the-high-csrf-bypass branch July 29, 2026 02:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant