Track Core Web Vitals and custom metrics
Performance Monitoring
Overseer automatically tracks Core Web Vitals and allows custom performance metrics.
Automatic Tracking
When enabled, Overseer tracks:
| Metric | Description |
|---|---|
| LCP | Largest Contentful Paint - loading performance |
| FID | First Input Delay - interactivity |
| CLS | Cumulative Layout Shift - visual stability |
| TTFB | Time to First Byte - server response time |
| DOM Load | DOMContentLoaded event time |
| Page Load | Full page load time |
Configuration
import { init } from '@codmir/overseer';
init({
dsn: 'https://your-project.codmir.com/overseer',
service: 'my-app',
environment: 'production',
// Enable performance tracking
enablePerformance: true,
});Custom Metrics
trackMetric
Track any numeric value:
import { trackMetric } from '@codmir/overseer';
// Track a duration
trackMetric('api.latency', 150, 'ms', { endpoint: '/api/users' });
// Track a count
trackMetric('cart.items', 5, 'count', { page: 'checkout' });
// Track a size
trackMetric('bundle.size', 250, 'kb', { chunk: 'main' });timeOperation
Automatically time async operations:
import { timeOperation } from '@codmir/overseer';
// Time a database query
const users = await timeOperation(
'db.query.users',
() => prisma.user.findMany(),
{ table: 'users' }
);
// Time an API call
const data = await timeOperation(
'api.external.weather',
() => fetch('https://api.weather.com/forecast'),
{ service: 'weather' }
);React Performance
Component Render Time
import { trackMetric } from '@codmir/overseer';
import { useEffect, useRef } from 'react';
function TrackedComponent({ children }) {
const startTime = useRef(performance.now());
useEffect(() => {
const renderTime = performance.now() - startTime.current;
trackMetric('component.render', renderTime, 'ms', {
component: 'TrackedComponent',
});
}, []);
return <>{children}</>;
}Route Change Time
// Next.js App Router
'use client';
import { usePathname } from 'next/navigation';
import { trackMetric } from '@codmir/overseer';
import { useEffect, useRef } from 'react';
export function RouteTracker() {
const pathname = usePathname();
const startTime = useRef<number | null>(null);
useEffect(() => {
if (startTime.current) {
const duration = performance.now() - startTime.current;
trackMetric('route.change', duration, 'ms', { to: pathname });
}
startTime.current = performance.now();
}, [pathname]);
return null;
}API Performance
Track API call performance:
import { timeOperation, addBreadcrumb } from '@codmir/overseer';
async function apiCall(endpoint: string, options?: RequestInit) {
addBreadcrumb({
type: 'http',
category: 'api.start',
message: `${options?.method || 'GET'} ${endpoint}`,
level: 'info',
});
return timeOperation(
`api.${endpoint.replace(/\//g, '.')}`,
async () => {
const response = await fetch(endpoint, options);
return response.json();
},
{ method: options?.method || 'GET' }
);
}Dashboard
View performance metrics in the Codmir dashboard:
- Overview - Aggregate metrics across all users
- Trends - Track performance over time
- Breakdown - Filter by page, user, device
- Alerts - Set thresholds for degradation alerts
Best Practices
- Track meaningful metrics - Focus on user-facing performance
- Use tags - Add context for filtering
- Set baselines - Establish performance budgets
- Monitor trends - Watch for regressions over time
- Correlate with errors - Slow performance often precedes errors