feat: add Sentry error monitoring, tracing, and session replay

- Install @sentry/react and @sentry/vite-plugin
- Create instrument.ts with error monitoring, browser tracing (20% prod),
  and session replay (10% sessions, 100% on errors)
- Wire React 19 reactErrorHandler() on createRoot error hooks
- Wrap router with wrapCreateBrowserRouterV7 for route-aware transactions
- Configure sentryVitePlugin for source map uploads
- Add VITE_SENTRY_DSN to .env.example

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-07 19:16:10 -05:00
parent 96966c3b72
commit 7631b843a9
7 changed files with 542 additions and 75 deletions

View File

@@ -1,9 +1,12 @@
import { createBrowserRouter } from 'react-router-dom'
import * as Sentry from '@sentry/react'
import { lazy, Suspense } from 'react'
import { AppLayout, ProtectedRoute } from '@/components/layout'
import { RouteError } from '@/components/common/RouteError'
import { ErrorBoundary } from '@/components/common/ErrorBoundary'
import { PageLoader } from '@/components/common/PageLoader'
const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouterV7(createBrowserRouter)
import {
LoginPage,
RegisterPage,
@@ -73,7 +76,7 @@ function page(Component: React.LazyExoticComponent<React.ComponentType>) {
)
}
export const router = createBrowserRouter([
export const router = sentryCreateBrowserRouter([
{
path: '/login',
element: <LoginPage />,