Cómo capturar errores de red en JavaScript

En aplicaciones web, manejar errores de red es crucial para mejorar la experiencia del usuario y la robustez de la aplicación. JavaScript proporciona varias formas de capturar y manejar estos errores de manera efectiva.

Usando try…catch

La estructura `try…catch` es una de las formas más comunes de manejar errores en JavaScript. Puedes usarla para capturar errores en operaciones de red como fetch.

try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data);
} catch (error) {
    console.error('There has been a problem with your fetch operation:', error);
}

Usando Promesas

Cuando trabajas con promesas, puedes manejar errores utilizando el método `catch`.

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => {
        console.error('There has been a problem with your fetch operation:', error);
    });

Usando Async/Await

El uso de `async/await` con `try…catch` proporciona una forma más legible de manejar errores en operaciones asíncronas.

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('There has been a problem with your fetch operation:', error);
    }
}

fetchData();

Timeouts y Aborts

Para capturar errores de red debido a timeouts, puedes usar `AbortController` para cancelar una solicitud si tarda demasiado.

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);

fetch('https://api.example.com/data', { signal: controller.signal })
    .then(response => {
        clearTimeout(timeoutId);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => {
        if (error.name === 'AbortError') {
            console.error('Fetch aborted due to timeout');
        } else {
            console.error('There has been a problem with your fetch operation:', error);
        }
    });

Manejar errores de red en JavaScript es esencial para crear aplicaciones robustas y mejorar la experiencia del usuario. Utilizando `try…catch`, promesas y `AbortController`, puedes gestionar adecuadamente los errores que puedan ocurrir durante las operaciones de red.