feat(browser): @maple-dev/browser/react with error boundary and router adapters - #1153
Conversation
…r adapters
Apps had to hand-wire startNavigation/endNavigation into their router and
write their own error boundary. The new subpath does both.
- MapleErrorBoundary reports a render error once, as a react.render_error
span with the component stack in maple.react.component_stack, and
renders a fallback node or ({ error, reset }) function.
- mapleReactErrorHandler() for React 19's createRoot onCaughtError /
onUncaughtError / onRecoverableError; dedupes with the boundary.
- instrumentReactRouter(router) for data routers: a navigation starts when
the router starts loading and ends when loaders settle, named by the
route template built from the matched routes (navigate /projects/:id).
Routes without loaders, which never enter loading, are still spanned.
- instrumentTanStackRouter(router): onBeforeNavigate to onResolved, named
by the leaf route's fullPath; search-only changes are not navigations,
and the router's own initial-load event does not restart the page load.
Routers are typed structurally, so there is no router dependency; a real
TanStack router was checked against the interface. react is an optional
peer dependency. The entry shares one chunk with the main one, so
navigation and dedupe state stay single-instance.
|
Navigate logical layers of code changes, visualize relationships, and explore their blast radius. No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Advanced Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (6)
Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 1 remain after this review. 📝 WalkthroughWalkthroughThe browser package adds a React entry point with an error boundary, a React 19 root error handler, and React Router and TanStack Router navigation adapters. It adds browser tests, package exports and build configuration, and integration documentation. ChangesReact integration
Priority: ➖ Normal Estimated code review effort: 3 (Moderate) | ~25 minutes Change: Feature Sequence Diagram(s)sequenceDiagram
participant React
participant MapleErrorBoundary
participant MapleBrowser
React->>MapleErrorBoundary: Deliver render error
MapleErrorBoundary->>MapleBrowser: Report error and component stack
MapleErrorBoundary-->>React: Render fallback
sequenceDiagram
participant ReactRouter
participant instrumentReactRouter
participant MapleBrowser
ReactRouter->>instrumentReactRouter: Publish router state
instrumentReactRouter->>MapleBrowser: Track navigation span
Suggested reviewers: Merge Risk: ⚪ Minimal · up to This adds an opt-in React subpath with error reporting and router adapters. No concrete merge-blocking problem was identified in the supplied evidence. Security Architecture ReviewSecurity architecture risk: 🔵 Low · up to The integrations reuse existing reporting, consent and URL-sanitization controls. Navigation cleanup leaves a bounded ownership gap, while packaged runtime sharing and concurrent-router behavior remain unverified. No introduced security vulnerability was established. Retained concerns
Security review detailsSecurity Blast Radius
Security Findings and Attack Paths
Trust Boundaries and Controls
Resilience and Maintainability Implications
Hardening Proposals
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Full details: Docstring CoverageExplanation Docstring coverage is 71.43% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 7 functions across 3 files. (3 skipped: 3 unsupported.)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Note A newer push replaced |
Maple reviewConfidence 4/5 · likely safe to merge Adds a
What was checked
Observability coverage: 2 of 2 changes observable
|
Maple reviewConfidence 5/5 · safe to merge Only
What was checked
Observability coverage: 2 of 2 changes observable
|
1 participant
Part 7 of the browser SDK stack. Based on the HTTP errors / CSP PR.
Apps had to hand-wire
startNavigation/endNavigationinto their router and write their own error boundary. The new@maple-dev/browser/reactsubpath does both.What changes
MapleErrorBoundaryreports a render error once, as areact.render_errorspan with the component stack inmaple.react.component_stack(trimmed to 2 kB), and renders a fallback node or({ error, reset }) => node.mapleReactErrorHandler()for React 19'screateRootonCaughtError/onUncaughtError/onRecoverableError. It shares the SDK's dedupe, so an error a boundary already reported is not reported twice.instrumentReactRouter(router)for data routers (createBrowserRouter): a navigation starts when the router starts loading and ends when its loaders settle, named by the template built from the matched routes (navigate /projects/:id). Routes without loaders, which never enterloading, are still spanned.instrumentTanStackRouter(router):onBeforeNavigate→onResolved, named by the leaf route'sfullPath(navigate /projects/$projectId). Search-only changes are not navigations, and the router's own initial-load event does not restart the page load as anavigate.Packaging
@tanstack/react-routerrouter was type-checked againstTanStackRouterLike(scratch file, not committed).reactis an optional peer dependency.dist/react.mjsimports the samesrc-*.mjsasindex.mjs), so navigation and dedupe state stay single-instance.apps/webuses the Effect SDK, not@maple-dev/browser, so there is nothing to dogfood there.Testing
Browser tests with real React 19 rendering: the boundary reports once with the component stack, renders the fallback and resets; the root handler reports once. React Router and TanStack Router adapters are tested against fakes that mirror each router's state and event sequence (page load, loading navigations, loader-less routes, search-only changes, initial-load re-announce).
Need help on this PR? Tag
@codesmith-botwith what you need. Autofix is disabled.Summary by CodeRabbit
New Features
Documentation