Cómo solucionar el error Unhandled Promise Rejection en React y Async/Await

La Solución Paso a Paso

1. 1

   Paso 1: Capturar errores en funciones async/await con try...catch...finally

   La causa más común es invocar un método asíncrono sin interceptar posibles fallos. Modifica tus controladores de eventos o funciones de consulta:

   JAVASCRIPT Copiar

   // ❌ INCORRECTO: Si fetch o res.json() falla, la promesa colapsa sin control
   const handleFetchData = async () => {
     const res = await fetch('/api/user-data');
     const data = await res.json();
     setUser(data);
   };
   
   // ✅ CORRECTO: Captura limpia con actualización de estado de error
   const handleFetchData = async () => {
     setLoading(true);
     setError(null);
     try {
       const res = await fetch('/api/user-data');
       if (!res.ok) {
         throw new Error(`HTTP Error: ${res.status} ${res.statusText}`);
       }
       const data = await res.json();
       setUser(data);
     } catch (err) {
       console.error('Fallo al obtener datos del usuario:', err.message);
       setError(err.message || 'Error de conexión');
     } finally {
       setLoading(false);
     }
   };
   

2. 2

   Paso 2: Manejar correctamente Promesas dentro de useEffect

   En React, la función pasada a useEffect no puede ser declarada directamente como async (ya que debe retornar undefined o una función de limpieza). Define la función asíncrona dentro del hook:

   JSX Copiar

   import React, { useState, useEffect } from 'react';
   
   export const UserProfile = ({ userId }) => {
     const [user, setUser] = useState(null);
     const [error, setError] = useState(null);
   
     useEffect(() => {
       let isMounted = true; // Previene memory leaks si el componente se desmonta
   
       const fetchUserProfile = async () => {
         try {
           const response = await fetch(`/api/users/${userId}`);
           if (!response.ok) throw new Error('Usuario no encontrado');
           const result = await response.json();
           
           if (isMounted) {
             setUser(result);
           }
         } catch (err) {
           if (isMounted) {
             setError(err.message);
           }
         }
       };
   
       fetchUserProfile();
   
       return () => {
         isMounted = false;
       };
     }, [userId]);
   
     if (error) return <div className="error-banner">Error: {error}</div>;
     if (!user) return <div>Cargando...</div>;
   
     return <div>{user.name}</div>;
   };
   

3. 3

   Paso 3: Configurar un listener global para Unhandled Rejections (Fallback)

   Como medida de seguridad para producción, registra un manejador global que capture cualquier rechazo no controlado en el objeto window:

   JAVASCRIPT Copiar

   // En index.js / main.jsx / App.jsx
   if (typeof window !== 'undefined') {
     window.addEventListener('unhandledrejection', (event) => {
       console.warn(`[Unhandled Rejection Detectado]: ${event.reason}`);
       // Opcional: Enviar reporte de error a Sentry o LogRocket
       // event.preventDefault(); // Previene la salida en consola si es deseado
     });
   }