@logtide/nextjs

LogTide integration for Next.js — auto error capture, request tracing, and performance spans for both server and client.

---

Features

- Server-side request tracing with automatic span creation
- Error capture via Next.js onRequestError hook
- Client-side error boundary for React components
- Navigation tracking as breadcrumbs
- W3C Trace Context propagation (traceparent)
- App Router & Pages Router support
- Full TypeScript support with strict types

Installation

``bash
npm install @logtide/nextjs


or

pnpm add @logtide/nextjs

or

yarn add @logtide/nextjs
`

---

Quick Start

$3

Create (or update) your instrumentation.ts at the project root:

`typescript
// instrumentation.ts
import { registerLogtide, captureRequestError } from '@logtide/nextjs/server';

export async function register() {
await registerLogtide({
dsn: 'https://lp_your_key@your-instance.com',
// Or use apiUrl + apiKey instead of dsn:
// apiUrl: 'https://your-instance.com',
// apiKey: 'lp_your_key',
service: 'my-nextjs-app',
environment: process.env.NODE_ENV,
});
}

export const onRequestError = captureRequestError;
`

$3

Initialize LogTide in your root layout:

`typescript
// app/layout.tsx
'use client';

import { useEffect } from 'react';
import { initLogtide, trackNavigation } from '@logtide/nextjs/client';

initLogtide({
dsn: 'https://lp_your_key@your-instance.com',
// Or use apiUrl + apiKey instead of dsn:
// apiUrl: 'https://your-instance.com',
// apiKey: 'lp_your_key',
service: 'my-nextjs-app',
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
useEffect(() => trackNavigation(), []);

return (

{children}

);
}
`

---

Server API

$3

Initialize LogTide in Next.js instrumentation.ts. Automatically installs ConsoleIntegration and GlobalErrorIntegration.

`typescript
import { registerLogtide } from '@logtide/nextjs/server';

await registerLogtide({
dsn: 'https://lp_key@host',
service: 'my-app',
environment: 'production',
release: '1.0.0',
});
`

$3

Next.js onRequestError handler. Automatically captures errors with route context, HTTP metadata, and breadcrumbs.

`typescript
import { captureRequestError } from '@logtide/nextjs/server';

// instrumentation.ts
export const onRequestError = captureRequestError;
`

Captured metadata includes:
- route.path, route.kind, route.type
- http.method, http.url
- render.source (if available)

$3

Manually instrument a server-side request (creates a span and scope):

`typescript
import { instrumentRequest, finishRequest } from '@logtide/nextjs/server';

const result = instrumentRequest({
headers: new Headers(),
method: 'GET',
url: 'http://localhost:3000/api/data',
});

// ... handle request ...

finishRequest(result!.spanId, 200);
`

$3

Finish a request span. Marks as error for 5xx status codes, ok otherwise.

---

Client API

$3

Initialize LogTide on the client side. Installs GlobalErrorIntegration for unhandledrejection events.

`typescript
import { initLogtide } from '@logtide/nextjs/client';

initLogtide({
dsn: 'https://lp_key@host',
service: 'my-app',
});
`

$3

Track client-side navigation (pushState, replaceState, popstate) as breadcrumbs. Returns a cleanup function.

`typescript
import { useEffect } from 'react';
import { trackNavigation } from '@logtide/nextjs/client';

export default function Layout({ children }) {
useEffect(() => trackNavigation(), []);
return <>{children};
}
`

---

Exports

`typescript
// Main entry — re-exports both server and client
import { registerLogtide, captureRequestError } from '@logtide/nextjs';
import { initLogtide, trackNavigation } from '@logtide/nextjs';

// Server-specific
import { registerLogtide, captureRequestError, instrumentRequest, finishRequest } from '@logtide/nextjs/server';

// Client-specific
import { initLogtide, trackNavigation } from '@logtide/nextjs/client';
``

---

License

MIT License - see LICENSE for details.

Links

- LogTide Website
- Documentation
- GitHub