Skip to content

feat: integrate Sentry for error tracking and monitoring#17

Merged
freelook merged 6 commits into
mainfrom
feat/sentry-integration
May 15, 2026
Merged

feat: integrate Sentry for error tracking and monitoring#17
freelook merged 6 commits into
mainfrom
feat/sentry-integration

Conversation

@freelook
Copy link
Copy Markdown
Contributor

@freelook freelook commented May 11, 2026

This pull request integrates Sentry error monitoring into the app. Sentry is now configured for client, server, and edge environments, enabling comprehensive error tracking and reporting. The Next.js configuration is updated to support Sentry's source map uploads and optimizations, and the necessary Sentry package is added to the project dependencies.

Sentry Integration and Configuration:

  • Added Sentry initialization files for the client (instrumentation-client.ts), server (sentry.server.config.ts), and edge (sentry.edge.config.ts) environments, each with the appropriate DSN and setup instructions. [1] [2] [3]
  • Updated the Next.js configuration in next.config.mjs to wrap with withSentryConfig, enabling source map uploads, logging controls, and tree-shaking for Sentry, as well as setting project and organization details. [1] [2]
  • Added the @sentry/nextjs package to the project dependencies in package.json.

Error Handling:

  • Implemented a GlobalError component (app/global-error.tsx) that captures exceptions with Sentry and displays a generic error page using Next.js's default error component.

Instrumentation Utilities:

  • Created instrumentation.ts to register Sentry for different runtimes and expose utility functions for capturing request errors.

Summary by CodeRabbit

  • New Features
    • Integrated automatic error tracking and reporting to improve reliability and visibility into runtime issues
    • Added global error handling with a graceful error page for better user experience
    • Enabled monitoring of server requests and client-side navigation transitions for improved observability

Review Change Stack

@vercel
Copy link
Copy Markdown

vercel Bot commented May 11, 2026

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

Project Deployment Actions Updated (UTC)
pay Ready Ready Preview, Comment May 15, 2026 10:10am

