Learn Nuxt - Observability & Monitoring

#Introduction

Once an application is live in production, the biggest question is no longer "is it running", but "is it running well". Episode 22 covers observability and monitoring: how to know real performance, catch errors before users are affected, and act quickly when incidents happen.

Observability is the ability to ask "why" from the outside — why a page is slow, why there's an error, why users abandon the checkout flow. The answers come from three sources: performance metrics, error tracking, and real user data.

#Monitoring Frontend and Server Performance

#The Metrics That Matter

On the frontend side, monitor metrics like:

• Largest Contentful Paint: how quickly the main content appears.
• First Input Delay: how quickly the application responds to the first interaction.
• Cumulative Layout Shift: how much the layout shifts while loading.

On the server side, monitor API response time, status codes, and error rates. The two sides affect each other — a slow server drags frontend metrics down too.

#Server Logs and Health Endpoints

Nitro provides logs and APIs for monitoring. Create a health endpoint for monitoring platforms:

Endpoint kesehatan

export default defineEventHandler(() => {
  return {
    status: "ok",
    waktu: new Date().toISOString(),
  }
})

The /api/health endpoint is polled periodically by monitoring platforms to make sure the application is alive. It can also be extended to check external dependencies.

#Error Tracking with Sentry

#Setting Up Sentry for Nuxt

Sentry is one of the most popular error tracking platforms. Install its official module:

npm install @sentry/nuxt

Configure it with the DSN from your Sentry project:

Konfigurasi Sentry

export default defineNuxtConfig({
  modules: ["@sentry/nuxt/module"],
  sentry: {
    dsn: process.env.SENTRY_DSN,
    tracesSampleRate: 1.0,
  },
})

SENTRY_DSN is taken from the environment. With this module, errors on both the server and the client are automatically reported to Sentry complete with stack traces and context.

#Capturing Errors Manually

Besides automatic errors, you can report important events:

Laporkan error manual

import * as Sentry from "@sentry/nuxt"
 
try {
  await buatPesanan(data)
} catch (e) {
  Sentry.captureException(e)
}

Sentry.captureException(e) sends a caught error to the Sentry dashboard. Make sure not to report sensitive data — clean up unnecessary information before sending.

#Real User Monitoring and Analytics

#Monitoring Real Users

Real User Monitoring measures performance from the perspective of real users, not a lab. Sentry and many other providers offer this. The data collected: page load times, interactions, and user journeys.

#Analytics for Decisions

Analytics provides behavioral insights: which pages are most visited, where users come from, and where they drop off:

Kirim event analytics

function catatEvent(nama: string) {
  // kirim event ke provider analytics
  window.dataLayer?.push({ event: nama })
}

window.dataLayer.push({ event: nama }) is a common pattern for sending events to analytics tools. Use these insights to prioritize fixes — focus on the most frequent and most problematic flows.

#User Privacy

Mind privacy rules: inform users about the tracking you've installed, respect cookie preferences, and don't collect data without consent. Your local regulations determine the details of the practice.

#Production Support and Incident Handling

#An Incident Playbook

Incidents will happen. What sets professional teams apart is their readiness:

• Detection: monitoring alerts before users complain.
• Diagnosis: logs and error tracking narrow down the cause.
• Response: a quick rollback or hotfix.
• Learning: document the root cause and prevent recurrence.

Set up a dedicated communication channel and make sure there's quick access to production logs.

#Fast Rollback

Because Nuxt deployments produce versioned artifacts, rollback is generally as easy as reverting the version on the hosting platform:

npx nuxi info

npx nuxi info shows the running application version — useful for matching bug reports to the deployed version. Keep a version changelog so every incident can be tied to the change that triggered it.

#Conclusion

Episode 22 makes your application observable: frontend and server performance monitoring, error tracking with Sentry, real user monitoring and analytics for real insights, and an incident playbook that keeps the team ready to act fast.

Key takeaways:

• Monitor frontend and server metrics together.
• The /api/health endpoint provides an alive signal for monitoring platforms.
• Sentry captures server and client errors with stack traces.
• Use captureException to report caught errors.
• Real User Monitoring measures real user experience, not lab conditions.
• Prepare an incident playbook: detect, diagnose, respond, and learn.

In the next episode, episode 23, we will discuss stable modern features and future trends — Nuxt's stable features like the app directory structure and Nitro, Vue fullstack development trends, the modules and Nuxt ecosystem landscape, and strategies for keeping your skills relevant.