Introduction
Zero-config performance monitoring for React and Next.js applications
Welcome to HydrateBeer
HydrateBeer is a lightweight, privacy-first performance monitoring SDK that tracks hydration timing, component renders, and navigation performance in your React and Next.js applications — powered by PostHog.
What is HydrateBeer?
HydrateBeer helps you understand your application's performance by automatically tracking:
- Hydration Performance - Measure how long it takes your app to become interactive
- Component Renders - Track render durations and identify slow components
- Route Transitions - Monitor navigation timing between pages
- Web Vitals - Collect TTI, TTFB, and other core metrics
- Error Tracking - Automatically capture and report errors
- Session Analytics - Track user sessions and engagement
Key Features
- Zero Configuration - One command to get started
- PostHog Integration - Leverage PostHog's powerful analytics platform
- Framework Support - Works with React 18+, Next.js App Router & Pages Router
- Lightweight - Less than 5KB gzipped
- Privacy First - No PII, props, or state captured
- Real-time Analytics - View metrics instantly in PostHog dashboard
- Production Ready - Silent failures, never crashes your app
- Built-in Dashboards - Pre-configured insights and visualizations
Quick Start
1. Initialize your project
npx hydrate-beer-cli initThis will:
- Prompt you to select your PostHog instance (US, EU, or Self-hosted)
- Configure your PostHog API key
- Install the SDK automatically
- Create configuration files
2. Add the Provider
'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>
);
}3. View Your Analytics
Visit your PostHog dashboard to see:
- Real-time performance metrics
- Component render timings
- Navigation patterns
- Error tracking
- Session analytics
All HydrateBeer events are prefixed with hydratebeer_ in PostHog for easy filtering.
How It Works
Your App (SDK) → PostHog Batch API → PostHog Analytics → Dashboards & Insights- SDK collects performance metrics in your React/Next.js app
- PostHog processes and stores data in real-time
- Dashboards provide instant visibility into performance
- Insights help you optimize your application
Why HydrateBeer + PostHog?
- Generous Free Tier - Up to 1M events/month free
- Private - Your data stays secure in PostHog
- Simple - No complex setup or schema management
- Focused - Built specifically for React performance monitoring
- Powerful - Leverage PostHog's analytics capabilities
- No Maintenance - No backend infrastructure to manage
What Gets Tracked?
HydrateBeer automatically captures:
- Page Views - Every route navigation
- Navigation Timing - Time between route transitions
- Component Performance - Render durations for tracked components
- Errors - Unhandled exceptions with stack traces
- Sessions - User session duration and engagement
- Custom Events - Your own business metrics
All data is sent to PostHog with structured properties for easy analysis.
Next Steps
Example Project
View Demo Application - Complete Next.js example with HydrateBeer integration
Support the Project
If you want to support this project by donating, you can do so using any of the following methods. Thank you very much in advance.
Author
Maintained and developed by Akshat.