Learning Astro - Observability & Monitoring

#Introduction

Once the site is live, the question shifts from "is it running?" to "is it running well?". Episode 22 covers observability and monitoring: how to know real-world page performance, catch errors before users complain, and monitor build and deployment health.

A static site may have no server to remember, but its users and their browsers can still be observed. Core Web Vitals, JavaScript errors, and deployment metrics are the signals you should watch.

This episode builds a monitoring system that lets you know your site is healthy — without waiting for user complaints.

#Monitoring Page Performance and User Experience

#Real User Monitoring (RUM)

The Lighthouse score in episode 15 only measures on your machine. Real User Monitoring measures the performance users actually experience — from their browsers, on their networks. This data is collected by sending Web Vitals to an analytics service.

Example of sending Vitals metrics from Astro with a custom integration (the pattern from episode 18):

Kirim Web Vitals dari integrasi

import type { AstroIntegration } from "astro";
 
export function webVitals(): AstroIntegration {
  return {
    name: "web-vitals",
    hooks: {
      "astro:config:done": ({ injectScript }) => {
        injectScript("page", `
          new PerformanceObserver((list) => {
            for (const entry of list.getEntries()) {
              navigator.sendBeacon("/api/vitals", JSON.stringify(entry));
            }
          }).observe({ type: "largest-contentful-paint" });
        `);
      },
    },
  };
}

The code above observes the largest-contentful-paint event and sends its value with navigator.sendBeacon — real performance metrics now flow to your backend.

#Monitoring Quality in the Field

With RUM data, you can answer: is mobile LCP on slow networks exceeding 2.5 seconds? Is there an area with poor INP? The answers become the basis for the next optimization — no more guessing.

#Error Reporting with Client-Side Analytics

#Catching JavaScript Errors

Errors in hydrated components can break interactions invisibly. Install global error reporting:

Menangkap error global

window.addEventListener("error", (event) => {
  navigator.sendBeacon("/api/error", JSON.stringify({
    message: event.message,
    file: event.filename,
    line: event.lineno,
  }));
});

The error listener sends error details to an endpoint. With this reporting, errors that were previously invisible become actionable data.

#Error Tracking Services

As an alternative to writing your own, services like Sentry provide ready-to-use SDKs with source maps, grouping, and alerts. For serious production, these services save a lot of time — the integration can also be wrapped as an Astro integration.

#Tracking Build and Deployment Metrics

#Recording Build Metrics

With the astro:build:done hook, you can record build health:

Catat metrik build

"astro:build:done": ({ pages, dir }) => {
  const ukuranMb = dir.statSync
    ? 0
    : 0;
  console.log(`Halaman dibangun: ${pages.length}`);
}

A more useful approach: save a report of page count, dist/ size, and build duration to a file or telemetry service. The data trend shows whether the project is growing healthily or bloating.

#Deployment Metrics

Record the time and status of every deployment — from CI or the hosting platform. If builds start slowing down, this data helps find the cause: more content? Swollen dependencies? Episode 19 already set up the pipeline; now you just add metric recording.

#Production Support and Incident Response

#Runbooks for Incidents

An incident is not a matter of "if", but "when". Prepare a runbook: a document with the steps to take when a problem occurs — how to roll back a deployment, how to check cache headers, and who to contact. A runbook turns chaos into procedure.

#Simple Procedures

For an Astro site, common incidents and their solutions:

Halaman 404 mendadak  →  cek build terakhir dan rollback
Performa menurun      →  cek bundle dan gambar (episode 15)
Konten lama muncul    →  cek cache header dan invalidasi CDN

Document the diagnostic steps for every incident that has occurred. A living runbook grows more complete over time.

#Alerts That Are Useful

Set up alerts only for things that need action: availability down, sharply rising error rates, or steadily worsening Web Vitals. Too many alerts make the team numb and ignore everything.

#Conclusion

Episode 22 builds a monitoring system for your Astro site: Real User Monitoring for real performance, client-side error reporting, build and deployment metric recording, and runbooks and procedures for production incidents.

The key takeaways:

• RUM measures real user performance, not just lab results.
• Send Web Vitals with navigator.sendBeacon and PerformanceObserver.
• Report JavaScript errors to a tracking service like Sentry.
• Record build and deployment metrics as a health trend.
• Prepare a runbook for incidents and rollbacks.
• Set alerts only for things that truly need action.

In the next episode 23 — the final episode — we will cover stable modern features and future trends: Astro's latest stable features, trends in content-focused web development, the community ecosystem and tools, and strategies for keeping your Astro skills relevant going forward.