Name of the widget for logging and error context
Error state management interface
const MyWidget: React.FC<Props> = ({ data }) => {
const { error, hasError, handleError, clearError } = useWidgetError('MyWidget');
const [isLoading, setIsLoading] = useState(false);
const loadData = async () => {
setIsLoading(true);
clearError();
try {
const result = await fetchData();
// Process result...
} catch (err) {
handleError(err);
} finally {
setIsLoading(false);
}
};
if (hasError) {
return <ErrorMessage message={error?.message} retry={loadData} />;
}
return <div>Widget content</div>;
};
Custom hook for consistent widget error handling
Business Perspective
Provides standardized error management across all widgets, ensuring consistent user experience and reliable error reporting for operational monitoring and debugging. 🛡️
Technical Perspective
Encapsulates error state management with automatic logging and type-safe error handling. Provides a consistent API for setting, clearing, and handling errors across all widget components.