Sentry Client Monitoring Skill

Purpose

This skill enforces the project client-side/front-end Sentry monitoring conventions automatically during error tracking implementation. It ensures consistent patterns for error boundaries, route-level error pages, user interaction tracking, and client component error handling.

Note: For server-side Sentry patterns (server actions, facades, middleware), use the sentry-server skill instead.

Activation

This skill activates when working on client-side/front-end code:

•Creating or modifying client components with error handling
•Implementing error boundaries (src/components/ui/error-boundary/)
•Creating route-level error pages (error.tsx files)
•Working on the global error handler (global-error.tsx)
•Adding user interaction tracking/breadcrumbs in client components
•Working with client instrumentation (src/instrumentation-client.ts)
•Components with 'use client' directive that need error tracking

Workflow

•Detect client-side Sentry work (imports from @sentry/nextjs in client files)
•Load references/Sentry-Client-Conventions.md
•Generate/modify code following all conventions
•Scan for violations of Sentry patterns
•Auto-fix all violations (no permission needed)
•Report fixes applied

Key Patterns

Error Boundaries

•Use class-based ErrorBoundary component for component-level errors
•Capture exceptions in componentDidCatch with full context
•Log user actions (retry, continue) with captureMessage

Route-Level Error Pages

•ALL error.tsx files MUST have Sentry integration
•Use captureException in useEffect with proper context and tags
•Include digest, route name, and feature area in context

Global Error Handler

•global-error.tsx captures fatal errors with level: 'fatal'
•Include error digest and route context

Client Components

•Add breadcrumbs before significant user interactions
•Track form submissions, dialog opens, and key actions
•Capture exceptions for failed client-side operations

Constants (Always Use)

Constant	Import Path	Purpose
`SENTRY_CONTEXTS`	`@/lib/constants/sentry`	Context names for `setContext`
`SENTRY_BREADCRUMB_CATEGORIES`	`@/lib/constants/sentry`	Breadcrumb category values
`SENTRY_LEVELS`	`@/lib/constants/sentry`	Breadcrumb level values
`SENTRY_TAGS`	`@/lib/constants/sentry`	Tag names for tags

Usage Pattern Reference

Use Case	Primary Method	Level
Route error page	`Sentry.captureException`	`error`
Global error	`Sentry.captureException`	`fatal`
Error boundary catch	`Sentry.captureException`	`error`
Error boundary reset	`Sentry.captureMessage`	`info`
User interaction	`Sentry.addBreadcrumb`	`info`
Form submission start	`Sentry.addBreadcrumb`	`info`
Client action failure	`Sentry.captureException`	`error`

File Patterns

This skill applies to:

•src/app/**/error.tsx
•src/app/global-error.tsx
•src/components/ui/error-boundary/**/*.tsx
•src/instrumentation-client.ts
•Client components ('use client') with Sentry imports
•src/app/**/components/*-client.tsx
•src/components/feature/**/*.tsx with error handling

References

•references/Sentry-Client-Conventions.md - Complete client-side Sentry monitoring conventions