Request Review

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 8

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/global-error.tsx`:
- Around line 7-27: Update the GlobalError component to support user recovery by
turning it into a client component (add "use client"), accept a reset: () =>
void prop in the GlobalError signature, and render a visible "Try again" button
that calls reset when clicked; keep the existing Sentry.captureException(error)
usage and also optionally display error.digest (if present) under the button for
reference, while still rendering <NextError statusCode={0} /> for the generic
message.

In `@instrumentation-client.ts`:
- Around line 7-9: The Sentry.init call currently only supplies a dsn; update
the Sentry.init invocation (the Sentry.init(...) call) to include
client-specific configuration options: add environment (e.g.,
process.env.NODE_ENV), tracesSampleRate for performance monitoring,
replaysSessionSampleRate and replaysOnErrorSampleRate for session replay
capture, and optionally integrations to customize browser integrations; set
sensible defaults (e.g., lower tracesSampleRate in production) and read
sensitive values like the DSN from environment variables (e.g.,
NEXT_PUBLIC_SENTRY_DSN) when available.
- Around line 7-9: Replace the hard-coded Sentry DSN in the Sentry.init call
with an environment variable: read the DSN from process.env.SENTRY_DSN (or
equivalent config loader), pass that value into the dsn property in Sentry.init,
and remove the literal string; also add a simple check around Sentry.init (using
the Sentry.init invocation) to only initialize when the env var is present (or
log/throw a clear error) and ensure any required env loading (e.g., dotenv) is
performed earlier in the startup path.

In `@instrumentation.ts`:
- Around line 3-11: The register function currently checks
process.env.NEXT_RUNTIME twice with two separate ifs even though the runtime is
mutually exclusive; change the second check to an else if so only one import
path runs. Update the register function (symbol: register) to use if
(process.env.NEXT_RUNTIME === "nodejs") { await
import("./sentry.server.config"); } else if (process.env.NEXT_RUNTIME ===
"edge") { await import("./sentry.edge.config"); } to make the exclusivity
explicit and avoid the redundant check.

In `@sentry.edge.config.ts`:
- Around line 8-10: Update the Sentry.init call to include production-safe,
environment-aware settings: replace the hardcoded DSN with process.env (e.g.
NEXT_PUBLIC_SENTRY_DSN) and add environment, tracesSampleRate (use a lower rate
in production, higher in dev), and any error filtering or beforeSend option to
drop expected client-side errors; locate the Sentry.init invocation and add
these options (dsn, environment, tracesSampleRate, and optional
beforeSend/errorFilter) so the edge runtime mirrors the server config patterns.
- Around line 8-10: Sentry.init currently hardcodes the DSN string; change it to
read from an environment variable (e.g. SENTRY_DSN) and pass that value into
Sentry.init({ dsn: ... }) instead of the literal; validate that SENTRY_DSN is
present (or gracefully handle its absence) and ensure the runtime/bundler
exposes the env var for the edge runtime so environment-specific DSNs are used.

In `@sentry.server.config.ts`:
- Around line 7-9: The Sentry.init call currently hardcodes the DSN string;
change it to read from an environment variable (e.g.,
process.env.NEXT_PUBLIC_SENTRY_DSN) instead of the literal string so different
environments can supply different DSNs and avoid committing the value; update
the Sentry.init({ dsn: ... }) invocation to use that env var and ensure the
project documentation/.env instructions instruct adding NEXT_PUBLIC_SENTRY_DSN
for local development and setting the variable in your deployment environment.
- Around line 7-9: Replace the bare Sentry.init({ dsn: "..." }) call by
expanding it to include production-ready options: use Sentry.init and pull the
DSN from process.env.SENTRY_DSN (fallback optional), set environment:
process.env.NODE_ENV, set tracesSampleRate to process.env.NODE_ENV ===
"production" ? 0.1 : 1.0, add sendDefaultPii: true (or false if you don't want
PII), enableLogs: true, and add an ignoreErrors array for noisy known errors
(e.g. extension URL prefixes); also ensure you do not use NEXT_PUBLIC_ prefixed
env vars in this server-side config file (sentry.server.config.ts) so secrets
remain server-only.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 7006d027-f25f-4a5d-8e2f-08e883fb053e

📥 Commits

Reviewing files that changed from the base of the PR and between e8beda8 and b310d1a.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (8)
  • .gitignore
  • app/global-error.tsx
  • instrumentation-client.ts
  • instrumentation.ts
  • next.config.mjs
  • package.json
  • sentry.edge.config.ts
  • sentry.server.config.ts

Comment thread app/global-error.tsx
Comment thread instrumentation-client.ts
Comment thread instrumentation.ts
Comment thread sentry.edge.config.ts
Comment thread sentry.server.config.ts
@freelook freelook requested a review from GabrielePicco May 12, 2026 08:03
Copy link
Copy Markdown
Contributor

@GabrielePicco GabrielePicco left a comment

Choose a reason for hiding this comment

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

Thanks!

Requests few changes, but LGTM!

Comment thread sentry.server.config.ts Outdated
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

♻️ Duplicate comments (4)
sentry.server.config.ts (2)

8-10: 🧹 Nitpick | 🔵 Trivial | ⚡ Quick win

Add production-ready Sentry configuration options.

The current initialization only sets the DSN. For production use, consider adding:

  • environment to distinguish dev/staging/prod environments
  • tracesSampleRate to control performance monitoring overhead (recommend 0.1 for production, 1.0 for development)
  • sendDefaultPii to explicitly control PII inclusion
  • enableLogs for SDK logging visibility
  • ignoreErrors to suppress known noise (optional)
💡 Example production configuration
 Sentry.init({
   dsn: SENTRY_DSN,
+  
+  environment: process.env.NODE_ENV || "development",
+  
+  // Performance monitoring: 10% sampling in production, 100% in development
+  tracesSampleRate: process.env.NODE_ENV === "production" ? 0.1 : 1.0,
+  
+  // Include PII in events (adjust based on privacy requirements)
+  sendDefaultPii: true,
+  
+  // Enable SDK logs for debugging
+  enableLogs: true,
+  
+  // Optional: filter out known errors
+  // ignoreErrors: [
+  //   "ResizeObserver loop limit exceeded",
+  // ],
 });
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@sentry.server.config.ts` around lines 8 - 10, Update the Sentry.init call to
include production-ready options: pass environment (use process.env.NODE_ENV or
NODE_ENV-like variable) and set tracesSampleRate conditionally (e.g., 1.0 for
development, 0.1 for production), set sendDefaultPii explicitly (true/false per
policy), enable SDK logging via enableLogs (or appropriate debug/transport
option), and add ignoreErrors with an array of known/noisy error strings; modify
the existing Sentry.init({ dsn: SENTRY_DSN }) invocation to include these keys
and conditionally-derived values so Sentry.init and SENTRY_DSN remain the unique
anchors to find the change.

