# Lwc Error Boundaries

> Isolate component errors so one failure does not blank an entire page using errorCallback and graceful fallbacks. NOT for server-side Apex exception design — use apex/exception-handling.

- Skill: `pranavnagrecha/lwc-error-boundaries` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds add pranavnagrecha/lwc-error-boundaries`
- Raw SKILL.md: https://api.skillmd.com/api/skills/pranavnagrecha/lwc-error-boundaries/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: PranavNagrecha (https://skillmd.com/u/pranavnagrecha)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/pranavnagrecha/lwc-error-boundaries

---


# LWC Error Boundaries

LWC has a lifecycle hook `errorCallback(error, stack)` on any parent that catches errors from child lifecycle hooks and renders. Wrapping tiles/widgets in a reusable boundary component keeps one failure from blanking the whole dashboard. This skill shows the canonical `c-error-boundary` implementation with a slot, a hasError reactive flag, a fallback UI, and a telemetry wire so production LWC failures are observable instead of invisible, while keeping boundaries shallow enough that only the offending widget degrades rather than the entire page.

## Adoption Signals

Dashboards with multiple independent widgets; record home pages with many components.

## Recommended Workflow

1. Create `c-error-boundary` with a `<slot>` and a `hasError` reactive.
2. Implement `errorCallback(error, stack) { this.hasError = true; this.logToTelemetry(error, stack); }`.
3. Template: if hasError, render fallback ('This section is unavailable'); else slot.
4. Wrap each risky widget: `<c-error-boundary><c-risky-widget></c-risky-widget></c-error-boundary>`.
5. Telemetry: send to custom object or external logger; include component name + reduced error shape.

## Key Considerations

- errorCallback catches only lifecycle errors; not async rejections — handle those in the widget.
- Don't swallow silently — log to telemetry.
- Fallback UI should be minimal (no deps that can also fail).
- Keep the boundary shallow — don't wrap the entire app.

## Worked Examples (see `references/examples.md`)

- *Dashboard tile isolation* — 6-tile sales dashboard
- *Telemetry wire* — Need visibility into prod errors

## Common Gotchas (see `references/gotchas.md`)

- **Async errors uncaught** — Promise rejection doesn't hit errorCallback.
- **Deep wrapping** — App-level boundary blanks everything.
- **Fallback with deps** — Fallback also fails.

## Top LLM Anti-Patterns (full list in `references/llm-anti-patterns.md`)

- No error boundary on dashboards
- Swallowing errors silently
- Wrapping the entire app

## Official Sources Used

- Lightning Web Components Developer Guide — https://developer.salesforce.com/docs/platform/lwc/guide/
- Lightning Data Service — https://developer.salesforce.com/docs/platform/lwc/guide/data-wire-service-about.html
- LWC Recipes — https://github.com/trailheadapps/lwc-recipes
- SLDS 2 — https://www.lightningdesignsystem.com/2e/