Sentry: Observability & Monitoring
Configuration for Sentry across server, edge, and browser with source maps and monitoring tunnel
Sentry: Observability & Monitoring
Sentry is the backbone of Odys' observability strategy, providing real-time error tracking, performance monitoring, and session replay across all execution environments. This setup ensures that issues affecting professionals managing appointments or clients booking sessions are detected and diagnosable quickly—critical for maintaining trust in a service where timing and reliability directly impact real-world interactions.
Overview
Odys leverages Sentry in a multi-layered configuration spanning the Next.js server, edge runtime, and browser. The instrumentation is split across src/instrumentation.ts (server/edge) and src/instrumentation-client.ts (browser), aligning with Next.js' hybrid architecture. Source map uploads are automated via @sentry/nextjs in next.config.ts, ensuring stack traces are deobfuscated in production. A tunnel at /monitoring reroutes browser events to avoid ad-blocker interference, while error boundaries in global-error.tsx guarantee all client-side crashes are captured.
Browser & Edge Instrumentation
The client-side Sentry configuration in src/instrumentation-client.ts enables comprehensive monitoring: error capture, performance tracing (tracesSampleRate: 1), and session replay (replaysSessionSampleRate: 0.1). Replay integration allows visual debugging of user sessions, especially valuable when a client fails to book an appointment or a professional can't load their calendar. The beforeSend filter suppresses known noise like "Object Not Found Matching" errors from browser extensions, reducing false positives.
On the server and edge runtimes, src/instrumentation.ts dynamically imports environment-specific configs, ensuring minimal bundle impact. The onRequestError hook captures all server-side exceptions, while onRouterTransitionStart tracks navigation performance in the client.
Build & Source Map Handling
Source maps are automatically uploaded during build via @sentry/nextjs integration in next.config.ts. The widenClientFileUpload: true option includes more files in the upload, improving stack trace accuracy. This is essential for debugging minified production code, especially in complex flows like Stripe webhook handling or cron-triggered reminders.
The /monitoring tunnel, configured via tunnelRoute, proxies client events through a Next.js rewrite. This bypasses ad-blockers that commonly block *.sentry.io domains, ensuring reliable error ingestion without requiring infrastructure changes.
Design decisions
The split instrumentation model follows Next.js best practices, isolating server/edge logic from browser code. Using @sentry/replayIntegration() selectively samples sessions (10%) to balance insight with cost and privacy. The sendDefaultPii: true setting enables user identification in errors—justified by Odys' professional-user context where support often requires linking issues to specific accounts. The tunnel route trades slight server overhead for guaranteed deliverability, a necessary compromise given the high rate of ad-blocker usage.
Potential improvements
-
Add
tracesSamplerin client config (src/instrumentation-client.ts): CurrentlytracesSampleRate: 1captures 100% of traces in production. Replace with atracesSamplerfunction to reduce volume based on route or user role, lowering costs without losing critical path visibility. -
Filter more noise in
beforeSend(src/instrumentation-client.ts): Extend the filter to suppress known third-party errors (e.g., from WhatsApp Webhooks or Stripe Elements) by checkingevent.tagsorevent.exception.values[0].type, reducing alert fatigue. -
Centralize DSN and sampling rates in environment variables (
src/instrumentation-client.ts): Hardcoded values likereplaysSessionSampleRate: 0.1limit runtime flexibility. Move these toNEXT_PUBLIC_SENTRY_*variables to allow tuning without rebuilds.
References
src/instrumentation.ts: Server/edge Sentry setupsrc/instrumentation-client.ts: Browser initialization and hooksnext.config.ts: Source maps, tunnel, and webpack integrationsrc/app/global-error.tsx: Client error boundary integration
Observability Overview: Sentry and PostHog
A deep dive into Odys's observability stack, covering error tracking with Sentry across three runtimes and product analytics with PostHog, including design choices and improvement opportunities.
PostHog: Observability and Analytics
Deep dive into Odys's PostHog integration, covering cookie-gated initialization, manual pageview tracking, and user identification for comprehensive analytics.