feat(monitoring): integrate Sentry for error tracking and session replay#165
Merged
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🚀 Description
Integrate Sentry into the Next.js application for full-stack error monitoring, session replay, and performance tracing across client, server, and edge runtimes.
📌 Summary
This PR adds
@sentry/nextjsand configures Sentry for all three Next.js runtimes (browser, Node.js server, and edge). It also migratesnext.config.jsto TypeScript and wires up Sentry's webpack plugin for source map uploads in CI/CD environments.🔧 Changes Implemented
@sentry/nextjsdependencysrc/instrumentation.ts— Next.js instrumentation hook that conditionally loads Sentry config fornodejsandedgeruntimessrc/instrumentation-client.ts— client-side Sentry init with Replay integration (10% session sampling, 100% on error)sentry.server.config.tsandsentry.edge.config.ts— runtime-specific Sentry init with 10% trace sampling in productionsrc/app/global-error.tsx— global error boundary that captures uncaught errors viaSentry.captureExceptionnext.config.js→next.config.tsand wrapped withwithSentryConfig(skipped in development to avoid overhead)SENTRY_DSN,SENTRY_ORG,SENTRY_PROJECTconstantsexample.env.localwith required Sentry env vars and guidance.env.sentry-build-pluginto.gitignore🛠️ How It Works?
next.config.tsexports the base config directly — Sentry webpack plugin is skipped to keep local builds fast.withSentryConfigwraps the config to enable source map uploads and Vercel cron monitor instrumentation.src/instrumentation.tsis the Next.js entry point — it dynamically imports the correct Sentry config based onNEXT_RUNTIME(nodejsoredge).src/instrumentation-client.tsinitialises Sentry on the browser with Session Replay enabled.global-error.tsxensures uncaught App Router errors are reported to Sentry before displaying the fallback UI.✅ Checklist Before Merging
NEXT_PUBLIC_SENTRY_DSN,SENTRY_ORG, andSENTRY_PROJECTset in CI secretsSENTRY_AUTH_TOKENadded to GitHub Actions secrets for source map uploadssendDefaultPii: trueis set)🔗 Related Issues
https://projects.arbisoft.com/arbisoft/browse/ASP-274/
📢 Notes for Reviewers
NODE_ENV === "development") to avoid polluting the Sentry project with local noise. Only production/staging builds send data.tracesSampleRateis set to0.1(10%) in production to limit overhead — adjust if more coverage is needed.sendDefaultPii: trueis enabled; confirm this aligns with the project's data privacy requirements.SENTRY_AUTH_TOKENat build time — this must be a CI secret, never committed.