No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Next.js 2018

Curso de Next.js 2018

Roberto González

Roberto González

Gestionando Errores

13/23
Recursos

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?

Aportes 11

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

  1. Seria usar try/catch como lo hicieron en esta lección.
  2. 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("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.

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

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

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

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

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.

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?