React Profiler bindings for uTestMe.

Quick start (no per-component wraps)

import { UTestMePerformanceProvider } from "@nacew/performance-react";

export function App() {
  return (
    <UTestMePerformanceProvider
      config={{
        projectKey: import.meta.env.VITE_LOGPULSE_PROJECT_KEY,
        endpoint: import.meta.env.VITE_LOGPULSE_ENDPOINT,
        environment: "production",
        autoInstrument: true, // default — page-level render commits
      }}
    >
      <Routes />
    </UTestMePerformanceProvider>
  );
}

That alone sends page timings (page:/dashboard) + web vitals. No UTestMeProfiler wraps needed.

Automatic per-component names (optional)

In vite.config.ts:

import react from "@vitejs/plugin-react";

export default {
  plugins: [
    react({
      jsxImportSource: "@nacew/performance-react",
    }),
  ],
  // Production: enable React Profiler (otherwise component timings are no-ops)
  resolve: {
    alias:
      process.env.NODE_ENV === "production"
        ? { "react-dom/client": "react-dom/profiling" }
        : undefined,
  },
};

What is reported (0.5): a component's render only when the component itself spent a millisecond or more on it (selfMs), so a small update deep in the tree is not reported again for every component above it. Per page, each component sends its first render and then at most one every 10 seconds, plus every render of 16 ms or more (up to 20 per component); a page sends at most 300. A slider, a clock or a polling list re-rendering on a timer is not a stream of events.

Manual wrap (optional)

Still available for hotspots:

<UTestMeProfiler id="CheckoutForm">
  <CheckoutForm />
</UTestMeProfiler>

Names from before 0.6

The SDK used to be called LogPulse. Every export still exists under its old LogPulse… name (initLogPulsePerformance, LogPulsePerformanceProvider, LogPulseProfiler, …) as the same function, component or type as the UTestMe… one, marked @deprecated. Existing apps keep working without changes and can switch names whenever convenient; mixing both is fine.