Monitoring Your Production Vue Apps

on YouTube ↗24m

" summary

Code and screenshots explain concrete steps: instrument Sentry's open source Vue SDK, capture Web Vitals and custom marks with performance.getEntries and PerformanceObserver, and export timing and asset data to a DB or spreadsheet. Examples include GitHub Actions and Vite/Webpack plugins for bundle reports, payload size measurements, sampling and cardinality strategies, and a recorded 29% bundle reduction. Also covers how to correlate browser entries with backend traces for end-to-end visibility.

AI-written summary · about

" chapters (10)

1. 0:00Intro
2. 1:06Monitoring
3. 2:08Mindset shift
4. 2:53Production
5. 4:40Inputs
6. 5:55Finding your performance problems
7. 11:02High level indicators
8. 17:16Browser performance entries
9. 18:26Looking at the Vue docs
10. 20:50What to look at next

" related talks

• 07mIdentify Issues and Prevent Slowdowns in your Vue.JS AppsSimon Zhong · Vue.js London Live 2021
• 09mHow to interpret Vue ComponentsLukas Stracke · Vueconf.US 2022
• 21mTesting Vue AppsEdd Yerburgh · VueConf US 2018
• 21mVue JS Best PracticesFatih Acet · Amsterdam JSNation Conference 2018
• 40mVue.js - developer friendly, fast and versatileAlexander Schwartz · Jfokus 2018
• 28mBuilding Test Strategy for Vue.js applicationAnastasiia Dragich · Frontend Love Eindhoven 2019
• 26mVue.js In Practice at OptoroAndrew Krawchyk · VueConf US 2019
• 01h 31mSecure Vue appIvan Kyvatskyi · Vue.js fwdays'20 online conference