SDKs

Next.js SDK

Package: @veriq/next

Client component that captures errors, Web Vitals, navigation breadcrumbs, console calls, and clicks. Works with App Router and Pages Router.

Install with Claude Code

Paste this prompt into Claude Code. It will install the SDK, configure your app, and add the DSN env var automatically.

Add the @veriq/next SDK to my Next.js project.

Steps:
1. Run: npm install @veriq/next
2. In app/layout.tsx, import VeriqClient from '@veriq/next' and render <VeriqClient dsn={process.env.NEXT_PUBLIC_VERIQ_DSN!} /> inside <body>
3. Add NEXT_PUBLIC_VERIQ_DSN=[YOUR_DSN] to .env.local
4. Optionally add NEXT_PUBLIC_APP_VERSION and NEXT_PUBLIC_ENV env vars
5. Verify by triggering a test error: import { captureException } from '@veriq/next' and call captureException(new Error('test')) from a button click

My DSN: [paste your DSN from Project Settings → API Keys]

Install

bash

npm install @veriq/next

VeriqClient

Add to your root layout inside <body>:

tsx

import { VeriqClient } from '@veriq/next';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <VeriqClient
          dsn={process.env.NEXT_PUBLIC_VERIQ_DSN!}
          release={process.env.NEXT_PUBLIC_APP_VERSION}
          environment={process.env.NEXT_PUBLIC_ENV}
        />
        {children}
      </body>
    </html>
  );
}

Env vars

bash

# .env.local
NEXT_PUBLIC_VERIQ_DSN=pk_...
NEXT_PUBLIC_APP_VERSION=1.0.0
NEXT_PUBLIC_ENV=production

Click breadcrumbs

VeriqClient attaches a window-level click listener automatically — no setup required. Every click is recorded as a ui.click breadcrumb with a CSS-like selector for the clicked element (tag, id, up to 3 classes — e.g. button#submit.btn.btn-primary) and up to 40 characters of the element's trimmed text content.

Input values are never captured — text is read from textContent, which is empty for form fields. This is web/Next.js-only for now; the React Native SDK doesn't capture tap breadcrumbs yet.

Manual capture

import { captureException, captureMessage } from '@veriq/next';

try {
  await riskyOperation();
} catch (err) {
  captureException(err);
}

captureMessage('Checkout completed', { level: 'info' });

Source maps

bash

npm install -D @veriq/cli

json

{
  "scripts": {
    "build": "next build && veriq-cli upload-sourcemaps --project proj_xxx --secret sk_..."
  }
}