Automatic error capture and reporting
Error Tracking
Overseer automatically captures and reports errors from your application.
Automatic Capture
Once initialized, Overseer automatically captures:
- Unhandled Errors -
window.onerrorevents - Promise Rejections -
unhandledrejectionevents - Console Errors -
console.errorcalls (optional)
import { init } from '@codmir/overseer';
init({
dsn: 'https://your-project.codmir.com/overseer',
service: 'my-app',
environment: 'production',
});
// This error is automatically captured
throw new Error('Something went wrong');Manual Capture
captureException
Capture errors in try/catch blocks:
import { captureException } from '@codmir/overseer';
async function fetchData() {
try {
const response = await fetch('/api/data');
return response.json();
} catch (error) {
captureException(error, {
level: 'error',
tags: { feature: 'data-fetch' },
extra: { endpoint: '/api/data' },
});
throw error;
}
}captureMessage
Log important events:
import { captureMessage } from '@codmir/overseer';
// Info level
captureMessage('User completed onboarding', 'info');
// Warning level
captureMessage('Rate limit approaching', 'warning');
// Error level
captureMessage('Payment gateway timeout', 'error');Error Context
Tags
Add indexed tags for filtering:
captureException(error, {
tags: {
feature: 'checkout',
region: 'us-east',
tier: 'enterprise',
},
});Extra Data
Add additional context:
captureException(error, {
extra: {
orderId: '12345',
cartTotal: 99.99,
itemCount: 3,
user: { id: user.id, plan: user.plan },
},
});Severity Levels
| Level | Use Case |
|---|---|
fatal | App crash, unrecoverable error |
error | Error that needs fixing |
warning | Potential issue to monitor |
info | Important event |
debug | Development debugging |
Error Grouping
Overseer automatically groups similar errors using fingerprinting:
- Same error message pattern
- Same stack trace location
- Same error type
Custom Fingerprinting
Override automatic grouping:
captureException(error, {
fingerprint: ['custom-fingerprint', user.id],
});Error Deduplication
Duplicate errors are automatically tracked:
- First occurrence creates an issue
- Subsequent occurrences increment the count
- UI shows occurrence count and affected users
React Error Boundaries
import { captureException } from '@codmir/overseer';
class ErrorBoundary extends React.Component {
componentDidCatch(error, errorInfo) {
captureException(error, {
extra: { componentStack: errorInfo.componentStack },
});
}
render() {
if (this.state.hasError) {
return <ErrorFallback />;
}
return this.props.children;
}
}Network Error Tracking
Track API errors:
import { captureException, addBreadcrumb } from '@codmir/overseer';
async function apiCall(endpoint: string) {
addBreadcrumb({
type: 'http',
category: 'api',
message: `Calling ${endpoint}`,
level: 'info',
});
const response = await fetch(endpoint);
if (!response.ok) {
const error = new Error(`API Error: ${response.status}`);
captureException(error, {
tags: { endpoint, status: String(response.status) },
});
throw error;
}
return response.json();
}Filtering Errors
Skip noisy errors:
init({
beforeSend(event) {
// Skip known framework issues
const skipPatterns = [
'ResizeObserver loop',
'ChunkLoadError',
'Loading chunk',
];
if (skipPatterns.some(p => event.message?.includes(p))) {
return null;
}
return event;
},
});