نظارت بر عملکرد واکنش

admin4 روز پیش

0 2 خواندن این مطلب 3 دقیقه زمان میبرد

ما همیشه باید تجربیات سریعی را در اختیار کاربران خود قرار دهیم، اما گاهی اوقات چیزی
روند بررسی روابط عمومی ما را طی می کند و کاربران ما شروع به کند شدن کرده اند
تجربه مگر اینکه از ما شکایت کنند، ما اغلب راهی برای دانستن نداریم
همه چیز با آنها بسیار کند پیش می رود. شکایات مصرف کننده سیاست خوبی برای آن نیست
کنترل کیفیت

زیرا ما نمی‌توانیم کاری کنیم که هر کاربر React DevTools را نصب کند و برنامه را نمایه کند
برای ما که آنها با آن تعامل دارند، خوب است اگر بتوانیم به نحوی برخی را دنبال کنیم
از زمان‌های رندر و دریافت آن اطلاعات به سرورهای ما تا بتوانیم
نظارت کنید.

راه حل هایی برای نظارت و اندازه گیری عملکرد وجود دارد
برنامه شما، مهم نیست از چه چارچوبی استفاده می کنید
(Lighthouse CI ویژه است
جالب). با این حال، تیم React یک API به طور خاص برای آن ایجاد کرد
عملکرد اجزای React خود را در تولید اندازه گیری کنید. این کار نمی کند
به اندازه React DevTools به ما اطلاعات می دهد اما به ما می دهد
برخی از اطلاعات مفید برای کمک به شما در شناسایی نقاطی که مشکلات عملکرد وجود دارد
یک دروغ

توجه: برای اینکه همه اینها در تولید کار کنند، باید React را فعال کنید
ساخت پروفیل هزینه اجرای کمی برای این وجود دارد، بنابراین
facebook.com فقط برای زیرمجموعه ای از کاربران کامپایل برنامه پروفایل را ارائه می دهد.
درباره نحوه فعال کردن ساخت پروفایلر از Profile a React App بیشتر بیاموزید
برای عملکرد

در اینجا یک مثال اساسی با استفاده از React آورده شده است
جزء:

App>
	Profiler id="Navigation" onRender={onRenderCallback}>
		Navigation />
	Profiler>
	Main />
App>

را onRenderCallback تابع با آرگومان های زیر فراخوانی می شود:

function onRenderCallback(
	id, // the "id" prop of the Profiler tree that has just committed
	phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
	actualDuration, // time spent rendering the committed update
	baseDuration, // estimated time to render the entire subtree without memoization
	startTime, // when React began rendering this update
	commitTime, // when React committed this update
	interactions, // the Set of interactions belonging to this update
) {
	// Aggregate or log render timings...
}

نکته حائز اهمیت است که مگر اینکه برنامه خود را با استفاده از
react-dom/profiling و scheduler/tracing-profiling این جزء کار نخواهد کرد
چیزی می توانید نحوه تنظیم آن را از پست وبلاگ من یاد بگیرید
برای عملکرد یک برنامه React را نمایه کنید.

از اینجا می خواهید بفرستید onRenderCallback داده ها به ابزار نظارت
(مثلاً مانند Grafana). زیرا رندر مجدد می تواند
خیلی اتفاق افتاده است، من شخصاً پیشنهاد می کنم آنها را گروه بندی کنید و آنها را با هم بفرستید
هر 5 ثانیه یا بیشتر به عنوان مثال:

let queue = []

// sendProfileQueue every 5 seconds
setInterval(sendProfileQueue, 5000)

function onRenderCallback(
	id,
	phase,
	actualDuration,
	baseDuration,
	startTime,
	commitTime,
	interactions,
) {
	queue.push({
		id,
		phase,
		actualDuration,
		baseDuration,
		startTime,
		commitTime,
		interactions,
	})
}

function sendProfileQueue() {
	if (!queue.length) {
		return Promise.resolve()
	}
	const queueToSend = [...queue]
	queue = []
	// here's where we'd actually make the server call to send the queueToSend
	// data to our backend...
	console.info('sending profile queue', queueToSend)
	return Promise.resolve()
}

چیزی که باید در نظر داشت این است که از آنجایی که این در حال تولید است، Reactآیا بهترین تلاش خود را می کند تا هنگام اندازه گیری عملکرد به آن آسیبی وارد نشود (که بسیار کم است
معقول). به همین دلیل، ما در اطلاعاتی که می توانیم به دست آوریم محدود هستیم. و همینطور
احتمالاً می خواهید به صورت استراتژیک قرار دهید اجزای موجود در شما
برنامه با معقول id پایه‌ها تا بتوانید منبع عملکرد را تعیین کنید
راحت تر صادر کند

همچنین توجه داشته باشید که شما می تواند اینها را درج کنید:

App>
	Profiler id="Navigation" onRender={onRenderCallback}>
		Navigation />
	Profiler>
	Profiler id="Main" onRender={onRenderCallback}>
		Main>
			LeftNav />
			Profiler id="Content" onRender={onRenderCallback}>
				Content />
			Profiler>
			RightNav />
		Main>
	Profiler>
App>

در این صورت اگر مجبور به دریافت مجدد رندر، Content و Main
پروفایلر onRenderCallbacks نامیده می شود (نه the Navigation یک). اگر
من پس از آن یک rerend دارم Main تماس خواهد گرفت اما خیر Content یا
Navigation.

در اینجا نمونه ای از شکل داده ها آورده شده است:

{
  id: "Navigation",
  phase: "update",
  actualDuration: 0.09999994654208422,
  baseDuration: 0.3799999540206045,
  startTime: 104988.11499998556,
  commitTime: 104988.45000000438,
  interactions: [ // this is actually a Set, not an array
    {
      __count: 0
      id: 3,
      name: "menu click",
      timestamp: 104978.33499999251,
    }
  ],
}