adam/shoc-frontend-new
1
0
Fork 0
mirror of https://github.com/Sea-Haven-Industries/shoc-frontend-new.git synced 2026-10-06 19:22:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

fix: capture React root errors in Sentry

Browse source
This commit is contained in:
Codex Review Integration 2026-09-03 15:53:50 -03:00
parent a24002bc24
commit dc313dc50a
2 changed files with 11 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
docs/adr/0002-sentry-observability.md
View file

@ -18,7 +18,10 @@ Use the pinned `@sentry/react` 10.73.0 SDK. Initialize it before the application
router is created, and wrap `createBrowserRouter` with Sentry's current React router is created, and wrap `createBrowserRouter` with Sentry's current React
Router compatibility API. Configure the browser tracing integration with a 100% Router compatibility API. Configure the browser tracing integration with a 100%
transaction sample rate, and propagate trace headers only to the SPA origin and transaction sample rate, and propagate trace headers only to the SPA origin and
the configured `VITE_API_URL` base. the configured `VITE_API_URL` base. Pass `Sentry.reactErrorHandler()` as the
`onCaughtError`, `onUncaughtError`, and `onRecoverableError` callbacks of
`ReactDOM.createRoot`, so React 19's root error hooks capture caught, uncaught,
and recoverable component errors as Sentry events.
The DSN comes from `VITE_SENTRY_DSN`. It is intentionally treated as public The DSN comes from `VITE_SENTRY_DSN`. It is intentionally treated as public
browser configuration because every `VITE_` value is embedded in the built browser configuration because every `VITE_` value is embedded in the built

8
src/main.tsx
View file

@ -1,3 +1,5 @@
import * as Sentry from "@sentry/react";
import "@/observability/sentry"; import "@/observability/sentry";
import React from "react"; import React from "react";
@ -12,7 +14,11 @@ if (!rootElement) {
throw new Error("Root element #root not found"); throw new Error("Root element #root not found");
} }
ReactDOM.createRoot(rootElement).render( ReactDOM.createRoot(rootElement, {
onCaughtError: Sentry.reactErrorHandler(),
onRecoverableError: Sentry.reactErrorHandler(),
onUncaughtError: Sentry.reactErrorHandler(),
}).render(
<React.StrictMode> <React.StrictMode>
<AppProviders> <AppProviders>
<AppRoot /> <AppRoot />