monitoringlisted
Install: claude install-skill djnsty23/claude-auto-dev
# Monitoring Skill
## Quick Commands
| Say | Action |
|-----|--------|
| `add logging` | Set up structured logging |
| `add error tracking` | Integrate Sentry/error boundary |
| `add analytics` | Add Vercel Analytics |
## Structured Logging
```typescript
// lib/logger.ts
type LogLevel = 'debug' | 'info' | 'warn' | 'error';
interface LogContext {
userId?: string;
action?: string;
[key: string]: unknown;
}
export function log(level: LogLevel, message: string, context?: LogContext) {
const entry = {
timestamp: new Date().toISOString(),
level,
message,
...context
};
if (process.env.NODE_ENV === 'production') {
console[level](JSON.stringify(entry));
} else {
console[level](message, context);
}
}
```
## Error Boundary
```tsx
// components/error-boundary.tsx
'use client';
import { Component, ReactNode } from 'react';
interface Props {
children: ReactNode;
fallback?: ReactNode;
}
interface State {
hasError: boolean;
error?: Error;
}
export class ErrorBoundary extends Component<Props, State> {
state: State = { hasError: false };
static getDerivedStateFromError(error: Error): State {
return { hasError: true, error };
}
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
// Log to external service
log('error', 'React error boundary caught error', {
error: error.message,
stack: error.stack,
componentStack: errorInfo.componentStack
});
}
render() {
if (this.state.has