Sentry react-router integration

[kentcdodds]

Migrates Sentry integration from @sentry/remix to @sentry/react-router and upgrades @sentry/vite-plugin.

This change updates:

• Server-side Sentry initialization and error capture to use @sentry/react-router.
• Client-side Sentry initialization to leverage React Router v6 tracing and capture client error boundary errors with the new SDK.
• Removes the Remix withSentry wrapper.
• Updates dependencies to include @sentry/react and @sentry/react-router.
• Upgrades @sentry/vite-plugin to the latest version.

Test Plan

• Run npm run dev and manually verify UI functionality (e.g., homepage reload and scroll at http://localhost:3000).
• Run npm run build to ensure the Vite build pipeline functions correctly with the upgraded plugin.

Checklist

• Tests updated
• Docs updated

Screenshots

Homepage reload and scroll after Sentry migration.

---

 

---

Note

Medium Risk
Touches core monitoring/error-capture paths and upgrades Sentry to v10, which could change what gets reported or sampled in production. No business logic changes, but observability regressions are possible if the new integrations are misconfigured.

Overview
Migrates the app’s Sentry integration away from @sentry/remix to the newer SDKs (@sentry/node on the server and @sentry/react on the client), including a major dependency upgrade and associated lockfile churn.

Server-side error reporting is reworked to call Sentry.captureException with explicit request context (url/method/headers) and a react-router mechanism, and server initialization drops Remix auto-instrumentation in favor of explicit http/prisma integrations.

Client-side monitoring switches tracing to reactRouterV7BrowserTracingIntegration, and the UI error boundary now captures unexpected (non-route) errors via Sentry.captureException; the Remix withSentry root wrapper is removed.

^{Written by Cursor Bugbot for commit 237e5ab. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[kentcdodds]

@cursor, we're running react router v7

[cursor]

Walkthrough

Homepage reload after v7 tracing switch.

Summary

• Switched client tracing to the React Router v7 integration for Sentry browser tracing.【F:app/utils/monitoring.client.tsx†L1-L53】

Testing

• ✅ Manual reload/scroll at http://localhost:3000 to verify UI renders after the .tsx tracing change (see video).

 

[cursor]

Bugbot Autofix resolved 2 of the 2 bugs found in the latest run.

• ✅ Fixed: Server error capture missing request context information
  • Wrapped captureException in a scoped event processor that attaches URL, method, and headers from the request.
• ✅ Fixed: Client tracing uses React Router v7 integration with v6 hooks
  • Switched to the React Router v6 browser tracing integration to match Remix's routing hooks.

[cursor]

Bugbot Autofix resolved 2 of the 2 bugs found in the latest run.

• ✅ Fixed: Using React Router v6 integration with v7
  • Replaced the v6 tracing integration with the v7 variant to match the app’s React Router version.
• ✅ Fixed: Non-Error thrown values silently ignored by client error boundary
  • Removed the Error-only guard so client-side error boundaries also capture non-Error thrown values.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

[cursor]

Redundant document check inside useEffect hook

Low Severity

The typeof document !== 'undefined' check inside useEffect is redundant. useEffect only executes on the client side where document is always defined, making this guard condition unnecessary.