Next.js SDK

@logtide/nextjs integrates LogTide with Next.js App Router. It provides server-side instrumentation, client-side error boundaries, and navigation tracking.

Installation

npm install @logtide/nextjs

Server-Side Setup

Use Next.js instrumentation to initialize LogTide on the server. Create or update instrumentation.ts in your project root:

// instrumentation.ts
import { registerLogtide } from '@logtide/nextjs/server';

export async function register() {
  registerLogtide({
    dsn: process.env.LOGTIDE_DSN!,
    service: 'nextjs-app',
    environment: process.env.NODE_ENV,
    release: process.env.NEXT_PUBLIC_APP_VERSION,
  });
}

Enable the instrumentation hook in next.config.ts:

// next.config.ts
const nextConfig = {
  experimental: {
    instrumentationHook: true,
  },
};

export default nextConfig;

Client-Side Setup

Initialize LogTide on the client in your root layout:

// app/layout.tsx
import { initLogtide } from '@logtide/nextjs/client';

initLogtide({
  dsn: process.env.NEXT_PUBLIC_LOGTIDE_DSN!,
  environment: process.env.NODE_ENV,
});

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

Error Capture

The SDK automatically captures request errors in server components and route handlers via captureRequestError:

// This is handled automatically by registerLogtide().
// Server-side errors in API routes, Server Components, and Server Actions
// are captured with full request context including:
// - URL, method, headers
// - Route parameters
// - User context (if configured)
// - Breadcrumbs leading to the error

Error Boundary

Use LogtideErrorBoundary to capture client-side React errors:

// app/error.tsx
'use client';

import { LogtideErrorBoundary } from '@logtide/nextjs/client';

export default function ErrorPage({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <LogtideErrorBoundary error={error}>
      <div>
        <h2>Something went wrong</h2>
        <button onClick={reset}>Try again</button>
      </div>
    </LogtideErrorBoundary>
  );
}

Track client-side navigation events as breadcrumbs:

// app/providers.tsx
'use client';

import { trackNavigation } from '@logtide/nextjs/client';
import { usePathname } from 'next/navigation';
import { useEffect } from 'react';

export function LogtideNavigationTracker() {
  const pathname = usePathname();

  useEffect(() => {
    trackNavigation(pathname);
  }, [pathname]);

  return null;
}

// app/layout.tsx
import { LogtideNavigationTracker } from './providers';

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

Configuration

Environment variables for Next.js:

# .env.local

# Server-side DSN (not exposed to client)
LOGTIDE_DSN=https://[email protected]

# Client-side DSN (public, limited permissions)
NEXT_PUBLIC_LOGTIDE_DSN=https://[email protected]

# App version
NEXT_PUBLIC_APP_VERSION=1.0.0

API Reference

Export	Module	Description
`registerLogtide(options)`	`/server`	Initialize in instrumentation.ts, sets up captureRequestError
`initLogtide(options)`	`/client`	Initialize on the client side
`LogtideErrorBoundary`	`/client`	React error boundary that captures errors
`trackNavigation(pathname)`	`/client`	Track route changes as breadcrumbs
`captureRequestError`	`/server`	Automatic server error capture (set up by registerLogtide)

See the JavaScript SDK core docs for the full @logtide/core API.

Edit this page on GitHub