Gestionando Errores

Clase 13 de 23 • Curso de Next.js 2018

Resumen

En esta clase vamos a empezar a ver uno de los temas más importantes que tenemos que tener en cuenta cuando hacemos una aplicación un poquito más compleja, y es: ¿Qué pasa en nuestra aplicación si se rompe algo?

Comentarios

Jose Chirinos

student•

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…

Sergio Toshio Minei

student•

Manejo de Errores

Cuando hacemos Server Side Rendering, nuestros servidor responde con un status.

Status 200: Todo está bien.
Error 404: Página no existe
Error 503: Hay un probblema de red o la API no está funcionando.

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í.

Daniel Alberto Esquinazi

student•

recuerda que tienes q obtener el objeto res de los parametros

static async getInitialProps({ res }) {

Sergio Toshio Minei

student•

muchas gracias por el dato @esquinazi 😃

Matias Alejandro Lopez Heredia

student•

Se puede "catchear" errores de promesas de dos formas nativas en JavaScript.

Seria usar try/catch como lo hicieron en esta lección.
Otra seria usar .then().catch(), el then es una función que como parametro tiene el resultado correcto de la promesa, y el catch es lo mismo pero cuando la promesa tuvo un error.

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(&quot;http://...&quot;)) // 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 :)

Jose Galbis Soler

student•

No has vuelto a conectar el wifi! En el minuto 11.

Diego Fernando Rojas Quintero

student•

Alguien le a aparecido este mensaje: An unexpected error has occurred.

No se que hacer para solucionarlo?

Milton Fabricio Zuno Ley

student•

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} />
        }```

Agustín Castro

student•

Hola!

Como se gestionan los errores que capturamos en componentDidCatch por un componente?

Leandro Videla

student•

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 };
    }
  }

Jorge Luis Montenegro

student•

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

Francisco Imanol Suarez

student•

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.

Luis Lira

student•

Hola @george-montenegro, ¿podrías compartirnos tu código para poder ayudarte? tal vez la sentencia del try/catch tenga un error.

Robinson Ganchala

student•

@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.

Fernanda Aragon

student•

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.

Tobías Schwarz

student•

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

Alejandro Robleto

student•

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!!!

Daniel Alberto Esquinazi

student•

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

Diego Forero

Team Platzi•

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.

Daniel Alberto Esquinazi

student•

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

Diego Fernando Berrio Meza

student•

Alerta de spoiler
Presten atención

Adriann Felipe Sanchez Sierra

student•

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.

Matias Martínez

student•

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

Carlos Andrés Cobo Sinisterra

student•

Hola mi gente, pregunta, podemos cambiar a diferentes idiomas los mensajes de error? o personalizar el texto usando el tag Error de next?

Eduardo Hidalgo Díaz Rugama

student•

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:

detectar el idioma en el navegador
tener archivos (como json por ejemplo) donde almacenes las traducciones.

entonces según el idioma que detectaste, haces que toda la aplicación consuma los textos del mismo idioma.

Paul Alexander Rodriguez Calixto

student•

iba a preguntar algo, pero sinceramente el profesor explica de forma tan sencilla que en la redaccion de la pregunta la respondi.... sos grande..!!

Santiago Marcano

student•

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.

Sergio Alejandro Trejo Cuxim

student•

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)
]);

Daniel Gaspar Chi Caballero

student•

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,
        };
      }```

Juan Esteban Deossa Pertuz

student•

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.

Roberto S. Sampayo

student•

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?

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}
  }
}

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 }

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.

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 };
    }
  }

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)
]);

// 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,
        };
      }```

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.

Gestionando Errores

Introducción a Next.JS

¿Dónde aprender Next.js actualizado?

¿Qué es Next.JS?

Creando nuestra primera página

Styled JSX

Server Side Rendering

Aprende qué es Server Side Rendering

Intro a getInitialProps

Utilizando el componente Link

Recibiendo Parámetros

Performance de Get Initial Props

Vista de Podcasts

Componentes Reutilizables

Creando componentes en React

Reorganizar la vista de podcasts

Navegación Avanzada

Gestionando Errores

Personalizando errores

¿Cómo diseñar URLs?

Configurando Next Routes

Implementando Next Routes

Vistas Híbridas

Implementar el Modal

Agregando un loader

Publicando nuestra app

Mejores prácticas en Github

Publicar la app con now

Conclusiones del curso