En esta página de los documentos de React:
https://reactjs.org/docs/faq-ajax.html
Un comentario de código dice...
Nota: es importante manejar los errores aquí en lugar de un bloque catch() para que no traguemos excepciones de errores reales en los componentes.
... sobre el manejo de errores en el segundo argumento al segundo .then después de fetch . El fragmento completo de los documentos es:
useEffect(() => { fetch("https://api.example.com/items") .then(res => res.json()) .then( (result) => { setIsLoaded(true); setItems(result); }, // Note: it's important to handle errors here // instead of a catch() block so that we don't swallow // exceptions from actual bugs in components. (error) => { setIsLoaded(true); setError(error); } ) }, []) No da más detalles sobre este consejo, y he visto muchos ejemplos de código React funcional usando catch para manejar errores de llamadas API. He intentado buscar en Google pero no puedo encontrar ninguna aclaración.
¿Podría alguien darme una explicación más detallada de por qué no debería usar catch para tratar los errores que surgen al realizar una llamada a la API fetch en un gancho useEffect ?
¿O hay algunas situaciones en las que está bien hacerlo, pero otras en las que no?
¿Qué significa "tragar excepciones [...] en componentes"?
¿Esta regla/guía se aplica a todo React o solo a las llamadas a la API?
¿O simplemente al método de ciclo de vida useEffect hook o componentDidMount ?
Todo lo que puedo encontrar en esto parece vincularse a este problema de github alrededor de 2016. Citaré textualmente desde allí, ya que no parece haber sido cubierto en Stack Overflow antes y explica las cosas bastante a fondo:
.then(() => { this.setState({ loaded: true }) }) .catch(()=> { console.log('Swallowed!') });Su controlador
catch()detectará cualquier error generado en la cadenathen()anterior, incluido el causado por unrender()debido a una llamada asetState().Incluso si no usa
setStatedirectamente, puede tener el mismo problema si algún otro código al que llama lo usa (por ejemplo, undispatch()).Si no desea detectar errores resultantes de
setState(), y solo desea detectar fallas de red (imaginemos que suPromise.resolve()es en realidad unfetch()), desea usar el segundo argumentothen()en su lugar :
componentDidMount() { Promise.resolve() .then(() => { this.setState({ loaded: true }) }, (err) => { console.log('An error occurred (but not in setState!)', err); }); }En este caso, a menos que
catch()más adelante en la cadena, el error enrender()no se detectará y, con un buen polyfill de Promise (o con Promises nativo en Chrome y tal vez en otros navegadores), se mostrará.
Editar : siguiendo la respuesta de @Martin, fui y probé esto, y puedo confirmar que esto ya no parece ser una preocupación relevante. Los errores de procesamiento de setState no se detectan en ninguna versión de React desde v16.0 en adelante, y dado que useState solo se introdujo en v16.8, no parece posible que esto haya sido un problema para los ganchos.
Aquí hay una caja de códigos que demuestra el problema original en las versiones anteriores de React.
Es un error de copiar y pegar del autor del ejemplo. El primer ejemplo usa el estado del componente de un componente basado en una clase: this.setState() provoca una nueva representación síncrona (o al menos este fue el caso con react v15.0 en 2016, no estoy seguro de si es cierto hoy). Por lo tanto, el comentario de advertencia y el uso del segundo argumento para .then(onResolve, onReject) están justificados. El segundo ejemplo utiliza el useState de un componente de función: setState no provoca una nueva representación síncrona , solo una nueva representación asíncrona. Por lo tanto, el comentario de advertencia y el uso del segundo argumento para .then(onResolve, onReject) no están justificados.
Para ilustrar esto: con los ganchos useState puede llamar a múltiples actualizadores y todos solo tendrán efecto en una nueva representación.
const [a, setA] = useState(); const [b, setB] = useState(); const [c, setC] = useState(); const updateState = () => { setA('foo'); setB('bar'); setC('buz'); // will only cause one single re-render }y, por lo tanto, está perfectamente bien usar catch
useEffect(() => { fetch("https://api.example.com/items") .then(res => res.json()) .then( (result) => { setIsLoaded(true); setItems(result); } ) .catch( (error) => { setIsLoaded(true); setError(error); } ) }, [])