ErrorBoundary
Catch and handle component errors within the Stream Deck rendering tree.
ErrorBoundary is a standard React error boundary that catches errors in its child tree and renders a fallback.
Import
import { ErrorBoundary } from "@fcannizzaro/streamdeck-react";Props
interface ErrorBoundaryProps {
fallback?: ReactNode;
onError?: (error: Error, errorInfo: ErrorInfo) => void;
children: ReactNode;
}| Prop | Description |
|---|---|
fallback | React node to render when an error is caught. Default: red background with "Error" text. |
onError | Callback fired when an error is caught, receives the error and React error info. |
Example
function SafeKey() {
return (
<ErrorBoundary fallback={<ErrorFallback />}>
<RiskyComponent />
</ErrorBoundary>
);
}
function ErrorFallback() {
return (
<div
style={{
width: "100%",
height: "100%",
background: "#b71c1c",
alignItems: "center",
justifyContent: "center",
}}
>
<span style={{ color: "white", fontSize: 14 }}>Error</span>
</div>
);
}Default Fallback
If no fallback prop is provided, the boundary renders a red #b71c1c background with white "Error" text centered.
Root Error Boundary
Every action root is automatically wrapped in an error boundary by the library. If a component throws, the key shows a red error indicator and the error is logged via console.error. The plugin continues running -- other action instances are unaffected.
You can customize root-level error handling via the onActionError callback in createPlugin.
See also Error Handling for the full error handling guide.