| name | observability-instrumentation |
| description | Use when wiring website frontend telemetry — Sentry browser init in pages/_app.tsx (@sentry/react), error boundaries, captureException with feature/route tags, the no-PII payload contract, sampling rates (tracesSampleRate / session replay), Next.js pages-router reportWebVitals (LCP/CLS/INP), and Apollo Client 4 error reporting. Triggers on "Sentry", "error boundary", "captureException", "reportWebVitals", "web-vitals", "telemetry", "tracesSampleRate", "session replay", "scrub PII". |
Observability Instrumentation
Scope
VilnaCRM's marketing website (Next.js 16 pages router, React 19, MUI 9 +
Emotion, Apollo Client 4, react-hook-form, i18next) is a client-rendered
frontend. Instrument client-side failures and real-user signals; this skill
owns the wiring. Measuring and diagnosing — Lighthouse budgets, Core Web
Vitals analysis — belong to the frontend-performance-accessibility skill;
route audit results there.
There is no backend service in this repo to instrument. @sentry/node ships as
a dependency for the Apollo Server 5 local mock / Next.js server runtime, but it
is not currently wired. Do not scatter server SDK calls into client code; the
active telemetry surface is @sentry/react.
Current wiring (verified)
pages/_app.tsx already calls Sentry.init() from @sentry/react with
dsn: process.env.SENTRY_DSN_KEY, browserTracingIntegration() and
replayIntegration(), and these sampling rates:
tracesSampleRate: 1.0replaysSessionSampleRate: 0.1replaysOnErrorSampleRate: 1.0
Google Analytics is wired separately via @next/third-parties. There is no
web-vitals npm package and no error boundary yet — add those through Next.js
built-ins and (below), never a new dependency.
