CodePark/ questions / Monitoring, errors & rollout
START PRACTICINGPRACTICE
Frontend question · Frontend system design › Monitoring, errors & rollout

What should a frontend monitoring setup cover in production?

It should cover four areas: errors, real-user performance, API health and product signals.

Error tracking: capture these errors:

  • uncaught exceptions
  • unhandled promise rejections
  • errors caught by error boundaries

Upload source maps so stack traces are readable. Attach the release version, the route, the browser, and breadcrumbs (a list of the user's recent actions). Group errors, and alert on new or spiking errors per release.

Real user monitoring (RUM): collect data from real users' browsers. Collect Core Web Vitals (Google's main loading, responsiveness and layout-stability metrics) and custom timings. Examples of custom timings are time to first feed item and search latency. Slice the data by page, device class, country and release. Lab tests miss what real devices and networks do.

Network and API health: track failed requests and latency as the client sees them. Include request ids to match them with backend logs.

Product signals: track key funnel events. Then a release that breaks checkout shows up as a drop in conversion, even without an exception.

All of it should:

  • scrub PII (personally identifiable information, like names and emails)
  • sample high-volume events
  • send with sendBeacon or fetch with keepalive, so events survive the page unloading
  • Track errors with source maps and release tags.
  • Use RUM to collect Web Vitals and custom timings from real users.
  • Track client-side API errors with request ids.
  • Watch business funnel metrics, like checkout conversion.
  • Scrub personal data, sample events, and send them with sendBeacon.