راه‌اندازی instrumentation در Next.js – ثبت عملکرد، مانیتورینگ و مدیریت کدهای جانبی

Instrumentation در Next.js به شما اجازه می‌دهد ابزارهای مانیتورینگ و لاگ‌گیری را به اپلیکیشن خود متصل کنید. این مقاله نحوهٔ ایجاد فایل instrumentation، استفاده از OpenTelemetry، مدیریت کدهای جانبی، و تفکیک کدهای وابسته به runtime را بررسی می‌کند.

InstrumentationOpenTelemetryNEXT_RUNTIME

~2 دقیقه مطالعه · آخرین به‌روزرسانی ۵ آبان ۱۴۰۴

مقدمه


Instrumentation فرآیند ثبت رفتار و عملکرد اپلیکیشن با استفاده از کد است. این قابلیت به شما کمک می‌کند تا مشکلات را در محیط production ردیابی کرده و عملکرد سیستم را مانیتور کنید.


ساختار پیشنهادی


برای راه‌اندازی instrumentation در Next.js، فایل instrumentation.ts یا instrumentation.js را در ریشه پروژه یا داخل پوشه src ایجاد کنید.

در این فایل، تابع register را export کنید. این تابع هنگام راه‌اندازی سرور Next.js یک‌بار اجرا می‌شود.


مثال: اتصال به OpenTelemetry


import { registerOTel } from '@vercel/otel'

export function register() {
  registerOTel('next-app')
}

این کد OpenTelemetry را برای اپلیکیشن با نام next-app فعال می‌کند.


نکات مهم


  • فایل instrumentation باید در ریشه پروژه باشد، نه داخل پوشه app یا pages
  • اگر از src استفاده می‌کنید، فایل را کنار پوشه‌های pages و app قرار دهید
  • اگر از گزینه pageExtensions استفاده کرده‌اید، نام فایل instrumentation را مطابق آن تنظیم کنید

وارد کردن فایل‌های دارای اثر جانبی


گاهی لازم است فایلی را فقط به‌خاطر اثر جانبی آن وارد کنید، مثلاً برای تعریف متغیرهای سراسری. توصیه می‌شود این کار را داخل تابع register انجام دهید:

export async function register() {
  await import('package-with-side-effect')
}

این روش باعث می‌شود تمام اثرات جانبی در یک نقطه متمرکز شوند و از وارد کردن ناخواسته در سطح بالا جلوگیری شود.


وارد کردن کد وابسته به runtime


تابع register در تمام محیط‌ها اجرا می‌شود. بنابراین باید کدهایی که فقط در محیط خاصی اجرا می‌شوند را به‌صورت شرطی وارد کنید:

export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    await import('./instrumentation-node')
  }

  if (process.env.NEXT_RUNTIME === 'edge') {
    await import('./instrumentation-edge')
  }
}

این روش از بروز خطا در محیط‌هایی مانند Edge جلوگیری می‌کند.


جمع‌بندی


با راه‌اندازی instrumentation در Next.js می‌توانید ابزارهای مانیتورینگ را به‌صورت امن و ساختاریافته به اپلیکیشن خود متصل کنید. استفاده از فایل instrumentation.ts، مدیریت کدهای جانبی و تفکیک محیط‌های اجرایی از اصول کلیدی در این فرآیند هستند.


نوشته و پژوهش‌شده توسط دکتر شاهین صیامی

مقالات مرتبط

مسیریابی پیشرفته و هوک‌های عملکرد در Next.js — راهنمای توسعه‌دهنده برای App Router

Next.js مجموعه‌ای غنی از هوک‌های کلاینت و ابزارهای کش و ناوبری را در اختیار توسعه‌دهندگان قرار می‌دهد. از خواندن پارامترهای مسیر تا گزارش Web Vitals و مدیریت کش، این مقاله مهم‌ترین ابزارهای App Router را با مثال‌های کاربردی معرفی می‌کند.

ادامه

مدیریت احراز هویت و کش در Next.js — راهنمای توسعه‌دهنده برای امنیت و عملکرد پویا

Next.js با معرفی قابلیت‌های آزمایشی جدید، امکان کنترل دقیق‌تر دسترسی و کش داده‌ها را فراهم کرده است. تابع unauthorized برای مدیریت خطای 401 و هدایت کاربران به صفحه ورود، unstable_cache برای کش هوشمند عملیات سنگین، updateTag برای بازسازی آنی داده‌ها، و useLinkStatus برای نمایش وضعیت ناوبری استفاده می‌شوند. این مقاله نحوه استفاده از این ابزارها را با مثال‌های کاربردی و نکات مهم بررسی می‌کند.

ادامه

redirect و refresh در Next.js — ریدایرکت‌های هوشمند و تازه‌سازی مسیر در Server Actions

تابع redirect در Next.js برای هدایت کاربر به مسیر جدید استفاده می‌شود و بسته به نوع استفاده، پاسخ HTTP با وضعیت 307 یا 303 ارسال می‌کند. این تابع در Server Components، Client Components، Route Handlers و Server Actions قابل استفاده است. تابع refresh نیز برای تازه‌سازی مسیر کلاینت از درون Server Action استفاده می‌شود. این مقاله نحوه استفاده از هر دو تابع را با مثال‌های کاربردی و نکات مهم توضیح می‌دهد.

ادامه

Next.js با معرفی NextRequest و NextResponse، APIهای Request و Response مرورگر را گسترش داده و ابزارهای قدرتمندی برای مدیریت کوکی‌ها، هدرها، ریدایرکت‌ها، بازنویسی مسیرها و پاسخ‌های JSON فراهم کرده است. این مقاله نحوه استفاده از این ابزارها را با مثال‌های کاربردی و نکات امنیتی توضیح می‌دهد.

Next.js با معرفی NextRequest و NextResponse، APIهای Request و Response مرورگر را گسترش داده و ابزارهای قدرتمندی برای مدیریت کوکی‌ها، هدرها، ریدایرکت‌ها، بازنویسی مسیرها و پاسخ‌های JSON فراهم کرده است. این مقاله نحوه استفاده از این ابزارها را با مثال‌های کاربردی و نکات امنیتی توضیح می‌دهد.

ادامه

headers، ImageResponse، notFound و permanentRedirect در Next.js — مدیریت درخواست‌ها، تولید تصویر، خطا و ریدایرکت

Next.js ابزارهای قدرتمندی برای مدیریت درخواست‌ها و پاسخ‌ها در کامپوننت‌های سروری فراهم کرده است. تابع headers برای خواندن هدرهای HTTP ورودی، ImageResponse برای تولید تصاویر داینامیک، notFound برای نمایش صفحه خطای 404، و permanentRedirect برای ریدایرکت دائمی کاربران استفاده می‌شوند. این مقاله نحوه استفاده از هر یک را با مثال‌های کاربردی توضیح می‌دهد.

ادامه

راهنمای کامل استفاده از metadata و generateMetadata در Next.js

در نسخه‌های مدرن Next.js، مدیریت metadata صفحات بسیار قدرتمندتر و ساده‌تر شده است. metadata به‌صورت خودکار در تگ <head> صفحات تزریق می‌شود و نقش مهمی در SEO، اشتراک‌گذاری اجتماعی و تجربه کاربری دارد. این مقاله دو روش اصلی تعریف metadata را بررسی می‌کند: استفاده از آبجکت ثابت metadata و تابع داینامیک generateMetadata.

ادامه