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:

  Add Hyperlook telemetry to my repo using the quickstart guide. Follow the GitHub README here: https://github.com/DrDroidLab/telemetry-sdk#readme
 exactly.

First, list the steps from the README.

Then apply those steps in my codebase using the examples shown.

Don't add or change anything—just copy the instructions exactly.
Use the SDK from https://www.npmjs.com/package/@hyperlook/telemetry-sdk

📦 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.

🎥 Session Replay (Optional)

Session Replay lets you record and replay real user sessions for debugging and analysis.

Enable in your config:

initTelemetry({
  hyperlookApiKey: "your-api-key",
  enableSessionReplay: true,
});