Agregar un mejor manejo de errores en la aplicación

[Israel-Laguan]

Actualmente cuando se hacen requests o se manejan Promesas solo se consideran los casos adonde no falla el requests (solo hay .then) o funciones importantes sin try...catch.

Ejemplos:

covid-global-visualization/src/App.vue

Lines 80 to 90 in 3467e76

	function cargaResumen() {
	Promise.all([obtenerResumen(),obtenerResumen(true)]).then((values) => {
	const [paisDia , paisDiaAntes] = values
	state.datos = setDatos(paisDia, paisDiaAntes)
	})
	}
	function obtenerResumen(diaAnterior = false) {
	const url = obtenerURL() + diaAnterior
	return fetch(url).then(response => response.json() )
	}

covid-global-visualization/src/App.vue

Lines 146 to 155 in 3467e76

	function cargarPaises() {
	Promise.all([obtenerPais(), obtenerPais(true)]).then( (values) => {
	const [paisDia, paisAyer] = values
	setContadores(paisDia, paisAyer)
	})
	}
	function obtenerPais(diaAnterior = false) {
	return fetch('https://disease.sh/v3/covid-19/countries?sort=todayCases&yesterday=' + diaAnterior).then( r => r.json() )
	}

covid-global-visualization/src/components/grafica.vue

Lines 30 to 45 in 3467e76

	function cargarHistorias() {
	const url = `https://disease.sh/v3/covid-19/historical/${ props.pais === 'todos' ? 'all' : props.pais.name }?lastdays=all`
	return fetch(url).then( response => response.json())
	}
	async function pintarGrafica(){
	state.historias = await cargarHistorias()
	if (props.pais !== 'todos') {
	state.historias = state.historias.timeline
	}
	const labels = Object.keys(state.historias.cases)
	const confirmados = Object.values(state.historias.cases)
	const recuperados = Object.values(state.historias.recovered)
	const fallecidos = Object.values(state.historias.deaths)
	setGrafica(labels, confirmados, recuperados, fallecidos)
	}

Checklist

Se solicita agregar un manejo de errores que sea mas resistente a problemas que pueden surgir en producción, y cumplan con los siguientes criterios:

• Las promesas o cualquier solicitud asíncrona deben tener por lo menos un .catch para manejar los errores que puedan surgir durante la llamada.
• Cuando haya una función que internamente maneja errores (por ejemplo que tiene una promesa o función asíncrona) debe tener un try...catch para capturar cualquier error que se genere en el manejo de datos.
• No deben haber consoles o alerts o debuggers en el código que se muestren en producción.
• Debe haber una función que maneje los mensajes de los errores dependiendo si esta en producción. Si esta en development si pueden mostrarse consoles o debuggers, pero en producción deben o mostrarse en el UI o guardarse en localStorage o incluso en un servicio de logging.
• Ningún error debe crachear la aplicación en la medida de lo posible.

Se considera cerrado o completado el issue cuando a pesar de haber errores se cumple con lo anterior.

Referencias

• https://blog.logrocket.com/error-handling-debugging-and-tracing-in-vue-js/
• https://weekly-geekly-es.imtqy.com/articles/460539/index.html
• https://ichi.pro/es/errores-y-manejo-de-errores-en-javascript-91071706568765