6-6: ⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

Move SENTRY_DSN to environment variables instead of hardcoding it.

The DSN is currently hardcoded in lib/sentry.ts with full authentication credentials, which is a security vulnerability. Update the file to load from process.env.SENTRY_DSN:

Example fix
- export const SENTRY_DSN = "https://81551955b403808ca0d241b04b855620@o4511348334854144.ingest.us.sentry.io/4511370863181824";
+ export const SENTRY_DSN = process.env.SENTRY_DSN || "";

Ensure the environment variable is set in your deployment configuration. For development, add it to your .env.local file (which should be .gitignored).

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@sentry.server.config.ts` at line 6, The SENTRY_DSN constant is currently
hardcoded in lib/sentry.ts; update the code to read the DSN from
process.env.SENTRY_DSN instead of the hardcoded value, i.e., replace
uses/imports of the hardcoded SENTRY_DSN with an exported value that reads from
process.env.SENTRY_DSN (and throws or logs a clear error if missing) so
sentry.server.config.ts imports the environment-backed SENTRY_DSN; also ensure
deployment and local development use the SENTRY_DSN env var (add to .env.local
for dev and keep it gitignored).
sentry.edge.config.ts (1)

9-11: 🧹 Nitpick | 🔵 Trivial | ⚡ Quick win

Add production-ready Sentry configuration options for edge runtime.

Similar to sentry.server.config.ts, the edge configuration should include production-ready options. The edge runtime supports the same core configuration options:

💡 Example production configuration
 Sentry.init({
   dsn: SENTRY_DSN,
+  
+  environment: process.env.NODE_ENV || "development",
+  
+  // Performance monitoring: 10% sampling in production, 100% in development
+  tracesSampleRate: process.env.NODE_ENV === "production" ? 0.1 : 1.0,
+  
+  // Enable SDK logs for debugging
+  enableLogs: true,
 });

Note: Some options like sendDefaultPii or certain integrations may have limited support in edge runtime. Test thoroughly if adding advanced options.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@sentry.edge.config.ts` around lines 9 - 11, Update the Sentry.init(...) call
in sentry.edge.config.ts to use production-ready options similar to
sentry.server.config.ts: pass environment (e.g., process.env.NODE_ENV or
SENTRY_ENV), release (SENTRY_RELEASE), tracesSampleRate (or tracesSampler),
attachStacktrace, and a minimal beforeSend that strips sensitive data; keep
integrations minimal/edge-compatible and avoid Node-only integrations. Ensure
you reference Sentry.init in this file and populate options from environment
variables (SENTRY_DSN, SENTRY_RELEASE, etc.), and document/test any option (like
sendDefaultPii or integrations) that may not be fully supported in the edge
runtime.
instrumentation-client.ts (1)

8-10: 🧹 Nitpick | 🔵 Trivial | ⚡ Quick win

Consider adding client-specific Sentry configuration.

The Sentry.init call lacks client-specific options for performance monitoring and session replay: environment, tracesSampleRate, replaysSessionSampleRate, and replaysOnErrorSampleRate.

