Learn ReactJS - Observability & Monitoring

#Introduction

A deployed app doesn't stop needing attention. After launch, you need to know: is the page fast, are users hitting errors, and where should problems be looked for. That's the job of observability. Episode 22 equips you with the metrics and tools to answer these questions.

We cover frontend error logging and performance metrics, Core Web Vitals with synthetic and real user monitoring, crash reporting with Sentry, then user experience analytics and performance budgets.

#Frontend Error Logging and Performance Metrics

#Catching Global Errors

Browser errors can slip past try-catch. Register global handlers for runtime errors and failed promises:

Global error handlers

window.addEventListener("error", (event) => {
  console.error("Error global:", event.message)
})
 
window.addEventListener("unhandledrejection", (event) => {
  console.error("Promise gagal:", event.reason)
})

window.addEventListener("error", ...) catches unhandled errors anywhere, while unhandledrejection catches promises that fail without a catch. In production, send this data to a reporting service instead of only the console.

#The Performance API

Browsers provide APIs to measure render phases:

Measure render phases

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries()
  console.log("Metrik:", entries.map((e) => e.name))
})
observer.observe({ type: "paint", buffered: true })

PerformanceObserver with the paint type reports First Paint and First Contentful Paint times. Metrics like these feed an observability dashboard.

#Web Vitals, Synthetic Monitoring, and RUM

#Core Web Vitals

Core Web Vitals are Google's three metrics for user experience: LCP for main content render time, INP for interaction responsiveness, and CLS for layout shift. Measure them via web-vitals:

npm install web-vitals

Send web vitals

import { onLCP, onINP, onCLS } from "web-vitals"
 
function kirimMetrik(metrik) {
  console.log(metrik.name, metrik.value)
}
 
onLCP(kirimMetrik)
onINP(kirimMetrik)
onCLS(kirimMetrik)

onLCP(kirimMetrik) calls the callback when the LCP value is measured, and likewise for INP and CLS. Send these values to analytics to see the performance distribution across all users.

#Synthetic vs Real User Monitoring

Synthetic monitoring runs scripts from certain locations periodically to measure performance and availability. Real user monitoring (RUM) collects metrics from actual users. Synthetic is consistent and easy to compare; RUM reflects the real conditions of users' devices and networks. Healthy production uses both.

#Crash Reporting with Sentry or LogRocket

#Sentry Integration

Sentry collects errors, stack traces, and user context in a single dashboard. Integration in React:

npm install --save @sentry/react

Initialize Sentry

import * as Sentry from "@sentry/react"
 
Sentry.init({
  dsn: "https://contoh@ingest.sentry.io/project",
  environment: "production",
})
 
Sentry.captureException(new Error("Contoh error"))

Sentry.init({...}) activates reporting to a Sentry project; captureException sends an error manually. Combine it with the ErrorBoundary from @sentry/react so component render errors are also recorded. LogRocket is an alternative that records user sessions, so bugs can be replayed like video.

#Don't Log Everything

Too many logs drown the signal in noise. Log errors with context, metrics with aggregation, and avoid logging sensitive data like tokens or passwords. Filter levels in production: errors and warnings, not debug.

#User Experience Analytics and Performance Budgets

#Performance Budgets

A performance budget is a limit that must not be exceeded, for example a maximum 170 kB gzip bundle for initial load or an LCP under 2.5 seconds. Enforcement can happen in CI:

npm run build
du -sh dist/assets/*.js | sort -h

du -sh dist/assets/*.js shows the size of each chunk. If it exceeds the budget, the team must split the code — the step you learned in episodes 14 and 19.

#Analyzing User Experience

Combine technical metrics with UX data: conversion funnels, time on page, and user complaints. Metrics not connected to business goals are just numbers. Start with a few key metrics, then expand gradually.

#Conclusion

Episode 22 taught you how to see an app that's already running: catching global errors, measuring Core Web Vitals, comparing synthetic and real user monitoring, integrating crash reporting with Sentry, and enforcing performance budgets in CI.

Key takeaways:

• Catch global errors via error and unhandledrejection.
• Core Web Vitals: LCP, INP, and CLS measure the real experience.
• Synthetic monitoring is consistent; RUM reflects real users.
• Sentry collects crashes with context; LogRocket records sessions.
• Don't over-log and avoid sensitive data.
• Performance budgets protect speed from regression.

In episode 23, the final episode, we'll cover stable modern features & future trends — the latest stable React features like concurrent rendering and server components, the Remix, Next.js, and React Native ecosystem, where frontend architecture is heading, and strategies for keeping your skills future-proof.