Core Web Vitals

import { AbrovaTrace } from '@abrova-trace/nextjs-sdk';

AbrovaTrace.init({
  apiKey: 'ab_live_your_api_key',
  environment: 'production',
  release: '1.0.0',
});

// Enable Web Vitals tracking
// Automatically captures LCP, INP, CLS, TTFB, FCP
AbrovaTrace.getInstance()?.enableWebVitals();

// app/providers.tsx
'use client';

import { useEffect } from 'react';
import { AbrovaTrace } from '@abrova-trace/nextjs-sdk';

export function Providers({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    AbrovaTrace.init({
      apiKey: process.env.NEXT_PUBLIC_ABROVA_TRACE_KEY!,
      environment: process.env.NODE_ENV,
    });

    // Enable Web Vitals tracking
    AbrovaTrace.getInstance()?.enableWebVitals();

    // Enable HTTP performance tracking
    AbrovaTrace.getInstance()?.enablePerformanceTracking();

    return () => AbrovaTrace.getInstance()?.close();
  }, []);

  return <>{children}</>;
}

// pages/_app.tsx
import { useEffect } from 'react';
import { AbrovaTrace } from '@abrova-trace/nextjs-sdk';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    AbrovaTrace.init({
      apiKey: process.env.NEXT_PUBLIC_ABROVA_TRACE_KEY!,
      environment: process.env.NODE_ENV,
    });

    AbrovaTrace.getInstance()?.enableWebVitals();
    AbrovaTrace.getInstance()?.enablePerformanceTracking();

    return () => AbrovaTrace.getInstance()?.close();
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

// Report all metric changes (not just final values)
AbrovaTrace.getInstance()?.enableWebVitals({
  reportAllChanges: true,
});

// Custom batch interval (default: 5000ms): vitals are sent this long after
// the last metric arrives, and also when the page is hidden or unloaded
AbrovaTrace.getInstance()?.enableWebVitals({
  batchInterval: 10000, // 10 seconds
});

interface WebVitalsData {
  pageUrl: string;           // Full page URL
  pageRoute?: string;        // Route path (e.g., /dashboard)

  // Core Web Vitals
  lcpMs?: number;            // Largest Contentful Paint
  cls?: number;              // Cumulative Layout Shift
  inpMs?: number;            // Interaction to Next Paint
  ttfbMs?: number;           // Time to First Byte
  fcpMs?: number;            // First Contentful Paint

  // Context
  deviceType?: string;       // 'mobile' | 'tablet' | 'desktop'
  connectionType?: string;   // from Navigator API (4g, 3g, etc.)
  sessionId?: string;        // Per page-load ID from the Web Vitals tracker (not getSessionId())
  platform: 'nextjs';
  environment?: string;      // production, staging
  releaseVersion?: string;   // App version
}