Chore: configure sentry#629
Conversation
There was a problem hiding this comment.
Pull request overview
This PR integrates Sentry error tracking and performance monitoring into the application by installing @sentry/react, creating a Sentry initialization module, and updating the ErrorBoundary component to capture React errors.
Changes:
- Added Sentry SDK configuration with React Router v6 performance tracking
- Initialized Sentry on application startup
- Updated ErrorBoundary to send captured errors to Sentry
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/sentry.js | New file containing Sentry initialization with environment-based configuration and React Router integration |
| src/index.jsx | Calls initSentry() at application startup |
| src/components/ErrorBoundary.jsx | Enhanced to capture exceptions to Sentry with component stack context |
| package.json | Added @sentry/react dependency (v10.34.0) |
| README.md | Added documentation for required Sentry environment variables |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -0,0 +1,54 @@ | |||
| import * as Sentry from "@sentry/react"; | |||
| import { browserTracingIntegration, reactRouterV6BrowserTracingIntegration } from "@sentry/react"; | |||
There was a problem hiding this comment.
The browserTracingIntegration is already imported from @sentry/react on line 1 via the namespace import * as Sentry. This redundant import should be removed and the integration should be accessed as Sentry.browserTracingIntegration on line 37.
| browserTracingIntegration({ | ||
| routingInstrumentation: reactRouterV6BrowserTracingIntegration({ | ||
| useLocation, | ||
| useNavigationType, | ||
| createRoutesFromChildren, | ||
| matchRoutes, | ||
| }), | ||
| }), |
There was a problem hiding this comment.
Incorrect Sentry integration API usage. reactRouterV6BrowserTracingIntegration should be used as a standalone integration, not as the routingInstrumentation parameter to browserTracingIntegration. The correct usage is to pass reactRouterV6BrowserTracingIntegration with the router hooks directly in the integrations array, replacing the browserTracingIntegration wrapper entirely.
| @@ -0,0 +1,54 @@ | |||
| import * as Sentry from "@sentry/react"; | |||
| import { browserTracingIntegration, reactRouterV6BrowserTracingIntegration } from "@sentry/react"; | |||
There was a problem hiding this comment.
Since browserTracingIntegration is already available through the namespace import on line 1, this named import creates redundancy. Remove the named import and use Sentry.reactRouterV6BrowserTracingIntegration instead for consistency.
Add Sentry Error Tracking & Performance Monitoring
Summary
This PR integrates Sentry for comprehensive error tracking and performance monitoring in the application.
Changes
Technical Details
@sentry/react(v10.34.0) and@sentry/vite-plugin(v4.6.2)src/sentry.jswith Sentry initialization and React Router v6 integrationvite.config.jsto generate and upload source maps automaticallyErrorBoundary.jsxto capture React errors to SentryConfiguration
Requires environment variables:
VITE_SENTRY_DSN(required for error tracking)SENTRY_ORG,SENTRY_PROJECT,SENTRY_AUTH_TOKEN(required for source map uploads)Testing