بیشتر باگهای جدی فرانتاند در محیط Production اتفاق میافتند، جایی که:
- کاربر روی دستگاه و مرورگر ناشناختهای است
- سرعت اینترنت، افزونههای مرورگر و رفتار کاربر قابل پیشبینی نیست
- شما معمولاً فقط یک جمله میشنوید:
«سایت خراب شد، یه چیزی ارور داد!»
اگر تا امروز فقط به لاگهای کنسول و devtools خودتان تکیه کردهاید، وقتش رسیده سراغ Monitoring و Observability در فرانتاند بروید.
در این مقاله به صورت عملی میبینیم:
- Monitoring و Observability دقیقاً یعنی چه و چه فرقی دارند؟
- چه دادههایی را باید از فرانتاند جمع کنیم؟
- چطور با Sentry، PostHog و LogRocket خطاها، رفتار کاربر و Session Replay را رصد کنیم؟
Monitoring vs Observability در فرانتاند
Monitoring چیست؟
Monitoring یعنی پایش سلامت سیستم بر اساس چند سیگنال مشخص:
- نرخ خطاها (Error Rate)
- زمان پاسخدهی (Response Time)
- میزان موفقیت درخواستها (Success Rate)
- Core Web Vitals و Performance Metrics
در فرانتاند، Monitoring معمولاً روی این چیزها تمرکز میکند:
- چند درصد کاربران خطای جاوااسکریپت دریافت کردهاند؟
- کدام Endpoint بیشتر از همه خطای ۴۰۰/۵۰۰ میدهد؟
- صفحه Home در موبایل چقدر کند لود میشود؟
Observability چیست؟
Observability یک لایه عمیقتر است:
بهجای فقط دیدن «چه مشکلی رخ داده»، میخواهیم بتوانیم پاسخ دهیم:
- چرا این خطا افتاده؟
- برای کدام کاربر/سشن اتفاق افتاده؟
- بعد از انجام چه اکشنهایی این مشکل پیش آمده؟
برای Observability نیاز به دادههای غنیتری داریم:
- لاگهای ساختارمند (Structured Logs)
- متریکها (Metrics)
- Event Tracking / Analytics
- Session Replay (ضبط ویدئویی رفتار کاربر در UI)
ابزارهایی مثل Sentry، PostHog و LogRocket به ما کمک میکنند این تصویر کامل را بسازیم.
چه چیزهایی را باید در فرانتاند رصد کنیم؟
برای شروع، این چکلیست را داشته باشید:
۱. خطاهای جاوااسکریپت (Errors)
- Uncaught Exceptions
- Promise Rejections
- خطاهای API (HTTP 4xx / 5xx)
مثلاً در Sentry هر Error همراه با:
- Stack Trace
- اطلاعات مرورگر و OS
- Version اپلیکیشن (release)
- Context اضافی (User ID، آخرین رویدادها، Breadcrumbs)
۲. Performance و Core Web Vitals
چند مثال مهم:
- LCP (Largest Contentful Paint): چقدر طول میکشد تا محتوای اصلی صفحه دیده شود؟
- CLS (Cumulative Layout Shift): صفحه چقدر میپرد و جابهجا میشود؟
- TTFB (Time To First Byte): پاسخ اولیه سرور چقدر طول میکشد؟
ابزارهایی مثل Sentry Performance یا PostHog Web Vitals کمک میکنند این متریکها را برای کاربران واقعی ببینید.
۳. رفتار کاربر (Events & Funnels)
اینجا بیشتر نقش ابزارهایی مثل PostHog پررنگ میشود:
- Track کردن eventها: کلیک روی CTA، ارسال فرم، ثبتنام، لاگین و …
- ساختن قیفهای (Funnels) تبدیل: از Landing تا ثبت سفارش
- تحلیل Retention، Cohortها و A/B Testing
۴. Session Replay
Session Replay یکی از قویترین ابزارها برای Debug است:
- بهجای حدس زدن، دقیقاً میبینید کاربر روی چه چیزی کلیک کرده
- موقع رخ دادن خطا، state UI چگونه بوده
- در فرمها چه چیزی تایپ شده (معمولاً با ماسک کردن فیلدهای حساس)
ابزارهایی مثل LogRocket یا Sentry Session Replay این قابلیت را فراهم میکنند.
Sentry: Error Monitoring و Performance برای فرانتاند
Sentry یکی از شناختهشدهترین ابزارها برای:
- Error Monitoring
- Performance Tracing
- Session Replay (در نسخههای جدید)
نصب اولیه در پروژه React / Next.js
برای یک اپلیکیشن React/Vite یا CRA، نصب پایهای اینطور است:
bash
و بعد:
ts
در Next.js 13+ معمولاً از SDK مخصوص Next استفاده میشود که config جداگانه دارد، اما ایده مشابه است:
Sentry را زود در lifecycle اپلیکیشن initialize کنید تا همه خطاها را بگیرد.
اضافه کردن Context و User
برای دیباگ بهتر، معمولاً اطلاعات کاربر را هم ست میکنیم:
ts
با این کار، وقتی اروری در پنل Sentry میبینید، دقیقاً میدانید برای کدام کاربر و در چه شرایطی رخ داده.
Capture کردن Errorهای دستی
گاهی خطاها را خودتان مدیریت میکنید ولی همچنان میخواهید در Sentry ثبت شوند:
ts
PostHog: Product Analytics و Event Tracking
PostHog بیشتر روی Product Analytics تمرکز دارد، اما برای Monitoring هم بسیار مفید است:
- Event Tracking
- Funnels و Cohorts
- Feature Flags و A/B Testing
- Web Vitals و Heatmaps (در بعضی پلنها)
نصب ساده در فرانتاند
bash
و سپس:
ts
ثبت Eventها
حالا میتوانید در جاهای مختلف UI، event ثبت کنید:
ts
بعداً میتوانید:
- ببینید چند درصد از کاربرانی که روی CTA کلیک کردهاند، ثبتنام را کامل کردهاند
- بفهمید کدام پلن بیشتر انتخاب شده
Link کردن User با Analytics
برای تحلیل بهتر:
ts
این کار Eventهای یک کاربر را به هم متصل میکند و میتوانید مسیر کامل سفر او را ببینید.
LogRocket: Session Replay و Debug UI
LogRocket تمرکزش روی این است که:
«دقیقاً ببینید کاربر چه چیزی دیده است.»
Session Replay برای سناریوهایی مثل:
- کاربر میگوید «فرم ثبتنام کار نکرد» ولی شما در لاگها چیز خاصی نمیبینید
- UI در یک viewport خاص بههم میریزد
- رفتار یک دکمه یا Modal فقط در ترکیب خاصی از state مشکل دارد
نصب پایه
bash
و در entry:
ts
حالا هر سشن کاربر ضبط میشود و در پنل LogRocket:
- ویدئوی تعامل کاربر
- Network Requests
- Console Logs
- State Redux/Zustand (درصورت ادغام)
را کنار هم میبینید.
ادغام با Sentry
یکی از کاربردیترین ترکیبها:
- Sentry خطا را ثبت میکند
- LogRocket ویدئوی آن سشن را دارد
با ادغام این دو، در Sentry روی خطا کلیک میکنید و مستقیم Session Replay مربوطه در LogRocket را میبینید.
چند الگوی خوب برای پیادهسازی Monitoring در فرانتاند
۱. یک لایهی مجزا برای ابزارهای Observability
بهجای اینکه در همه جای پروژه مستقیم Sentry.captureException یا posthog.capture صدا بزنید، یک لایهی abstraction بسازید:
ts
با این کار:
- در آینده راحتتر میتوانید ابزار را عوض کنید
- در تستها میتوانید این لایه را mock کنید
۲. نمونهگیری (Sampling) منطقی
Sending همهی دادهها برای همهی کاربران همیشه منطقی نیست:
- پرهزینه است
- ممکن است روی پرایوسی و قوانین حریم خصوصی تأثیر بگذارد
برای Eventها، Performance و Session Replay:
- درصدی از کاربران را برای Recording انتخاب کنید (مثلاً ۱۰٪)
- برای صفحات حساس (پرداخت، ثبتنام) سطح مراقبت را بالاتر ببرید
۳. رعایت حریم خصوصی (Privacy)
در زمان فعالسازی ابزارهایی مثل Session Replay:
- فیلدهای حساس (رمز عبور، کارت بانکی، کد 2FA) را ماسک کنید
- IP، Email، Phone را فقط در حد نیاز و مطابق قوانین (مثلاً GDPR) نگه دارید
اکثر ابزارهای حرفهای مثل Sentry، PostHog و LogRocket تنظیمات پیشفرض خوبی برای این موضوع دارند که میتوانید آنها را سفتتر هم بکنید.
جمعبندی
Monitoring و Observability در فرانتاند فقط یک «امکانات اضافی» برای پروژههای بزرگ نیست؛ حتی در پروژههای کوچک هم:
- کمک میکند باگهای Production را سریعتر کشف و حل کنید
- رفتار واقعی کاربران را بهتر بفهمید
- بهجای حدس، بر اساس داده تصمیم بگیرید
ابزارهایی مثل Sentry، PostHog و LogRocket این امکان را میدهند که:
- خطاها، Performance و رفتار کاربر را کنار هم ببینید
- برای هر Issue، تصویر کاملی از چه کسی، کجا، چه زمانی و بعد از چه رفتاری داشته باشید
اگر الان فقط با لاگهای کنسول و چند alert ساده کار میکنید، اضافه کردن یک لایه Monitoring/Observability میتواند جزو بهترین سرمایهگذاریهایی باشد که برای کیفیت محصولتان انجام میدهید. از کوچک شروع کنید (مثلاً فقط Sentry)، بعد کمکم Event Tracking و Session Replay را هم اضافه کنید.
اشتراکگذاری این مقاله
Darvix Team
توسعهدهنده و نویسنده مقالات فنی