บันทึกนักพัฒนา: ใช้ Performance Monitoring for web กับ Nuxt.js ก็ต้องทำประมาณนี้
สวัสดีครับ
พอดีว่าช่วงนี้ต้องจับงานด้าน Web app ซะเยอะ ด้วยความที่เราก็ทำ Mobile app มาด้วย ก็เกิดความน้อยใจเล็ก ๆ ว่าของเล่นจาก Firebase ทางฝั่ง Web app นั้น ยังไม่ถูกใจ และยังไม่ดีเท่าฝั่ง Mobile app
พอดีว่านั่งดูงาน Google IO 19 อยู่ในสภาพกึ่งหลับกึ่งตื่น ก็ได้ยินประมาณว่า Now, Firebase Performance Monitoring is available for web. โอ้โห นาทีนั้น ความง่วงทั้งหลายก็ได้มลายหายไป นี่มันว้าววววววววววววววมาก เพราะตอนที่ได้ใช้ Firebase Performance Monitoring บน Mobile app นี่ก็ช่วยเราได้หลายอย่างมาก
มันเป็นเครื่องมือที่ช่วยให้เรารับรู้ได้ว่า ประสิทธิภาพของงานเราเป็นอย่างไร เมื่อไปอยู่ในมือของผู้ใช้ และเมื่อเรารู้ว่าจุดไหนทำงานได้เร็ว ช้า หรือช้ามาก เราก็สามารถนำข้อมูลนี้มาปรับปรุงงานของเราให้ดียิ่งขึ้นไป เจ๋งป่ะล่ะ
สำหรับใครที่ยังไม่ค่อยรู้จัก Firebase Performance Monitoring หรือยังนึกภาพไม่ออกว่าทำอะไรได้บ้าง ดูตัว Feature คร่าวจาก Video นี้ก่อนก็ได้ครับ
หรือหากกำลังมองหาวิธีใช้ Firebase Performance Monitoring กับ Android แนะนำให้ไปอ่านจาก Blog นี้ได้เลยครับ https://medium.com/firebasethailand/%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81-firebase-performance-monitoring-%E0%B8%95%E0%B8%B1%E0%B9%89%E0%B8%87%E0%B9%81%E0%B8%95%E0%B9%88-zero-%E0%B8%88%E0%B8%99%E0%B9%80%E0%B8%9B%E0%B9%87%E0%B8%99-hero-41e11f50b436
จบช่วงขายของ เข้าเรื่องกันดีกว่าครับ
Nuxt.js อยากใช้ Performance Monitoring for web
ถ้าดูจาก Doc ของ Performance Monitoring for web เค้าจะบอกวิธีการติดตั้ง และใช้งานผ่าน Webpack ไว้ด้วย แน่นอนว่าถ้าใช้ Nuxt.js เราใช้ Webpack อยู่แล้ว ไม่มีปัญหาอะไร แต่… แล้วจะไป Init พวก Firebase ตรงไหนดี
OK ถ้า Nuxt.js ของเราเป็น SPA จะทำได้ง่ายหน่อย แต่ถ้าเป็น SSR ละก็… ยาว
เนื่องจากตัว Firebase dependency เองไม่ได้ถูกออกแบบมาให้ทำงานในโหมด SSR ได้ตรง ๆ ดังนั้น ถ้าตัว Project Nuxt.js ของเราเป็น SSR จะต้องเล่นท่ายากนิดนึง ถึงจะใช้ได้ครับ
ฉะนั้น Blog นี้จะเน้นไปที่ การติดตั้ง และใช้งาน Performance Monitoring for web กับ Nuxt.js ในโหมด SSR นะครับ
คำเตือนตัวโต ๆ ตอนนี้ Performance Monitoring for web ยังเป็น Beta อยู่นะครับ
เตรียมตัวกันก่อน
เราเริ่มเตรียมของที่จำเป็นต้องใช้กันก่อนนะครับ
- Firebase project อันนี้ขาดไม่ได้
- Nuxt.js project
- ใจ
- เวลา
ปล. ผมใช้ npm นะครับ
ลงมือทำ
Add Firebase dependency
เมื่อเรามี Firebase project กับ Nuxt.js project แล้วขั้นแรกเราต้องเพิ่ม Firebase dependency เข้าไปใน Nuxt.js project ด้วยคำสั่ง
npm i firebaseตรวจดูในไฟล์ package.json ถ้าใน dependencies มี firebase ขึ้นมา ก็เป็นอันใช้ได้ครับ
Create Firebase plugin for Nuxt.js and config Firebase instance (++ inject Firebase Performance instance in $root & context)
ต่อมาเราต้องสร้าง ไฟล์ Plugin สำหรับ Nuxt.js ขึ้นมา โดย ให้สร้างไฟล์ ชื่อว่า firebase.plugin.js ภายใน Folder plugins ครับ
จากนั้น ให้ Copy & Paste code นี้ได้เลยครับ แต่อย่าลืมแก้ Firebase config ให้เป็นของตัวเองนะครับ
อธิบาย -
บรรทัดที่ 2 กับ 5 คือการ Import Firebase dependency เข้ามา
บรรทัดที่ 8 if block เพื่อป้องกันการ Init Firebase instance ซ้ำ
บรรทัดที่ 21 สั่ง Init Firebase performance instance ขึ้นมา
บรรทัดที่ 22 สั่ง inject Firebase performance instance เข้าไปที่ $root จะได้เอา instance ไปใช้ที่อื่นได้ด้วยครับ
Register Firebase plugin on nuxt.config.js
หลังจากที่เราสร้างไฟล์ Plugin แล้ว เราต้องเอา Plugin ไป Register ที่ไฟล์ nuxt.config.js ครับ โดยให้มองหา Property plugins นะครับ
...
plugins: [{ src: '~/plugins/firebase.plugin.js', ssr: false }],
...สังเกตุว่า เราสั่งให้ Plugin ของเราทำงานแค่ Client อย่างเดียว ผ่าน Option ssr: false นะครับ
OK Firebase Performance, You should work!
มาถึงจุดนี้ ถ้าไม่มีปัญหาอะไร ให้ทำใจดี ๆ แล้วลองเปิดหน้าเว็บ แล้วดูที่ Network Monitoring tool ของ Broswer ที่ใช้ ถ้ามี Network call ไปที่ firebaselogging.googleapis.com หน้าตาประมาณแบบนี้
ก็เย่! สำเร็จแล้วครับ เราติดตั้ง และใช้งานสำเร็จแล้ว
ขั้นตอนต่อไปคือ รอ………
รอไปจนกว่า Stat จะขึ้นใน Firebase console ครับ ตรงนี้ Doc บอกว่าใช้เวลาประมาณ 12 ชั่วโมงครับ
Firebase Performance in Advance (traces ,metrics and attributes)
ขอย้อนกลับไปที่เรื่อง Plugin นะครับ ที่เรา Inject Firebase performance instance เข้าไปที่ $root ทิ้งไว้
เราก็เอา ตัว instance นี้แหละออกมาใช้งาน Custom trace ต่อ ดังตัวอย่างประมาณนี้ครับ
...
const perf = this.$FirebasePerfconst trace = perf.trace('customTraceName');
trace.start();
// code that you want to trace
trace.stop();
...
หรือจะทำ Custom metric ด้วยก็ยังได้
async function getInventory(inventoryIds) {
const perf = this.$FirebasePerf
const trace = perf.trace('inventoryRetrieval');
// Tracks the number of IDs fetched (the metric could help you to optimize in the future)
trace.incrementMetric('numberOfIds', inventoryIds.length);
// Measures the time it takes to request inventory based on the amount of inventory
trace.start();
const inventoryData = await retrieveInventory(inventoryIds);
trace.stop();
return inventoryData;
}ส่วนเรื่อง Attributes นั้น แนะนำให้ดูจาก Doc ตรง ๆ ได้เลยครับ
Firebase Performance Stat
เมื่อเราเข้าใจความรู้สึกของแฟนทีม Liverpool แล้ว (รอคอย อย่างอดทน) เราก็จะได้เห็น Stat ปรากฏบนหน้า Console ซะที
สรุป
ของดี มีประโยชน์ ใช้ไม่ยาก แต่ต้องใช้ให้เป็น
ถ้าเราวาง Custom trace ไว้ดีพอ ข้อมูลที่ได้จะมีประโยชน์กับเรามากครับ แต่ถ้าไม่ได้เพิ่ม Custom trace ไว้เลย ข้อมูลที่ได้มา ก็อาจจะไม่มีประโยชน์มากนักครับ เพราะจากตัวข้อมูลที่ Firebase Performance เก็บมาให้อัตโนมัติ ก็ไม่ได้มีประโยชน์มากมากนัก เนื่องจากพวก Performance ของตัว Nuxt.js มีคนอื่นดูแลให้อยู่แล้วครับ
References
Performance Monitoring for web document
Nuxt.js Plugin
