Frontend Monitoring Tools
مانیتورینگ در فرانت‌اند یعنی چی؟
مانیتورینگ یعنی:
بدون اینکه کاربر بگه «این سایت خرابه»، خودمون بفهمیم کجاش مشکل داره.
مانیتورینگ به ما کمک می‌کند:
- خطاها (Errors) را سریع شناسایی کنیم
- پرفورمنس واقعی کاربر را اندازه بگیریم
- رفتار واقعی کاربر را تحلیل کنیم
- قبل از بحران، مشکل را حل کنیم
دسته‌بندی اصلی Monitoring در Frontend
- Error Monitoring
- Performance Monitoring
- User Behavior Monitoring (RUM)
- Logging & Analytics
- Uptime & Availabilit
1️⃣ Error Monitoring
چه چیزهایی مانیتور می‌شوند؟
- JavaScript Runtime Errors
- Unhandled Promise Rejections
- Network / API Errors
- Stack Trace واقعی کاربر
- اطلاعات مرورگر و دستگاه
ابزارهای رایج
- Sentry
- Bugsnag
- Rollbar
2️⃣ Performance Monitoring
خب Performance Monitoring یعنی اندازه‌گیری تجربه واقعی کاربر، نه تست روی سیستم خودمان.
راه سریع در Next.js (Vercel Speed Insights)
نصب
npm i @vercel/speed-insights
استفاده در app/layout.tsx
import { SpeedInsights } from "@vercel/speed-insights/next";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="fa">
<body>
{children}
<SpeedInsights />
</body>
</html>
);
}
چه چیزی جمع‌آوری می‌شود؟
خب Core Web Vitals شامل:
LCP (Largest Contentful Paint) زمان نمایش بزرگ‌ترین محتوای صفحه (هدف ≤ 2.5s)
CLS (Cumulative Layout Shift) میزان ناپایداری لِی‌اوت
INP (Interaction to Next Paint) سرعت پاسخ به تعاملات کاربر
چگونه داده‌ها را تحلیل کنیم؟
- وارد Vercel Dashboard شوید
- پروژه را انتخاب کنید
- تب Speed Insights را باز کنید
- مسیرهای پرترافیک مثل
/یا/productsرا بررسی کنید - مقادیر LCP / CLS / INP را تحلیل کنید
اولویت‌بندی اصلاحات
اگر LCP بالا است: - از next/image استفاده کنید - تصویر Hero را بهینه کنید - از preload برای منابع حیاتی استفاده کنید
اگر CLS بالا است: - برای تصاویر width و height مشخص کنید - فونت‌ها را با next/font مدیریت کنید
اگر INP بالا است: - کامپوننت‌های سنگین را dynamic import کنید - کارهای سنگین را به صورت async اجرا کنید
3️⃣ User Behavior Monitoring (RUM)
در این بخش رفتار واقعی کاربر ثبت می‌شود.
چه چیزهایی دیده می‌شود؟
- Heatmap کلیک‌ها
- Scroll Depth
- Session Replay
- Rage Click
ابزارهای معروف
- Hotjar
- FullStory
- Microsoft Clarity
مثال Hotjar
<script>
(function (h, o, t, j, a, r) {
h.hj =
h.hj ||
function () {
(h.hj.q = h.hj.q || []
).push(arguments);
};
h._hjSettings = { hjid: XXXX, hjsv: 6 };
a = o.getElementsByTagName("head")[0]
;
r = o.createElement("script");
r.async = 1;
r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
a.appendChild(r);
})(window, document, "https://static.hotjar.com/c/hotjar-", ".js?sv=");
</script>
کاربرد اصلی: - تحلیل رها کردن فرم - کشف مشکلات UX - شناسایی دکمه‌های غیرفعال یا گیج‌کننده
4️⃣ Logging & Analytics
خب Monitoring پاسخ می‌دهد: سیستم سالم است؟
و Analytics پاسخ می‌دهد: کاربر چه کاری انجام داده است؟
ابزارها
- Google Analytics (GA4)
- Mixpanel
- Amplitude
مثال ثبت Event در GA4
gtag("event", "login", {
method: "Google",
});
مناسب برای:
- Funnel Analysis
- Conversion Rate
- Feature Adoption
- A/B Testing
5️⃣ Uptime Monitoring
بررسی می‌کند که سایت در دسترس است یا نه.
ابزارها
- UptimeRobot
- Pingdom
- StatusCake
چه چیزهایی بررسی می‌شود؟
- Availability
- Response Time
- SSL Expiry
مقایسه سریع ابزارها
| دسته | ابزار پیشنهادی |
|---|---|
| Error | Monitoring Sentry |
| Performance | Vercel Speed Insights |
| Behavior | Microsoft Clarity |
| Analytics | GA4 |
| Uptime | UptimeRobot |
تفاوت Monitoring و Analytics
| Monitoring | Analytics |
|---|---|
| سیستم سالم است؟ | کاربر چه کرد؟ |
| مناسب Dev / Ops | مناسب Product / Business |
| تمرکز بر پایداری | تمرکز بر رشد و بهبود محصول |
جمع‌بندی
پس Monitoring یعنی:
دیدن تجربه واقعی کاربر، نه چیزی که فکر می‌کنیم تجربه می‌کند.
اگر مانیتورینگ نداشته باشید:
- خطاها پنهان می‌مانند
- پرفورمنس افت می‌کند
- کاربر بدون بازخورد از محصول خارج می‌شود
مانیتورینگ یک ابزار لوکس نیست؛ بخشی از معماری حرفه‌ای محصول است.