(SP: 2) [Monitoring] Add Sentry for production error tracking

[ViktorSvertoka]

Add Sentry monitoring (production setup)

Goal

Add production-ready error and performance monitoring for DevLovers.

Scope

• Integrate @sentry/nextjs
• Configure server and edge runtimes
• Enable production-only reporting
• Add performance tracing (10% sampling)
• Add environment & release tracking (Vercel)
• Disable PII collection
• Filter browser/extension/network noise
• Add global error boundary
• Remove example pages and test API
• Configure Vercel environment variables

Result

• Full-stack error monitoring (frontend, API, edge)
• Clean issue tracking
• Optimized free-tier usage

Closes #306

Summary by CodeRabbit

• New Features

  • Added application-wide error monitoring and client-side global error handling with improved error pages.
  • Introduced front-end instrumentation to capture and route runtime errors and performance traces.

• Chores

  • Added monitoring-related dependency and updated build config to enable integration.
  • Updated ignore rules to exclude monitoring config files from commits.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
devlovers-net	Ready	Preview, Comment	Feb 11, 2026 4:24pm

[netlify]

✅ Deploy Preview for develop-devlovers ready!

Name	Link
🔨 Latest commit	05d9429
🔍 Latest deploy log	https://app.netlify.com/projects/develop-devlovers/deploys/698cacc15d7b1b00085ec8d3
😎 Deploy Preview	https://deploy-preview-307--develop-devlovers.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

📝 Walkthrough

Walkthrough

Integrates Sentry into the Next.js frontend: adds Sentry configs for server/edge, client instrumentation, a client-side global error boundary, updates Next.js config to wrap with Sentry, and updates package and gitignore.

Changes

Cohort / File(s)	Summary
Gitignore frontend/.gitignore	Added Sentry config ignore entry .env.sentry-build-plugin.
Package manifest frontend/package.json	Added @sentry/nextjs dependency; adjusted devDependency version for drizzle-kit.
Next.js config frontend/next.config.ts	Wrapped existing export with withSentryConfig(...) and added Sentry build options and comments.
Client instrumentation frontend/instrumentation-client.ts	New client-side Sentry init for browser runtime using @sentry/nextjs, configured from NEXT_PUBLIC_* env vars.
Universal instrumentation frontend/instrumentation.ts	New runtime-aware register() that dynamically imports runtime-specific Sentry configs; exports onRequestError alias.
Sentry runtime configs frontend/sentry.server.config.ts, frontend/sentry.edge.config.ts	New Sentry init files for server and edge runtimes; environment-aware enabling, tracesSampleRate=0.1, release/environment from env vars.
Global error boundary frontend/app/global-error.tsx	New client-side GlobalError React component that captures exceptions via Sentry and renders Next.js error UI.

Sequence Diagram(s)

mermaid
sequenceDiagram
participant Browser as Browser (Client)
participant NextApp as Next.js App
participant Server as Server Runtime
participant Edge as Edge Runtime
participant Sentry as Sentry
Browser->>NextApp: Load page, instrumentation-client initializes Sentry
NextApp->>Sentry: init (DSN, env, release, tracesSampleRate)
Browser->>NextApp: Error thrown in UI
NextApp->>Sentry: captureException via GlobalError
Note right of NextApp: For requests, runtime register() dynamically imports
NextApp->>Server: register() (if NODE_RUNTIME=nodejs)
Server->>Sentry: init (server config)
NextApp->>Edge: register() (if NODE_RUNTIME=edge)
Edge->>Sentry: init (edge config)
Server->>Sentry: captureRequestError (onRequestError)
Edge->>Sentry: captureRequestError (onRequestError)

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐰
I nudge the builds with tiny paws,
Sentry listens, quiet applause.
Server, edge, and browser bright,
I watch the errors flee the night.
Hooray — less humbug, more delight! 🥕✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title accurately and concisely summarizes the main change: adding Sentry for production error tracking, which is the core objective of the PR.
Linked Issues check	✅ Passed	The pull request comprehensively implements all coding requirements from issue #306: Sentry installation and configuration [#306], server/edge runtime support [#306], production-only reporting [#306], performance tracing [#306], environment/release metadata [#306], noise filtering [#306], global error boundary [#306], and package.json updates [#306].
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing Sentry monitoring as specified in issue #306. The frontend/.gitignore addition, Sentry configuration files, instrumentation setup, Next.js config integration, and package.json dependency updates all align with the stated objectives.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/sentry

---

No actionable comments were generated in the recent review. 🎉

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@frontend/instrumentation-client.ts`:
- Around line 7-16: The Sentry client init is using scaffold defaults; update
the Sentry.init call to (1) read dsn from process.env.NEXT_PUBLIC_SENTRY_DSN
instead of hardcoding, (2) set sendDefaultPii to false, (3) set tracesSampleRate
to 0.1, (4) include environment and release using NEXT_PUBLIC_VERCEL_ENV and
NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA, and (5) gate initialization so it only runs
in production (mirror the server/edge enabled:isProduction behavior); locate and
modify the Sentry.init invocation in frontend/instrumentation-client.ts to apply
these changes.

In `@frontend/package.json`:
- Line 33: The dependency version for "@sentry/nextjs" in package.json is
invalid; update the version string for the "@sentry/nextjs" dependency (the
entry named "@sentry/nextjs") from "^10.38.0" to a valid release such as
"10.10.0" (or any 10.10.x / lower valid tag) and save package.json so npm
install will succeed.

🧹 Nitpick comments (1)

frontend/app/global-error.tsx (1)

7-27: Consider accepting and using the reset prop for error recovery.

The App Router's global-error component receives a reset function alongside error. Without exposing a retry/reset button, users must do a full page reload to recover. This is a minor UX consideration.

♻️ Optional: Add a reset button for error recovery

 export default function GlobalError({
   error,
+  reset,
 }: {
   error: Error & { digest?: string };
+  reset: () => void;
 }) {
   useEffect(() => {
     Sentry.captureException(error);
   }, [error]);

   return (
     <html lang="en">
       <body>
-        {/* `NextError` is the default Next.js error page component. Its type
-        definition requires a `statusCode` prop. However, since the App Router
-        does not expose status codes for errors, we simply pass 0 to render a
-        generic error message. */}
-        <NextError statusCode={0} />
+        <NextError statusCode={0} />
+        <button onClick={() => reset()}>Try again</button>
       </body>
     </html>
   );
 }