Getting Started

Hyperlook is an error tracking and monitoring tool designed for fast moving generation builders and developers leveraging the javascript stack.

Following the step 1 and step 2 will automatically get the following data:

Feeling lazy? Ask Cursor to do it with this prompt:

  Please instrument my repo using the hyperlook sdk. Use context7 or the docs on https://github.com/DrDroidLab/telemetry-sdk and https://www.npmjs.com/package/@hyperlook/telemetry-sdk as reference.

📦 Installation

npm install @hyperlook/telemetry-sdk

🚀 Quick Start - Next.js

Copy and paste these exact files:

1. Create components/TelemetryProvider.tsx

"use client";

import { useEffect } from "react";
import { initTelemetry } from "@hyperlook/telemetry-sdk";

export default function TelemetryProvider() {
  useEffect(() => {
    const telemetry = initTelemetry({
      hyperlookApiKey: "your-api-key", // Replace with your actual API key
    });

    return () => {
      telemetry.destroy();
    };
  }, []);

  return null;
}

2. Update app/layout.tsx

import TelemetryProvider from "@/components/TelemetryProvider";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <TelemetryProvider />
        {children}
      </body>
    </html>
  );
}

Optional: Add User Identification

In any component where you have user data:

"use client";

import { useEffect } from "react";
import { initTelemetry } from "@hyperlook/telemetry-sdk";

export default function UserProfile({ user }) {
  useEffect(() => {
    const telemetry = initTelemetry({
      hyperlookApiKey: "your-api-key",
    });

    if (user) {
      telemetry.identify(user.id, {
        name: user.name,
        email: user.email,
      });
    }

    return () => {
      telemetry.destroy();
    };
  }, [user]);

  return <div>{/* Your component content */}</div>;
}

If you're using any other React Framework, follow these instructions.