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:

MetricDescription
LCPLargest Contentful Paint - loading performance
FIDFirst Input Delay - interactivity
CLSCumulative Layout Shift - visual stability
TTFBTime to First Byte - server response time
DOM LoadDOMContentLoaded event time
Page LoadFull page load time

Configuration

import { init } from '@codmir/overseer';

init({
  dsn: 'https://your-project.codmir.com/overseer',
  apiKey: 'osk_...',
  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

  1. Track meaningful metrics - Focus on user-facing performance
  2. Use tags - Add context for filtering
  3. Set baselines - Establish performance budgets
  4. Monitor trends - Watch for regressions over time
  5. Correlate with errors - Slow performance often precedes errors