React Profiler bindings for LogPulse.

Quick start (no per-component wraps)

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

export function App() {
  return (
    <LogPulsePerformanceProvider
      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 />
    </LogPulsePerformanceProvider>
  );
}

That alone sends page timings (page:/dashboard) + web vitals. No LogPulseProfiler 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,
  },
};

Manual wrap (optional)

Still available for hotspots:

<LogPulseProfiler id="CheckoutForm">
  <CheckoutForm />
</LogPulseProfiler>