Next.js SDK

# .npmrc
@abrova-trace:registry=https://center.abrova.ir/api/packages/abrova/npm/

npm install @abrova-trace/nextjs-sdk
# or
yarn add @abrova-trace/nextjs-sdk
# or
pnpm add @abrova-trace/nextjs-sdk

'use client';

import { useEffect } from 'react';
import { AbrovaTrace } from '@abrova-trace/nextjs-sdk';
import { useAbrovaTraceNavigation } from '@abrova-trace/nextjs-sdk/react';

export function Providers({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    AbrovaTrace.init({
      apiKey: 'ab_live_your_api_key',
      environment: process.env.NODE_ENV,
      release: process.env.NEXT_PUBLIC_APP_VERSION,
      debug: process.env.NODE_ENV === 'development',
    });
  }, []);

  // Track navigation
  useAbrovaTraceNavigation();

  return <>{children}</>;
}

import { Providers } from './providers';

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

import { useEffect } from 'react';
import type { AppProps } from 'next/app';
import { AbrovaTrace } from '@abrova-trace/nextjs-sdk';
import { useAbrovaTracePagesRouter } from '@abrova-trace/nextjs-sdk/react';

function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    AbrovaTrace.init({
      apiKey: 'ab_live_your_api_key',
      environment: process.env.NODE_ENV,
      release: process.env.NEXT_PUBLIC_APP_VERSION,
    });
  }, []);

  // Track navigation
  useAbrovaTracePagesRouter();

  return <Component {...pageProps} />;
}

export default MyApp;

import { ErrorBoundary } from '@abrova-trace/nextjs-sdk/react';

export default function Page() {
  return (
    <ErrorBoundary fallback={<div>Something went wrong!</div>}>
      <YourComponent />
    </ErrorBoundary>
  );
}

<ErrorBoundary
  fallback={(error, errorInfo, resetError) => (
    <div>
      <h1>Error: {error.message}</h1>
      <button onClick={resetError}>Try again</button>
    </div>
  )}
>
  <YourComponent />
</ErrorBoundary>

<ErrorBoundary
  onError={(error, errorInfo) => {
    console.log('Error occurred:', error);
    // Custom error handling
  }}
>
  <YourComponent />
</ErrorBoundary>

<ErrorBoundary
  fallbackMessage="We could not load this section."
  showErrorDetails={false}
>
  <YourComponent />
</ErrorBoundary>

import { useAbrovaTrace } from '@abrova-trace/nextjs-sdk/react';

function MyComponent() {
  const { captureException, captureMessage, setUserId } = useAbrovaTrace();

  const handleClick = async () => {
    try {
      await riskyOperation();
    } catch (error) {
      captureException(error as Error, 'Failed to complete operation', {
        userId: user.id,
        action: 'button_click',
      });
    }
  };

  return <button onClick={handleClick}>Click me</button>;
}

import { AbrovaTrace } from '@abrova-trace/nextjs-sdk';

// Capture exception
try {
  throw new Error('Something broke');
} catch (error) {
  AbrovaTrace.getInstance()?.captureException(error as Error, 'Custom context', {
    userId: '123',
    customData: 'value',
  });
}

// Capture a message (level: 'debug' | 'info' | 'warning' | 'error')
AbrovaTrace.getInstance()?.captureMessage(
  'User completed checkout',
  'info',
  { orderId: '456' }
);

import { BreadcrumbService, BreadcrumbType } from '@abrova-trace/nextjs-sdk';

// Generic breadcrumb
BreadcrumbService.add('User action', BreadcrumbType.User, { button: 'submit' });

// Specific types
BreadcrumbService.addUser('Clicked checkout button');
BreadcrumbService.addHttp('POST', '/api/orders', 200);
BreadcrumbService.addState('Cart updated', { items: 3 });
BreadcrumbService.addNavigation('/cart', '/checkout');

import { useBreadcrumbs } from '@abrova-trace/nextjs-sdk/react';

function Component() {
  const { addBreadcrumb, addHttp, addState } = useBreadcrumbs();

  const handleSubmit = async (data) => {
    addBreadcrumb('Form submitted', { formName: 'contact' });

    const response = await fetch('/api/contact', {
      method: 'POST',
      body: JSON.stringify(data),
    });

    addHttp('POST', '/api/contact', response.status);
  };

  return <form onSubmit={handleSubmit}>...</form>;
}

// lib/abrova-trace-server.ts
import { AbrovaTrace } from '@abrova-trace/nextjs-sdk';

