[Gap-Audit] 044 Error Handler Integrations: Sentry/LogRocket integration + PII scrubbing + session replay

[TortoiseWolfe]

Summary

Basic ErrorBoundary exists. Real error monitoring (Sentry/LogRocket) integration is not started. Depends on feature 019 (consent framework).

What's shipped

• src/components/ErrorBoundary.tsx (82 LOC) — catches errors, renders fallback
• Toast notification system
• ConsentContext (consent framework)

Gaps

• Sentry/LogRocket integration missing
• PII scrubbing not implemented
• Breadcrumbs not implemented
• Session replay missing entirely
• Consent-gated initialization not wired

Reference

• Spec: features/code-quality/044-error-handler-integrations/spec.md
• Depends on: 019-google-analytics (uses same consent gating pattern)

[TortoiseWolfe]

Next-session primer

Goal: integrate Sentry or LogRocket for production error monitoring with PII scrubbing, breadcrumbs, session replay; consent-gated initialization.

Effort: large (~1-2 days)
Blocked on: external — needs Sentry or LogRocket account; needs design choice between the two

What's already shipped

• src/components/ErrorBoundary.tsx (82 LOC) — catches errors, renders fallback (no monitoring integration)
• Toast notification system
• ConsentContext (the consent framework dependency)

Design choice: Sentry vs LogRocket

Aspect	Sentry	LogRocket
Free tier	5K errors/mo	1K sessions/mo
Session replay	Yes (DOM snapshots)	Yes (heatmaps, video-like replay)
PII scrubbing	Built-in regex + manual hooks	Built-in + manual hooks
Bundle size	~25KB gzipped	~80KB gzipped
Recommendation	Sentry for a template (cheaper, smaller, more focused on errors)

Implementation sketch (Sentry path)

A. Install + init

// src/lib/monitoring/sentry.ts (new)
import * as Sentry from '@sentry/nextjs';
import { canUseCookies } from '@/utils/consent';

export function initMonitoring() {
  if (!canUseCookies('analytics')) return; // consent-gated
  if (!process.env.NEXT_PUBLIC_SENTRY_DSN) return; // per-fork config
  Sentry.init({
    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
    integrations: [Sentry.replayIntegration({ maskAllText: true })],
    tracesSampleRate: 0.1,
    replaysSessionSampleRate: 0.1,
    beforeSend(event) {
      // PII scrubbing — strip emails, IPs, etc. from event.user/event.contexts
      return scrubPii(event);
    },
  });
}

B. Wire to ErrorBoundary

• Modify src/components/ErrorBoundary.tsx componentDidCatch to call Sentry.captureException(error, { contexts: { react: { componentStack } } })

C. Wire to consent

• src/contexts/ConsentContext.tsx — when user grants analytics consent, call initMonitoring()
• When revoked: Sentry.close() and clear breadcrumbs

Files

• src/lib/monitoring/sentry.ts (new)
• src/lib/monitoring/pii-scrub.ts (new) — regex + key-list scrubber, similar shape to the audit-logger stripCredentials from batch 2
• src/components/ErrorBoundary.tsx — add capture call
• src/contexts/ConsentContext.tsx — wire init/close
• next.config.js — Sentry webpack plugin for source maps
• .env.example — NEXT_PUBLIC_SENTRY_DSN placeholder

Verification

1. Set NEXT_PUBLIC_SENTRY_DSN, accept consent, throw an error in DevTools console
2. Sentry dashboard shows the error with stack trace
3. Verify PII scrubbing: include user.email = 'foo@bar.com', confirm dashboard shows [email-redacted]
4. Revoke consent — subsequent errors should NOT be reported
5. Replay capture is sampled at 10%; verify a session shows up after some clicks

Watch-outs

• Per CLAUDE.md, this is a static export project. Sentry's Next.js integration assumes server runtime for some features (server-side error capture). Use the client-side-only mode.
• Source maps to Sentry require build-time config; document the per-fork setup in docs/
• LogRocket is the alternative if you want session video; bigger bundle hit