لاگگیری با SDK Next.js
لاگگیری فولاستک TypeScript برای اپهای Next.js با پشتیبانی از App Router و Pages Router.
لاگگیری فولاستک با TypeScript برای اپهای Next.js، با پشتیبانی از App Router و Pages Router.
نصب#
رجیستری ابرووا را به .npmrc اضافه کنید و سپس نصب کنید (نگاه کنید به SDK Next.js):
# .npmrc @abrova-trace:registry=https://center.abrova.ir/api/packages/abrova/npm/
npm install @abrova-trace/nextjs-sdk
راهاندازی logger#
فایل lib/logger.ts را بسازید:
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)#
// 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ها)#
// 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' });
}
}سطحهای لاگ#
// 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#
// 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*' };لاگگیری سمت کلاینت#
AbrovaTrace.getInstance()?.info('Button clicked', { buttonId: 'submit-form' }). اگر ترجیح میدهید لاگهای کلاینت اول روی سرور خودتان بررسی یا فیلتر شوند، آنها را مثل نمونهی زیر از یک API route بفرستید. لاگها بافر میشوند (بهطور پیشفرض بعد از ۵۰ لاگ یا ۳۰ ثانیه فرستاده میشوند) و با بسته شدن صفحه خودکار ارسال نمیشوند؛ پس هر وقت لاگی باید همان لحظه برود، AbrovaTrace.getInstance()?.flushLogs() را صدا بزنید.یک route واسط (proxy) بسازید:
// 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 });
}کامپوننت کلاینت:
'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' });پیکربندی#
| گزینه | نوع | اجباری | توضیح |
|---|---|---|---|
| apiKey | string | بله | کلید API پروژهی شما |
| sourceId | string | خیر | شناسهی منبع لاگ. با آن، لاگها دستهای فرستاده میشوند (/api/logs/ingest/batch)؛ بدون آن، هر لاگ بافرشده با یک درخواست جدا فرستاده میشود |
| sourceName | string | خیر | نام نمایشی این منبع |
| platform | string | بله | شناسهی پلتفرم، مثلاً "nextjs" (مقدار پیشفرض ندارد) |
| environment | string | بله | نام محیط، مثلاً "production" (مقدار پیشفرض ندارد) |
| release | string | خیر | نسخهی اپ که به هر لاگ پیوست میشود |
| batchSize | number | خیر | وقتی بافر به این اندازه برسد flush میشود (پیشفرض: ۵۰) |
| flushIntervalMs | number | خیر | حداکثر زمان تا flush به میلیثانیه (پیشفرض: ۳۰۰۰۰) |
| maxBufferSize | number | خیر | با گذشتن از این حد، قدیمیترین لاگها حذف میشوند (پیشفرض: ۱۰۰۰) |
| debug | boolean | خیر | چاپ خروجی دیباگ SDK در کنسول (پیشفرض: false) |
| apiUrl | string | خیر | آدرس پایهی API تریس (پیشفرض: "https://trace.abrova.ir"). فقط برای نسخهی خودمیزبان تنظیمش کنید |
توصیهها#
یک نمونهی logger در lib/logger.ts بسازید و همهجا همان را import کنید
وقتی میخواهید لاگهای کلاینت پیش از رسیدن به ابرووا تریس بررسی یا فیلتر شوند، از route واسط استفاده کنید
به همهی API Routeها لاگ اضافه کنید تا همهی درخواستها دیده شوند
متد، مسیر و مدتزمان را در لاگ درخواستها بیاورید
سطح و متن لاگی را که از route واسط سمت کلاینت میرسد پاکسازی و اعتبارسنجی کنید
یک middleware اضافه کنید تا درخواستها و پاسخهای API Routeها خودکار لاگ شوند