El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Gestió d'errors de xarxa

Següent ►
►

En aquest tema, aprendrem com gestionar errors de xarxa en aplicacions React Native. La gestió adequada dels errors és crucial per proporcionar una bona experiència d'usuari i assegurar que l'aplicació pugui manejar situacions inesperades de manera elegant.

Objectius

  • Comprendre la importància de la gestió d'errors de xarxa.
  • Aprendre a capturar i gestionar errors utilitzant try...catch.
  • Implementar estratègies per mostrar missatges d'error a l'usuari.
  • Veure exemples pràctics de gestió d'errors amb Fetch API i Axios.

Importància de la gestió d'errors de xarxa

Quan una aplicació depèn de dades externes, és inevitable que es produeixin errors de xarxa, com ara pèrdua de connexió, temps d'espera esgotat o respostes invàlides del servidor. La gestió d'aquests errors és essencial per:

  • Evitar que l'aplicació es bloquegi.
  • Proporcionar informació útil a l'usuari sobre el problema.
  • Permetre a l'usuari intentar novament l'operació fallida.

Captura i gestió d'errors amb try...catch

La manera més comuna de gestionar errors en JavaScript és utilitzar blocs try...catch. Això ens permet capturar errors i manejar-los de manera controlada.

Exemple amb Fetch API

import React, { useState, useEffect } from 'react';
import { View, Text, Button, ActivityIndicator } from 'react-native';

const FetchDataComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchData = async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await fetch('https://api.example.com/data');
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const result = await response.json();
      setData(result);
    } catch (error) {
      setError(error.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  if (loading) {
    return <ActivityIndicator />;
  }

  if (error) {
    return (
      <View>
        <Text>Error: {error}</Text>
        <Button title="Retry" onPress={fetchData} />
      </View>
    );
  }

  return (
    <View>
      <Text>Data: {JSON.stringify(data)}</Text>
    </View>
  );
};

export default FetchDataComponent;

Explicació del codi

  1. Estat inicial: Definim tres estats: data per emmagatzemar les dades, loading per indicar si les dades s'estan carregant, i error per emmagatzemar qualsevol missatge d'error.
  2. Funció fetchData: Aquesta funció utilitza try...catch per capturar errors durant la sol·licitud de xarxa. Si la resposta no és correcta (response.ok), es llança un error.
  3. Gestió de l'error: Si es produeix un error, es captura i s'emmagatzema en l'estat error. També es proporciona un botó per intentar novament la sol·licitud.
  4. Renderització condicional: Si l'aplicació està carregant, es mostra un indicador d'activitat. Si hi ha un error, es mostra el missatge d'error i un botó per reintentar. Si tot va bé, es mostren les dades.

Exemple amb Axios

import React, { useState, useEffect } from 'react';
import { View, Text, Button, ActivityIndicator } from 'react-native';
import axios from 'axios';

const AxiosDataComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchData = async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await axios.get('https://api.example.com/data');
      setData(response.data);
    } catch (error) {
      setError(error.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  if (loading) {
    return <ActivityIndicator />;
  }

  if (error) {
    return (
      <View>
        <Text>Error: {error}</Text>
        <Button title="Retry" onPress={fetchData} />
      </View>
    );
  }

  return (
    <View>
      <Text>Data: {JSON.stringify(data)}</Text>
    </View>
  );
};

export default AxiosDataComponent;

Explicació del codi

El codi és molt similar a l'exemple anterior amb Fetch API, però utilitza axios per fer la sol·licitud de xarxa. axios proporciona una interfície més rica i fàcil d'utilitzar per gestionar sol·licituds HTTP.

Estratègies per mostrar missatges d'error

  • Missatges clars i concisos: Proporciona missatges d'error que siguin fàcils d'entendre per l'usuari.
  • Opcions de reintentar: Ofereix una manera fàcil per a l'usuari de reintentar l'operació fallida.
  • Logs per a desenvolupadors: Registra errors en un servei de monitorització per ajudar a diagnosticar i solucionar problemes.

Exercici pràctic

Implementa una funció que faci una sol·licitud a una API i gestioni els errors de xarxa. Proporciona un missatge d'error a l'usuari i una opció per reintentar la sol·licitud.

Solució

import React, { useState, useEffect } from 'react';
import { View, Text, Button, ActivityIndicator } from 'react-native';

const NetworkErrorHandlingComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchData = async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await fetch('https://api.example.com/data');
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const result = await response.json();
      setData(result);
    } catch (error) {
      setError(error.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  if (loading) {
    return <ActivityIndicator />;
  }

  if (error) {
    return (
      <View>
        <Text>Error: {error}</Text>
        <Button title="Retry" onPress={fetchData} />
      </View>
    );
  }

  return (
    <View>
      <Text>Data: {JSON.stringify(data)}</Text>
    </View>
  );
};

export default NetworkErrorHandlingComponent;

Conclusió

La gestió d'errors de xarxa és una part essencial del desenvolupament d'aplicacions React Native. Utilitzant try...catch i proporcionant missatges d'error clars i opcions de reintentar, podem millorar significativament l'experiència d'usuari i assegurar que l'aplicació sigui robusta i fiable.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats