---
title: Error boundary
url: https://citry.dev/examples/error-fallback/
description: "Show fallback content when one part of a page cannot render."
---
# Error boundary
A render error shows a fallback instead of breaking the page.
### Component
````citry
"""A widget that can fail on demand, used to demonstrate error boundaries."""
from typing import Any
from citry import Component
class FlakyWidget(Component):
"""Renders normal content, or raises during render when ``fail`` is true."""
class Kwargs:
label: str
fail: bool = False
class Slots:
pass
template = """
{{ label }}
Loaded cleanly.
"""
css = """
.flaky {
padding: 0.75rem 1rem;
border: 1px solid #2da44e;
border-radius: 8px;
background: #effef1;
}
.flaky__ok {
margin: 0.35rem 0 0;
color: #1a7f37;
}
"""
def template_data(self, kwargs: Kwargs, slots: Slots) -> dict[str, Any]:
if kwargs.fail:
# Raised during render so the surrounding catches it.
raise ValueError("FlakyWidget was told to fail")
return {"label": kwargs.label}
````
### Page
````citry
"""Standalone page showing two error boundaries side by side."""
from citry import Component
class ErrorFallbackPage(Component):
"""Two FlakyWidgets, each in its own boundary: one healthy, one failing."""
class Kwargs:
pass
class Slots:
pass
template = """
Error fallback example
Both boundaries rendered
"""
````
[Open the live result](/examples/error-fallback/demo/)