hydrate-beer-cli

v2.0.2

Published

21 days ago

Zero-config performance monitoring CLI for React and Next.js with PostHog

0High
0Medium
0Low

akshatmehta

react nextjs performance monitoring hydration cli pm2 devtools analytics observability

🍺 HydrateBeer CLI

Command-line tool for zero-config performance monitoring with PostHog analytics integration.

Installation

npx hydrate-beer-cli init

No need to install globally - use with npx.

Commands

`init`

Initialize HydrateBeer in your project:

npx hydrate-beer-cli init

This will:

Auto-generate a unique project ID
Prompt for PostHog API key
Detect your project type (React/Next.js)
Create .env.local with configuration
Auto-install hydrate-beer
Update .gitignore

Quick Start

Step 1: Initialize

cd my-next-app
npx hydrate-beer-cli init

You'll be prompted for:

PostHog API Key - Get from posthog.com/settings/project
PostHog Host (optional) - Default: https://us.posthog.com

Step 2: Add Provider to Your App

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>
  );
}

Configuration

After running init, you'll have:

Environment Variables

# .env.local
NEXT_PUBLIC_HYDRATE_BEER_PROJECT_ID=proj_abc123...
NEXT_PUBLIC_HYDRATE_BEER_POSTHOG_API_KEY=phc_...
NEXT_PUBLIC_HYDRATE_BEER_POSTHOG_HOST=https://us.posthog.com

Configuration Options

The SDK accepts these configuration options:

{
  projectId: string;           // Auto-generated unique ID
  posthogApiKey: string;       // Your PostHog API key
  posthogHost?: string;        // PostHog instance URL (default: https://us.posthog.com)
  sampleRate?: number;         // 0.0-1.0 (default: 1.0)
  slowRenderThreshold?: number; // ms (default: 16)
  flushInterval?: number;      // ms (default: 5000)
  batchSize?: number;          // events (default: 50)
}

Data Flow

Your App (SDK) → PostHog Events API → PostHog Analytics → Insights Dashboard

Getting PostHog API Key

Sign up at posthog.com
Go to Project Settings
Copy your Project API Key
Paste when prompted by init command

Troubleshooting

"Configuration not found"

Run npx hydrate-beer-cli init first.

"PostHog API error"

Check your API key is valid
Verify PostHog host URL is correct
Ensure internet connection

Package installation fails

Make sure you have npm or yarn installed and try again.

What Gets Tracked

⚡ Hydration timing
🎨 Component render performance
🚀 Route navigation timing
📊 Web Vitals (TTI, TTFB, etc.)
🔍 Custom events and metrics

License

MIT