---
tags: zeta-dom-react
---

# `useErrorHandler`

==Since `v0.3.2`==

Error handler provides an event-based mechanism to handle errors from async operation and user actions.

function Component() {
    const [data, state] = useAsync(() => { /* ... */ });
    const errorHandler = useErrorHandler(state);
    
    useEffect(() => {
        return errorHandler.catch(err => {
            // return a value indicating the error is handled
            // won't propagate to other callbacks or parent elements
            return true;
        });
    }, [errorHandler]);

    return (<div ref={errorHandler.ref}>{/* ... */}</div>);
}

See [Handling specific errors](/nnXnr6gmQGmETp1xD-xeKA) for catching errors by condition.

## Emit error

==Since `0.4.4`==

function Component() {
    const errorHandler = useErrorHandler(state);
    
    return (
        <div ref={errorHandler.ref}>
            <button onClick={() => errorHandler.emit(new Error())}>Send</button>
        </div>
    );   
}