hydrate-beer
v2.0.3
Published
Zero-config performance monitoring for React and Next.js with PostHog
Maintainers
akshatmehtaReadme
🍺 hydrate-beer
Zero-config performance monitoring SDK for React and Next.js applications with PostHog analytics integration.
Installation
npm install hydrate-beerOr auto-install with CLI:
npx hydrate-beer-cli initQuick Start
Next.js App Router
// app/layout.tsx
'use client';
import { HydrateBeerProvider } from "hydrate-beer/react";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<HydrateBeerProvider
config={{
posthogApiKey: process.env.NEXT_PUBLIC_HYDRATE_BEER_POSTHOG_API_KEY!,
}}
>
{children}
</HydrateBeerProvider>
</body>
</html>
);
}Next.js Pages Router
// pages/_app.tsx
import { HydrateBeerProvider } from "hydrate-beer/react";
import type { AppProps } from "next/app";
export default function App({ Component, pageProps }: AppProps) {
return (
<HydrateBeerProvider
config={{
posthogApiKey: process.env.NEXT_PUBLIC_HYDRATE_BEER_POSTHOG_API_KEY!,
}}
>
<Component {...pageProps} />
</HydrateBeerProvider>
);
}React (Vite, CRA, etc.)
// src/main.tsx
import { HydrateBeerProvider } from "hydrate-beer/react";
import { createRoot } from "react-dom/client";
import App from "./App";
createRoot(document.getElementById("root")!).render(
<HydrateBeerProvider
config={{
posthogApiKey: import.meta.env.VITE_HYDRATE_BEER_POSTHOG_API_KEY,
}}
>
<App />
</HydrateBeerProvider>
);Track Custom Events
'use client';
import { useHydrateBeer } from "hydrate-beer/react";
export default function MyComponent() {
const { trackCustomEvent, trackError } = useHydrateBeer();
const handleClick = () => {
trackCustomEvent("button_clicked", {
buttonName: "submit",
timestamp: Date.now(),
});
};
const handleError = (error: Error) => {
trackError(error, {
component: "MyComponent",
action: "submit",
});
};
return <button onClick={handleClick}>Click Me</button>;
}Component Profiling (Optional)
import { withHydrateBeer } from 'hydrate-beer-sdk';
function MyComponent() {
return <div>Hello World</div>;
}
export default withHydrateBeer(MyComponent, 'MyComponent');Configuration Options
interface HydrateBeerConfig {
projectId: string; // Required: Your project ID
sampleRate?: number; // Default: 1.0 (100%)
flushInterval?: number; // Default: 5000ms
batchSize?: number; // Default: 50 events
slowRenderThreshold?: number; // Default: 16ms
}What Gets Tracked Automatically
- ⚡ Hydration timing - Start, end, and duration
- 🎨 Component renders - Duration, phase, slow renders
- 🚀 Route transitions - Navigation timing
- 📊 Page metrics - TTI, TTFB, DOM events
Privacy-First
HydrateBeer never collects:
- ❌ User identity or personal information
- ❌ Component props or state values
- ❌ Form inputs or user data
- ❌ Cookies or authentication tokens
Data Flow
Your App (SDK) → Tinybird Events API → Analytics Pipes → Monitor DashboardCLI Commands
Initialize and monitor with the CLI:
npx hydrate-beer init # Setup project
npx hydrate-beer setup-tinybird # Deploy backend
npx hydrate-beer monitor # View dashboardLinks
- CLI Package: hydrate-beer
- Documentation: hydrate.beer
- GitHub: nerkoux/hydratebeer
License
MIT
Privacy
- No PII collected
- No props/state captured
- Only performance metrics: durations, names, timestamps
License
MIT