Snippet

Handling Asynchronous Action Errors with Try-Catch

Handling errors during asynchronous operations keeps React applications stable. Wrapping an await call inside a try-catch block captures thrown exceptions and stores error messages in component state for user display.

snippet.js

javascript

import { useState } from 'react';
 
export function SaveForm() {
  const [errorMessage, setErrorMessage] = useState(null);
 
  const handleSave = async () => {
    try {
      setErrorMessage(null);
      await Promise.reject(new Error('Network request failed'));
    } catch (err) {
      setErrorMessage(err.message);
    }
  };
 
  return (
    <div>
      <button onClick={handleSave}>Save</button>
      {errorMessage && <p role="alert">{errorMessage}</p>}
    </div>
  );
}

react

Breakdown

try { setErrorMessage(null); ... }

Clears any existing error messages before executing the asynchronous operation.

catch (err) { setErrorMessage(err.message); }

Catches any thrown exception and stores its message in state to alert the user.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Handling Asynchronous Action Errors with Try-Catch

Related