Learn Vue - Observability & Monitoring

#Introduction

A deployed application isn't finished — that's where the real work begins. Without observability, you only know an application is running when users report it, and slow response times are only felt without data.

Episode 22 covers observability for Vue: frontend performance monitoring, client-side error tracking with Sentry, real user monitoring and analytics, plus how to handle incidents and provide production support.

#Frontend Performance Monitoring

#Core Web Vitals

The metrics people care most about are LCP for render speed, INP for responsiveness, and CLS for visual stability. Measure them with the Web Vitals API:

Mengukur metrik

import { onCLS, onINP, onLCP } from "web-vitals";
 
onCLS((nilai) => sendKeServer("cls", nilai.value));
onINP((nilai) => sendKeServer("inp", nilai.value));
onLCP((nilai) => sendKeServer("lcp", nilai.value));

onLCP((nilai) => ...) reports the metric every time a user opens the page. Send it to an analytics server so performance shows up as a trend, not a guess.

#Error Tracking with Sentry

#Install and Initialize

Sentry captures errors from the browser and shows them in a dashboard:

npm install @sentry/vue

Inisialisasi Sentry

import * as Sentry from "@sentry/vue";
 
Sentry.init({
  app,
  dsn: "https://kunci@sentry.example.com/1",
  environment: "production",
  tracesSampleRate: 0.1,
});

Sentry.init accepts the Vue app instance, DSN, and environment. tracesSampleRate controls how often traces are sent — 0.1 means ten percent.

#Capturing Component Errors

Errors inside components can be caught and reported:

onErrorCaptured

import { onErrorCaptured } from "vue";
import * as Sentry from "@sentry/vue";
 
onErrorCaptured((error) => {
  Sentry.captureException(error);
  return false;
});

onErrorCaptured((error) => ...) catches errors from child components and sends them to Sentry. Returning false stops propagation so the logs aren't flooded.

#Real User Monitoring and Analytics

#Measuring Real Experiences

RUM measures real user experiences, not simulated results. Record important events like navigation, clicks, and form errors:

Event analytics

function track(event, data = {}) {
  navigator.sendBeacon("/api/analytics", new Blob([
    JSON.stringify({ event, data, url: location.pathname }),
  ]));
}

navigator.sendBeacon(...) sends analytics data asynchronously without delaying the page unload. Good for events like login, checkout, or user errors.

#Separating Metrics from Logic

Wrap tracking in a single module so it doesn't get scattered:

src/observability/sentry.js
src/observability/rum.js
src/observability/track.js

Each observability capability has its own file. Components just call track(...) without knowing the implementation details.

#Production Support and Incident Handling

• Set incident priorities: how many users are affected and how severe it is.
• Use severity levels when reporting errors: info, warning, and fatal.
• Prepare a runbook: diagnostic steps for frequently occurring incidents.
• Connect errors with context: app version, browser, and user steps.
• Review error trends regularly, not only when an incident happens.

#Summary

Episode 22 made your application observable: Core Web Vitals for performance, Sentry for error tracking, real user monitoring for real experiences, and practices for production support and incident handling.

Key takeaways:

• Measure LCP, INP, and CLS with Web Vitals.
• Sentry captures and displays client-side errors.
• tracesSampleRate controls trace volume.
• onErrorCaptured reports errors from components.
• sendBeacon sends analytics without delaying unload.
• Never log sensitive data.

In the next episode 23, we close the series with stable modern features and future trends — stable Vue 3 features like Teleport and Suspense, ecosystem trends around Vite, Pinia, and Nuxt, future-proof patterns, and strategies for keeping your skills relevant.