Gestionando Errores
Clase 13 de 23 • Curso de Next.js 2018
Contenido del curso
Jose Chirinos
student•
hace 8 años
Clase 13 de 23 • Curso de Next.js 2018
Contenido del curso
Jose Chirinos
Sergio Toshio Minei
Daniel Alberto Esquinazi
Sergio Toshio Minei
Matias Alejandro Lopez Heredia
Jose Galbis Soler
Diego Fernando Rojas Quintero
Milton Fabricio Zuno Ley
Agustín Castro
Leandro Videla
Jorge Luis Montenegro
Francisco Imanol Suarez
Luis Lira
Robinson Ganchala
Fernanda Aragon
Tobías Schwarz
Alejandro Robleto
Daniel Alberto Esquinazi
Diego Forero
Daniel Alberto Esquinazi
Diego Fernando Berrio Meza
Adriann Felipe Sanchez Sierra
Matias Martínez
Carlos Andrés Cobo Sinisterra
Eduardo Hidalgo Díaz Rugama
Paul Alexander Rodriguez Calixto
Santiago Marcano
Sergio Alejandro Trejo Cuxim
Daniel Gaspar Chi Caballero
Juan Esteban Deossa Pertuz
Roberto S. Sampayo
Si todo correcto: 200,
Si no existe el contenido: 404,
Si se prendió fuego el data center y no funciona el server: 503,
jejej excelente clase…
Manejo de Errores
Cuando hacemos Server Side Rendering, nuestros servidor responde con un status.
Se debe de hacer un manejo de control de errores en un bloque de try/catch. Además se debe de agregar un if para manejar el status que retorna el fetch. Por último, se tiene que cambiar el res.statusCode para que el servidor maneje internamente el error que ocurrió.
static async getInitialProps({ query }) { let idChannel = query.id; try { let req = await fetch('https://api.audioboom.com/channels/recommended'); if(req.status >= 400) { res.statusCode = req.status; return { tatusCode: req.status } } //más código return { statusCode: 200 } } catch(e) { return { statusCode: 503} } }
Para el manejo de errores Next.js nos da un componente llamado <Error/>.
import Error from 'next/error';
Luego, dentro del componente:
const { statusCode } = this.props; if(statusCode !== 200) { return <Error statusCode={statusCode}/> }
Pueden ver el resumen completo del curso aquí.
Pueden ver mi lista de resúmenes aquí.
recuerda que tienes q obtener el objeto res de los parametros
static async getInitialProps({ res }) {
muchas gracias por el dato @esquinazi 😃
Se puede "catchear" errores de promesas de dos formas nativas en JavaScript.
Ahora, fuera de lo nativo de JS, hay otras formas, una que particularmente me gusta es una biblioteca llamada "await-to-js", la pueden encontrar en el siguiente enlace: await-to-js Con esta library, envolvemos la promesa en una función llamada "to", y esta nos retorna un arreglo de dos objectos, en la posición 0 un objeto de error, si la promise salió mal, y en la posición 1, el objeto resultado de la respuesta correcta de la promise.
import to from 'await-to-js' // Importan la library const [error, response] = await to(fetch("http://...")) // Envuelven la promesa
Luego podrían manejar el error de la siguiente forma:
if (error) { // Manejar el error return { statusCode: error.status } } // Usar el response para lo que sea nesecario, ya que no existe ningún error. // Por ej: return { data: response.data, statusCode: response.status }
Espero les sirva :)
No has vuelto a conectar el wifi! En el minuto 11.
Alguien le a aparecido este mensaje: An unexpected error has occurred.
No se que hacer para solucionarlo?
A mi me aparece igual pero porque hay un problema con la api, la cual esta mal diseñada y te da dos veces el mismo dato de "POSTA", te entrega dos veces su id y al sacar el key que nos pide react nos manda otro errror que dice
react-dom.development.js:88 Warning: Encountered two children with the same key, `4702115`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
Para solucionar eso, tuve que hacer 2 validaciones, una especialmente para el statusCode 503 y otra para statusCode >= 400, mi codigo se ve asi.
Channel.js
if(statusCode == 503){ return <Error statusCode={statusCode} /> } if(statusCode >= 400){ return <Error statusCode={statusCode} /> }
index.js
if(statusCode == 503){ return <Error statusCode={statusCode} /> }```
Hola!
Como se gestionan los errores que capturamos en componentDidCatch por un componente?
No entiendo porque seteamos a 200 el statusCode en caso de éxito. No sería correcto asignarle el valor del status del request ( req.status )?
Si dejamos el código como lo vimos en la clase y tenemos un error de tipeo en la URL del Fetch nos tira un error horrible, mientras que si cambiamos el valor de statusCode a req.status no devuelve un error 404, que entiendo sería lo más correcto, ya que lo URL a la que le hacemos la petición no existe.
Dejo acá mi código:
static async getInitialProps({ res }) { try { let req = await fetch("https://api.audioboom.com/channels/recommended"); let { body: channels } = await req.json(); return { channels, statusCode: req.status }; } catch (error) { res.statusCode = 503; return { channels: null, statusCode: 503 }; } }
Amigos, al realizar el ejemplo le cambien la url let req = await fetch('https://api.audioboom.com/channels/recommended'3) para que me aparesca el error pero se salta el catch y no presenta el error y se cae por undefine en el .map
Hola puedes dar algún ejemplo de código? Dejaste el statusCode 503? Recuerda que este es un error de conectividad, por lo cual para entrar en el catch tendrías que cortar tu conexión a Internet. Intenta con un statusCode 404 te adjunto igual la documentación de Mozilla con todos los códigos de estado.
Hola @george-montenegro, ¿podrías compartirnos tu código para poder ayudarte? tal vez la sentencia del try/catch tenga un error.
@robertomgonzalez al quitar la red y desplazarme en el navegador hacia atrás y volver a channel me dice que res no está definido. La solución hardcodeada que he puesto es if (res) res.statusCode = 503 pero, ¿me puedes dar una solución mejor y explicarme a qué se debe ese error? Gracias.
Hola, la variable res debe llegarte como parámetro desde la función getInitialProps({ res }), por si llega undifined podrías poner un valor default cuando llega como parámetro desde la función de la siguiente forma: getInitialProps({ res = {} }) y te ahorras en hacer esa validación con un if.
La página de channels me queda en en blanco con el texto “An unexpected error has occurred” pero no tengo ningún error en la consola de next ni en la del navegador ni en la pestaña network del navegador
wow este manejo de errores fue magico, con sinceridad hasta ahora me quedo mas claro como udarlos y manejarlo ademas de la buena teoria. fue magistral ..... gracias!!!
No entendí por que solamente asignamos el status code a la respuesta en los casos de error, deberíamos asignarlos también en el caso de éxito? es decir
res.StatusCode = 200
En este momento de la clase https://platzi.com/clases/next-js/concepto/navegacion-avanzada/gestionando-errores/material/?time=533 retorna el status code 200 si todo funciona y 503 si hay error de conexión por ejemplo.
Gracias por la respuesta pero viendo la clase nuevamente pude escuchar que explica esto.En el caso de éxito el valor por defecto de res.statusCode es 200 y por eso es que no lo asigna.
tiempo 8:15 aproximadamente
Alerta de spoiler
Presten atención
No hay una forma de tener un componente que englobe todo y que éste tenga control sobre algún error generado sobre los componentes que estén dentro? Algo así como se realiza en el curso de React Native.
Si mal no recuerdo hay un apartado en el curso de React que te enseña el manejo de errores. La verdad no tengo muy claro como funciona porque en la practica no lo eh usado.
Saludos,
Tito
Hola mi gente, pregunta, podemos cambiar a diferentes idiomas los mensajes de error? o personalizar el texto usando el tag Error de next?
No hay ningún tag de error en next, y no, no puedes poner varios idiomas para los mensajes de error. Al menos no como supongo que tu crees que se podría hacer.
Para personalizar tu página de error en Next te recomiendo ir al curso de Next y ver esa sección. esta muy bien explicado. adicional:
Para el idioma, debes usar alguna librería de internacionalización (i18n). Eso es un poco más complejo, pero se puede. Otra manera es que hagas tu propia librería de internacionalización.
Para hacer tu propia librería necesitas 2 cosas:
entonces según el idioma que detectaste, haces que toda la aplicación consuma los textos del mismo idioma.
iba a preguntar algo, pero sinceramente el profesor explica de forma tan sencilla que en la redaccion de la pregunta la respondi.... sos grande..!!
Primero que nada agradecer por el curso!
En el manejo de errores del Promise.all() si falla el fetch a los audio clips o a las series y no el channel la app tira error de undefined corriendo en entorno de desarrollo.
Luego de un par de pruebas me di cuenta que, en produccion, por suerte, Next nos cubre la espalda y por defecto tira un error 500 si hay falla en alguna request. No es lo mas ideal en UX pero por lo menos no vemos un error chungo de código.
Alguien propone alguna solución a eso? He estado intentado un par de cosas pero no he llegado a la solución de momento.
Tengo una solución para ti. Añade un catch a cada petición, de modo que si uno falla regresará el "reject" y no se disparará en error global. Utilizo yo otro cliente HTTP, tu utiliza el fetch.
const [ requestChannel, requestClips, requestChilds ] = await Promise.all([ request.get(`/channels/${idChannel}`, '').catch(error => error), request.get(`/channels/${idChannel}/audio_clips`, '').catch(error => error), request.get(`/channels/${idChannel}/child_channels`, '').catch(error => error) ]);
Yo lo solucione de la siguiente manera:
// En el if evaluamos si alguno de los tres requests // es mayor a 400 if ( reqChannel.status >= 400 || reqAudios.status >= 400 || reqChilds.status >= 400 ) { // El res.statusCode lo igualamos al valor mas // grande de los 3 res.statusCode = Math.max(reqChannel.status, reqAudios.status, reqChilds.status); // Finalmente en el return devolvemos el res.statusCode // como statusCode return { channel: null, audioClips: null, series: null, statusCode: res.statusCode, }; }```
El manejo de errores es uno de los componentes mas importantes de todo desarrollo web, un buen manejo de errores le servirá tanto a los usuarios para guiarse mejor dentro del sitio web como para nosotros para ubicar el desarrollo web en una mejor posición en la web gracias al SEO.
Chicos, me aparece este error:
index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
¿a que se debe y como lo soluciono?