Tengo un comportamiento desconcertante en mi entorno de desarrollo para una aplicación ReactJS que realiza algunas llamadas API con fetch() y se inicia con create-react-app
Al manejar la llamada a la API, lanzo un error que está atrapado en un middleware en otro lugar que envuelve cada llamada a la API.
console.log() en el bloque catch() en este middleware y confirmé que detecta todos estos errores. Además, muestra el mensaje de error correctamente al usuario final y no bloquea la aplicación.
Pero lo raro:
throw , aparece la superposición de errores de ReactJS y me lo muestra.json() (es decir, la llamada a la API no devolvió un JSON válido), el mismo middleware lo detecta nuevamente y el mensaje de error se muestra de la misma manera en el UI, pero la superposición de errores de ReactJS NO aparece. Incluso intenté lanzar SyntaxError explícitamente para ver qué sucedería, pero en ese caso aparece la superposición de error.
Mi pregunta es, básicamente: ¿es esto algo de qué preocuparse? Después de todo, la superposición de errores solo funciona en el entorno de desarrollo, y no estoy seguro de si realmente indica que estos errores causarán bloqueos/problemas en producción. No estoy seguro de cuáles son las reglas para cuando aparece o no. ¿Se espera que la superposición no se muestre para un error Json.parse() no detectado, pero sí para todo lo demás? Cuando aparece la superposición de errores, ¿hay algo de qué preocuparse si puedo cerrarla y la aplicación sigue funcionando correctamente?
Los errores en React son capturados por Límites de error .
Según los documentos, no pueden detectar errores en:
fetch() es un código asíncrono y React no puede detectar esos errores. Debería tener un bloque try/catch para el código async o un controlador .catch() para prometer manejar los errores usted mismo (por ejemplo, actualizar el estado de React para indicar que ha ocurrido un error y mostrar el mensaje de error).