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

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

import { init } from '@codmir/overseer'; init({ dsn: 'https://your-project.codmir.com/overseer', service: 'my-app', environment: 'production', // Enable performance tracking enablePerformance: true, });