export const trace =
  AbrovaTrace.getInstance() ??
  AbrovaTrace.init({
    apiKey: process.env.ABROVA_TRACE_API_KEY!,
    environment: process.env.NODE_ENV,
  });

// pages/api/example.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import { trace } from '@/lib/abrova-trace-server';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
    // Your API logic
  } catch (error) {
    trace.captureException(error as Error, 'API Error', {
      endpoint: '/api/example',
      method: req.method,
    });
    res.status(500).json({ error: 'Internal Server Error' });
  }
}

// app/page.tsx
import { trace } from '@/lib/abrova-trace-server';

export default async function Page() {
  try {
    const data = await fetchData();
    return <div>{data}</div>;
  } catch (error) {
    trace.captureException(error as Error, 'Server Component Error');
    return <div>Error loading data</div>;
  }
}

// next.config.js
module.exports = {
  productionBrowserSourceMaps: true,
};

npx @abrova-trace/cli sourcemaps upload .next/static --release 1.0.0 --project YOUR_PROJECT_ID --token ab_pat_xxx

AbrovaTrace.init({
apiKey: 'ab_live_your_api_key',           // Required
environment: 'production',              // Default: 'production'
release: '1.0.0',                       // Optional
captureUncaughtErrors: true,            // Default: true
enabled: true,                          // Default: true
debug: false,                           // Default: false
timeout: 10,                            // Default: 10 seconds
enableServerSide: true,                 // Default: true
enableClientSide: true,                 // Default: true
enableCrashDetection: true,             // Default: true
maxBreadcrumbs: 20,                     // Default: 20
sampleRate: 1.0,                        // 0.0 to 1.0
tags: { team: 'frontend' },            // Custom tags
ignoreErrors: ['ResizeObserver loop limit exceeded'],
ignoreUrls: [/chrome-extension:\/\//],   // matched against the stack trace
beforeSend: (error) => error,           // Filter/modify errors
});

import { AbrovaTrace } from '@abrova-trace/nextjs-sdk';

// Set user ID after authentication
AbrovaTrace.getInstance()?.setUserId('user-123');

// Get user ID
const userId = AbrovaTrace.getInstance()?.getUserId();

'use client';

import { useAbrovaTraceNavigation } from '@abrova-trace/nextjs-sdk/react';

export function NavigationTracker() {
  useAbrovaTraceNavigation();
  return null;
}

import { useAbrovaTracePagesRouter } from '@abrova-trace/nextjs-sdk/react';

function MyApp({ Component, pageProps }) {
  useAbrovaTracePagesRouter();
  return <Component {...pageProps} />;
}

import { RouterIntegration } from '@abrova-trace/nextjs-sdk';

RouterIntegration.setCurrentRoute('/custom-route');

const sdk = AbrovaTrace.getInstance();

sdk?.setExtra('organizationId', 'org-123');
sdk?.setExtra('feature', 'checkout-v2');

sdk?.setExtras({
  organizationId: 'org-123',
  feature: 'checkout-v2',
  experiment: 'new-flow',
});

const orgId = sdk?.getExtra('organizationId');
const allExtras = sdk?.getExtras();

sdk?.clearExtras();

const sdk = AbrovaTrace.getInstance();

sdk?.setTag('team', 'payments');
sdk?.setTag('region', 'us-east');

sdk?.setTags({ team: 'payments', version: '2.1' });

const team = sdk?.getTag('team');
const allTags = sdk?.getTags();

sdk?.clearTags();

const sessionId = AbrovaTrace.getInstance()?.getSessionId();

const sdk = AbrovaTrace.getInstance();

sdk?.enableWebVitals({
  reportAllChanges: false, // Only report final values (default)
  batchInterval: 5000,     // Send 5 s after the last metric (default); also sent when the page is hidden
});

import type {
  AbrovaTraceConfig,
  AbrovaTraceError,
  Breadcrumb,
} from '@abrova-trace/nextjs-sdk';

import type {
  PerformanceSpan,
  WebVitalsData,
  LogEntry,
  LogLevel,
  LogServiceConfig,
} from '@abrova-trace/nextjs-sdk';

import { LogService } from '@abrova-trace/nextjs-sdk';

export const logger = new LogService({
  apiKey: process.env.ABROVA_TRACE_API_KEY!,
  sourceId: 'nextjs-app',
  platform: 'nextjs',
  environment: process.env.NODE_ENV,
});

logger.log('Users fetched', 'info', { count: 42 });