ابرووا
شروع رایگان
☰ فهرست مستندات · لاگ در SDK نکست

لاگ‌گیری با SDK Next.js

لاگ‌گیری فول‌استک TypeScript برای اپ‌های Next.js با پشتیبانی از App Router و Pages Router.

به‌روزرسانی: ۵ آبان ۱۴۰۵

لاگ‌گیری فول‌استک با TypeScript برای اپ‌های Next.js، با پشتیبانی از App Router و Pages Router.

نصب#

رجیستری ابرووا را به .npmrc اضافه کنید و سپس نصب کنید (نگاه کنید به SDK Next.js):

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

راه‌اندازی logger#

فایل lib/logger.ts را بسازید:

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

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

App Router (نسخه‌ی ۱۳ به بعد Next.js)#

typescript
// app/api/users/route.ts
import { NextResponse } from 'next/server';
import { logger } from '@/lib/logger';

export async function GET(request: Request) {
  logger.log('Fetching users', 'info');

  try {
    const users = await db.users.findMany();
    logger.log('Users fetched', 'info', { count: users.length });
    return NextResponse.json(users);
  } catch (error) {
    logger.log('Failed to fetch users', 'error', {
      error: error instanceof Error ? error.message : 'Unknown',
    });
    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
  }
}

Pages Router (API Routeها)#

typescript
// pages/api/orders.ts
import { logger } from '@/lib/logger';

export default async function handler(req, res) {
  logger.log('Order request received', 'info', {
    method: req.method,
    path: req.url,
  });

  try {
    const order = await createOrder(req.body);
    logger.log('Order created', 'info', { orderId: order.id });
    res.json(order);
  } catch (error) {
    logger.log('Order creation failed', 'error', {
      error: error.message,
    });
    res.status(500).json({ error: 'Failed to create order' });
  }
}

سطح‌های لاگ#

typescript
// LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal'

logger.log('Detailed trace info', 'trace');
logger.log('Debug information', 'debug');
logger.log('User action completed', 'info');
logger.log('Approaching rate limit', 'warn');
logger.log('Failed to save data', 'error');
logger.log('App crashed unexpectedly', 'fatal');

یکپارچگی با middleware#

typescript
// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { logger } from '@/lib/logger';

export function middleware(request: NextRequest) {
  const start = Date.now();

  logger.log('Request received', 'info', {
    method: request.method,
    path: request.nextUrl.pathname,
  });

  const response = NextResponse.next();
  const duration = Date.now() - start;

  logger.log('Request processed', 'info', {
    path: request.nextUrl.pathname,
    duration,
  });

  return response;
}

export const config = { matcher: '/api/:path*' };

لاگ‌گیری سمت کلاینت#

دو راه. در مرورگر می‌توانید مستقیماً با همان نمونه‌ی SDK که راه‌اندازی کرده‌اید لاگ بگیرید، مثلاً AbrovaTrace.getInstance()?.info('Button clicked', { buttonId: 'submit-form' }). اگر ترجیح می‌دهید لاگ‌های کلاینت اول روی سرور خودتان بررسی یا فیلتر شوند، آن‌ها را مثل نمونه‌ی زیر از یک API route بفرستید. لاگ‌ها بافر می‌شوند (به‌طور پیش‌فرض بعد از ۵۰ لاگ یا ۳۰ ثانیه فرستاده می‌شوند) و با بسته شدن صفحه خودکار ارسال نمی‌شوند؛ پس هر وقت لاگی باید همان لحظه برود، AbrovaTrace.getInstance()?.flushLogs() را صدا بزنید.

یک route واسط (proxy) بسازید:

typescript
// app/api/log/route.ts
import { NextResponse } from 'next/server';
import { logger } from '@/lib/logger';

export async function POST(request: Request) {
  const { message, level, metadata } = await request.json();

  const validLevels = ['trace', 'debug', 'info', 'warn', 'error', 'fatal'];
  const safeLevel = validLevels.includes(level) ? level : 'info';

  logger.log(message, safeLevel, { ...metadata, source: 'client' });

  return NextResponse.json({ success: true });
}

کامپوننت کلاینت:

typescript
'use client';

async function logToServer(message: string, level: string, metadata?: object) {
  await fetch('/api/log', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message, level, metadata }),
  });
}

// Usage
logToServer('Button clicked', 'info', { buttonId: 'submit-form' });

پیکربندی#

گزینهنوعاجباریتوضیح
apiKeystringبلهکلید API پروژه‌ی شما
sourceIdstringخیرشناسه‌ی منبع لاگ. با آن، لاگ‌ها دسته‌ای فرستاده می‌شوند (/api/logs/ingest/batch)؛ بدون آن، هر لاگ بافرشده با یک درخواست جدا فرستاده می‌شود
sourceNamestringخیرنام نمایشی این منبع
platformstringبلهشناسه‌ی پلتفرم، مثلاً "nextjs" (مقدار پیش‌فرض ندارد)
environmentstringبلهنام محیط، مثلاً "production" (مقدار پیش‌فرض ندارد)
releasestringخیرنسخه‌ی اپ که به هر لاگ پیوست می‌شود
batchSizenumberخیروقتی بافر به این اندازه برسد flush می‌شود (پیش‌فرض: ۵۰)
flushIntervalMsnumberخیرحداکثر زمان تا flush به میلی‌ثانیه (پیش‌فرض: ۳۰۰۰۰)
maxBufferSizenumberخیربا گذشتن از این حد، قدیمی‌ترین لاگ‌ها حذف می‌شوند (پیش‌فرض: ۱۰۰۰)
debugbooleanخیرچاپ خروجی دیباگ SDK در کنسول (پیش‌فرض: false)
apiUrlstringخیرآدرس پایه‌ی API تریس (پیش‌فرض: "https://trace.abrova.ir"). فقط برای نسخه‌ی خودمیزبان تنظیمش کنید

توصیه‌ها#

یک logger مرکزی

یک نمونه‌ی logger در lib/logger.ts بسازید و همه‌جا همان را import کنید

فیلتر لاگ‌های کلاینت

وقتی می‌خواهید لاگ‌های کلاینت پیش از رسیدن به ابرووا تریس بررسی یا فیلتر شوند، از route واسط استفاده کنید

لاگ در API Routeها

به همه‌ی API Routeها لاگ اضافه کنید تا همه‌ی درخواست‌ها دیده شوند

اطلاعات درخواست را اضافه کنید

متد، مسیر و مدت‌زمان را در لاگ درخواست‌ها بیاورید

لاگ‌های کلاینت را اعتبارسنجی کنید

سطح و متن لاگی را که از route واسط سمت کلاینت می‌رسد پاک‌سازی و اعتبارسنجی کنید

از middleware استفاده کنید

یک middleware اضافه کنید تا درخواست‌ها و پاسخ‌های API Routeها خودکار لاگ شوند

این صفحه مفید بود؟
گزارش مشکل