Skip to content

feat(monitoring): integrate Sentry for error tracking and session replay#165

Merged
farhan2742 merged 1 commit into
arbisoft:devfrom
arbisoft-qaisarirfan:ASP-274
Jun 24, 2026
Merged

feat(monitoring): integrate Sentry for error tracking and session replay#165
farhan2742 merged 1 commit into
arbisoft:devfrom
arbisoft-qaisarirfan:ASP-274

Conversation

@arbisoft-qaisarirfan

Copy link
Copy Markdown
Contributor

🚀 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/nextjs and configures Sentry for all three Next.js runtimes (browser, Node.js server, and edge). It also migrates next.config.js to TypeScript and wires up Sentry's webpack plugin for source map uploads in CI/CD environments.

🔧 Changes Implemented

  • ✅ Added @sentry/nextjs dependency
  • ✅ Created src/instrumentation.ts — Next.js instrumentation hook that conditionally loads Sentry config for nodejs and edge runtimes
  • ✅ Created src/instrumentation-client.ts — client-side Sentry init with Replay integration (10% session sampling, 100% on error)
  • ✅ Created sentry.server.config.ts and sentry.edge.config.ts — runtime-specific Sentry init with 10% trace sampling in production
  • ✅ Created src/app/global-error.tsx — global error boundary that captures uncaught errors via Sentry.captureException
  • ✅ Migrated next.config.jsnext.config.ts and wrapped with withSentryConfig (skipped in development to avoid overhead)
  • ✅ Added SENTRY_DSN, SENTRY_ORG, SENTRY_PROJECT constants
  • ✅ Updated example.env.local with required Sentry env vars and guidance
  • ✅ Added .env.sentry-build-plugin to .gitignore

🛠️ How It Works?

  1. In development, next.config.ts exports the base config directly — Sentry webpack plugin is skipped to keep local builds fast.
  2. In production, withSentryConfig wraps the config to enable source map uploads and Vercel cron monitor instrumentation.
  3. src/instrumentation.ts is the Next.js entry point — it dynamically imports the correct Sentry config based on NEXT_RUNTIME (nodejs or edge).
  4. src/instrumentation-client.ts initialises Sentry on the browser with Session Replay enabled.
  5. global-error.tsx ensures uncaught App Router errors are reported to Sentry before displaying the fallback UI.

✅ Checklist Before Merging

  • NEXT_PUBLIC_SENTRY_DSN, SENTRY_ORG, and SENTRY_PROJECT set in CI secrets
  • SENTRY_AUTH_TOKEN added to GitHub Actions secrets for source map uploads
  • Verified errors are appearing in the Sentry dashboard after a test throw
  • Confirmed Session Replay is recording in Sentry
  • Ensured no sensitive PII is leaked unintentionally (sendDefaultPii: true is set)

🔗 Related Issues

https://projects.arbisoft.com/arbisoft/browse/ASP-274/

📢 Notes for Reviewers

  • Sentry is disabled in development (NODE_ENV === "development") to avoid polluting the Sentry project with local noise. Only production/staging builds send data.
  • tracesSampleRate is set to 0.1 (10%) in production to limit overhead — adjust if more coverage is needed.
  • sendDefaultPii: true is enabled; confirm this aligns with the project's data privacy requirements.
  • Source map uploads require SENTRY_AUTH_TOKEN at build time — this must be a CI secret, never committed.

@farhan2742 farhan2742 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@farhan2742 farhan2742 merged commit 5a0b3a1 into arbisoft:dev Jun 24, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants