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 "@oheoco/logged";
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 "@oheoco/logged";
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>;
}