@rkt-labs/observability NPM

@rkt-labs/observability

A comprehensive TypeScript library for handling analytics, status monitoring, and observability in Next.js applications.

Installation

npm install @rkt-labs/observability

Features

🔍 Multiple Analytics Providers (PostHog, Google Analytics, Vercel)
📊 Status Monitoring with BetterStack integration
⚛️ React Components for easy implementation
📱 Full TypeScript support
🔒 Server-side and Client-side components

Usage

Analytics Setup

PostHog Analytics

import { PostHogProvider } from '@rkt-labs/observability/analytics/posthog/client';

export default function App({ children }) {
  return (
    <PostHogProvider>
      {children}
    </PostHogProvider>
  );
}

Make sure to set these environment variables:

NEXT_PUBLIC_POSTHOG_KEY=your_posthog_key
NEXT_PUBLIC_POSTHOG_HOST=your_posthog_host

Google Analytics

import { GoogleAnalytics } from '@rkt-labs/observability/analytics/google';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <GoogleAnalytics />
      </body>
    </html>
  );
}

Status Monitoring

The Status component integrates with BetterStack for real-time system status monitoring:

import { Status } from '@rkt-labs/observability/status';

export default function StatusIndicator() {
  return (
    <Status 
      apiKey={process.env.BETTERSTACK_API_KEY} 
      url="your-status-page-url" 
    />
  );
}

The Status component provides:

Real-time status monitoring
Visual status indicators
Automatic status updates
Link to status page

Status indicators:

🟢 All systems normal (100% uptime)
🟡 Partial outage (< 100% uptime)
🔴 Degraded performance (0% uptime)
⚫ Unable to fetch status

API Reference

Status Component

type StatusProps = {
  apiKey: string;    // BetterStack API key
  url: string;       // Status page URL
};

PostHog Provider

type PostHogProviderProps = {
  children: ReactNode;
};

Configuration

TypeScript Configuration

Ensure your tsconfig.json includes these essential configurations:

{
  "compilerOptions": {
    "jsx": "preserve",
    "moduleResolution": "bundler",
    "strict": true,
    "isolatedModules": true
  }
}

Environment Variables

Required environment variables:

NEXT_PUBLIC_POSTHOG_KEY=your_posthog_key
NEXT_PUBLIC_POSTHOG_HOST=your_posthog_host
BETTERSTACK_API_KEY=your_betterstack_api_key

Requirements

Next.js 13+ (App Router)
React 18+
TypeScript 4.5+

License

MIT

Contributing

We welcome contributions! Please feel free to submit a Pull Request.

Troubleshooting

TypeScript Compilation Issues

If you encounter TypeScript compilation errors, ensure:

Your project's tsconfig.json includes:

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

Add package to your TypeScript include paths:

{
  "paths": {
    "@rkt-labs/observability/*": ["./node_modules/@rkt-labs/observability/dist/*"]
  }
}

If using Next.js, add to your next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@rkt-labs/observability']
}

module.exports = nextConfig

@logtail/next @next/third-parties @sentry/nextjs @vercel/analytics posthog-js posthog-node server-only

11 months ago

11 months ago

11 months ago

11 months ago