Loading...
Loading...
Client SLOs, error budgets, RUM, graceful degradation, circuit breakers, and kill switches.
Module 19 · Frontend Reliability & SLOs
Client-side SLOs, error budgets, RUM, graceful degradation, circuit breakers, incident response, per-remote error boundaries, and kill switches.
Client-side SLOs, error budgets, RUM instrumentation, graceful degradation, client circuit breakers, incident response playbooks, per-remote error boundaries, and kill switches.
Frontend reliability extends observability with user-facing SLOs, error budgets, and client-side failure handling — because users experience your app in browsers, not Kubernetes pods.
This module covers client SLIs (LCP, INP, error rate), error budget release policies, RUM instrumentation, graceful degradation, client circuit breakers, incident playbooks, MFE error boundaries, and kill switches.
Staff candidates define what good looks like in production, segment SLOs by region and device, and design mitigations before incidents happen.
Builds on Observability (Module 13) with frontend-specific operational depth.
Frontend engineers own client-side reliability in production — not just shipping features. Staff interviews expect SLO definitions, error budget policies, and failure mitigation patterns that keep users productive when APIs and CDNs fail.
Client-side SRE — error budgets, RUM, and graceful failure.
Frontend reliability extends observability with user-facing SLOs, error budgets, and client-side failure handling — because users experience your app in browsers, not in your Kubernetes cluster.
Define what good looks like for real users.
| SLI | Example SLO | Measurement |
|---|---|---|
| LCP | p75 < 2.5s on 30-day rolling window | web-vitals RUM library |
| INP | p75 < 200ms | PerformanceObserver |
| Client error rate | < 0.1% of sessions | Sentry/Datadog RUM |
| API success rate (client) | > 99.5% of fetch calls | Custom RUM metric |
| Successful page load | > 99.9% (no white screen) | Error boundary + onerror |
Staff depth
Balance velocity against reliability.
If SLO is 99.9% monthly, error budget = 0.1% = ~43 minutes downtime per month. When budget is exhausted, freeze feature releases and focus on reliability.
Production truth beats Lighthouse lab scores.
import { onLCP, onINP } from "web-vitals"; onLCP((metric) => { rum.send({ name: "LCP", value: metric.value, route: location.pathname }); });
Partial functionality beats a white screen.
| Failure | Degraded UX |
|---|---|
| Recommendations API down | Show cached feed; hide reco strip |
| Search unavailable | Disable search bar; show browse categories |
| Payment gateway timeout | Save cart; offer retry + support link |
| Offline | Service Worker serves shell; queue mutations |
Stop retry storms when backends fail.
// Conceptual client breaker if (breaker.isOpen("/api/feed")) { return <StaleFeedCache />; } try { const data = await fetchFeed(); breaker.recordSuccess("/api/feed"); return <Feed data={data} />; } catch { breaker.recordFailure("/api/feed"); return <StaleFeedCache />; }
Frontend on-call playbooks.
Isolate failures in MFE architectures.
Staff pattern
Disable broken features without redeploying.
Frontend reliability at staff depth.
Frontend reliability and SLO interview questions.
Test your understanding — 5 questions
Global LCP p75 is comfortably inside your 2.5s SLO, yet support tickets from Southeast Asia keep rising. What is the most likely diagnostic gap?