PerfTracer

PerfTracer is a lightweight React performance monitoring library. It helps you effortlessly measure and log:

• Core Web Vitals (LCP, FID, CLS, FCP, TTFB)
• Component mount and unmount durations
• API call performance for both fetch and axios
• Use it to gain real-time insights into how your React application performs in production, improve user experience, and debug bottlenecks quickly.

Features

• Zero-config setup with React Context Provider
• Automatic Web Vitals tracking
• API request timing out-of-the-box
• Easy logging to console, external telemetry, or custom handlers

📖 How to Use PerfTracer

🟢 1️⃣ Install

npm install perf-tracer

or with Yarn:

yarn add perf-tracer

🟢 2️⃣ Wrap Your App in PerfProvider

In your App.tsx (or App.jsx):

import React from "react";
import { PerfProvider } from "perf-tracer";

function App() {
  return (
    <PerfProvider enableLogging={true}>
      {/* your app components */}
    </PerfProvider>
  );
}

export default App;

✅ This will:

• Start tracking Web Vitals automatically
• Log API call performance for fetch and axios
• Log results to the console by default

🟢 3️⃣ Track Component Mount/Unmount Performance

You can track the performance of any component with usePerfMonitor:

import React from "react";
import { usePerfMonitor } from "perf-tracer";

function ExampleComponent() {
  usePerfMonitor("ExampleComponent");

  return <div>Hello World</div>;
}

✅ This logs the mount/unmount duration whenever the component mounts or unmounts.

🟢 4️⃣ View the Logs

Open your browser console—you’ll see entries like:

[WebVitals] FCP: 1100 ms
[WebVitals] LCP: 1450 ms
[PerfMonitor] ExampleComponent unmounted after 150 ms
{ type: 'api-call', url: '/api/users', method: 'GET', duration: 80, status: 200 }

🟢 5️⃣ Customize Logging

You can customize the logging behavior by replacing console.log inside the PerfProvider source code or extending it to send metrics to your analytics backend.

💡 Example: Using with Axios

If your app uses Axios, PerfTracer automatically measures each request:

import axios from "axios";

// This will be logged automatically by PerfTracer
axios.get("/api/products").then(response => {
  console.log(response.data);
});

✅ Summary

PerfTracer gives you:

• Web Vitals measurements
• API request timings
• Component lifecycle timings
• Easy console logs or custom handlers