Next.js

Use Logged in a Next.js App Router project by initializing the SDK in a client component.

Provider component

tsx

"use client";

import { useEffect } from "react";
import { Logged } from "@logged/sdk";

const logger = new Logged({
  apiKey: process.env.NEXT_PUBLIC_LOGGED_API_KEY!,
});

export function LoggedProvider() {
  useEffect(() => {
    logger.auto();
    logger.interceptConsole();

    return () => {
      logger.stopAutoCapture();
      logger.stopConsoleInterception();
    };
  }, []);

  return null;
}

Why this is a client component

logger.auto() and interceptConsole()rely on browser globals, so they must run on the client. The provider above uses the "use client" directive to ensure that.

Add the provider

tsx

import { LoggedProvider } from "@/components/logged-provider";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <LoggedProvider />
        {children}
      </body>
    </html>
  );
}

Place the provider near the root of your application so it initializes once and remains active for the lifetime of the page.

Send logs from components

tsx

"use client";

import { Logged } from "@logged/sdk";

const logger = new Logged({
  apiKey: process.env.NEXT_PUBLIC_LOGGED_API_KEY!,
});

export function CheckoutButton() {
  async function handleCheckout() {
    try {
      await pay();
      logger.success("Payment completed");
    } catch (error) {
      logger.capture(error, { step: "checkout" });
    }
  }

  return <button onClick={handleCheckout}>Pay now</button>;
}