💡 Enhanced client configuration
 Sentry.init({
   dsn: SENTRY_DSN,
+  environment: process.env.NODE_ENV,
+  tracesSampleRate: process.env.NODE_ENV === "production" ? 0.1 : 1.0,
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
 });
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@instrumentation-client.ts` around lines 8 - 10, The Sentry.init call
currently only passes SENTRY_DSN; update the Sentry.init invocation to include
client-specific options: pass environment (e.g. from SENTRY_ENVIRONMENT or
NODE_ENV), tracesSampleRate (from SENTRY_TRACES_SAMPLE_RATE or a default like
0.1), replaysSessionSampleRate and replaysOnErrorSampleRate (from
SENTRY_REPLAYS_SESSION_SAMPLE_RATE and SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE or
sensible defaults) so performance monitoring and session replay are enabled;
keep SENTRY_DSN and ensure values are coerced to numbers/booleans where
appropriate when adding these keys to the Sentry.init call.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@lib/sentry.ts`:
- Around line 1-2: Replace the hardcoded SENTRY_DSN constant by reading the
client-exposed env var NEXT_PUBLIC_SENTRY_DSN so different environments can
supply their own DSN: update the export SENTRY_DSN in lib/sentry.ts to return
process.env.NEXT_PUBLIC_SENTRY_DSN (or undefined) and ensure the three importers
(sentry.server.config.ts, sentry.edge.config.ts, instrumentation-client.ts)
continue to import the same exported SENTRY_DSN symbol without changes; also add
NEXT_PUBLIC_SENTRY_DSN to .env.example as shown in the review comment.

---

Duplicate comments:
In `@instrumentation-client.ts`:
- Around line 8-10: The Sentry.init call currently only passes SENTRY_DSN;
update the Sentry.init invocation to include client-specific options: pass
environment (e.g. from SENTRY_ENVIRONMENT or NODE_ENV), tracesSampleRate (from
SENTRY_TRACES_SAMPLE_RATE or a default like 0.1), replaysSessionSampleRate and
replaysOnErrorSampleRate (from SENTRY_REPLAYS_SESSION_SAMPLE_RATE and
SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE or sensible defaults) so performance
monitoring and session replay are enabled; keep SENTRY_DSN and ensure values are
coerced to numbers/booleans where appropriate when adding these keys to the
Sentry.init call.

In `@sentry.edge.config.ts`:
- Around line 9-11: Update the Sentry.init(...) call in sentry.edge.config.ts to
use production-ready options similar to sentry.server.config.ts: pass
environment (e.g., process.env.NODE_ENV or SENTRY_ENV), release
(SENTRY_RELEASE), tracesSampleRate (or tracesSampler), attachStacktrace, and a
minimal beforeSend that strips sensitive data; keep integrations
minimal/edge-compatible and avoid Node-only integrations. Ensure you reference
Sentry.init in this file and populate options from environment variables
(SENTRY_DSN, SENTRY_RELEASE, etc.), and document/test any option (like
sendDefaultPii or integrations) that may not be fully supported in the edge
runtime.

In `@sentry.server.config.ts`:
- Around line 8-10: Update the Sentry.init call to include production-ready
options: pass environment (use process.env.NODE_ENV or NODE_ENV-like variable)
and set tracesSampleRate conditionally (e.g., 1.0 for development, 0.1 for
production), set sendDefaultPii explicitly (true/false per policy), enable SDK
logging via enableLogs (or appropriate debug/transport option), and add
ignoreErrors with an array of known/noisy error strings; modify the existing
Sentry.init({ dsn: SENTRY_DSN }) invocation to include these keys and
conditionally-derived values so Sentry.init and SENTRY_DSN remain the unique
anchors to find the change.
- Line 6: The SENTRY_DSN constant is currently hardcoded in lib/sentry.ts;
update the code to read the DSN from process.env.SENTRY_DSN instead of the
hardcoded value, i.e., replace uses/imports of the hardcoded SENTRY_DSN with an
exported value that reads from process.env.SENTRY_DSN (and throws or logs a
clear error if missing) so sentry.server.config.ts imports the
environment-backed SENTRY_DSN; also ensure deployment and local development use
the SENTRY_DSN env var (add to .env.local for dev and keep it gitignored).
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 4fa3d89e-4d14-4359-8255-8cf353aac04e

📥 Commits

Reviewing files that changed from the base of the PR and between b310d1a and 082bfdc.

📒 Files selected for processing (4)
  • instrumentation-client.ts
  • lib/sentry.ts
  • sentry.edge.config.ts
  • sentry.server.config.ts

Comment thread lib/sentry.ts Outdated
Copy link
Copy Markdown
Contributor

@GabrielePicco GabrielePicco left a comment

Choose a reason for hiding this comment

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

LGTM!

@freelook freelook merged commit 5a33a04 into main May 15, 2026
4 checks 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