Detectando errores

Clase 26 de 52 • Curso de Electron: Apps de escritorio en Windows y Mac

Resumen

Vamos a ver los tipos de errores que se pueden presentar y el manejo de éstos errores, la forma de controlar la mayoría de los errores es con throw sin embargo Electron tiene sus propios errores, para esto nos ayuda tener las Devtools de Electron y específicamente la extensión que instalamos al comienzo del curso Devtron, esta extensión nos muestra en la opción Lint los errores que se están presentando en nuestra aplicación.

Salvador Jose Campanella Salas

student•

Es genial la manera en como se manejan estos 3 errores, en si debería ser un standard de cualquier app que se programe tener este manejador desde el principio

Pablo Andrés Prado Diaz

student•

Algunos errores han cambiado en su definición puedes actualizar con el siguiente script para manejar los errores:

const { app, dialog } = require('electron');

async function relaunchApp(win) {
  try {
    await dialog.showMessageBox(win, {
      type: 'error',
      title: 'Error de Aplicación',
      message: 'Ocurrió un error inesperado, se reiniciará el aplicativo',
      buttons: ['Aceptar'],
      defaultId: 0
    });
    
    app.relaunch();
    app.exit(0);
  } catch (error) {
    console.error('Error al reiniciar la aplicación:', error);
  }
}

function setupErrors(win) {
  // Manejo de crash del proceso de renderizado
  win.webContents.on('crashed', async (event, killed) => {
    console.error('Proceso de renderizado crasheado:', { killed });
    await relaunchApp(win);
  });

  // Manejo de ventana no responsiva
  win.on('unresponsive', async () => {
    try {
      const response = await dialog.showMessageBox(win, {
        type: 'warning',
        title: 'Aplicación No Responde',
        message: 'Un proceso está tardando demasiado',
        detail: 'Puede esperar o reiniciar el aplicativo manualmente',
        buttons: ['Esperar', 'Reiniciar'],
        defaultId: 0,
        cancelId: 0
      });

      if (response.response === 1) {
        await relaunchApp(win);
      }
    } catch (error) {
      console.error('Error al mostrar diálogo:', error);
    }
  });

  // Manejo de excepciones no capturadas
  process.on('uncaughtException', async (error) => {
    console.error('Excepción no capturada:', error);
    await relaunchApp(win);
  });

  // Nuevo: Manejo de rechazos de promesas no capturados
  process.on('unhandledRejection', async (reason, promise) => {
    console.error('Promesa rechazada no manejada:', reason);
    await relaunchApp(win);
  });

  // Nuevo: Manejo de errores del proceso principal
  app.on('render-process-gone', async (event, webContents, details) => {
    console.error('Proceso de renderizado terminado:', details);
    await relaunchApp(win);
  });
}

module.exports = setupErrors;

Platzi Team

student•

Para el evento chrashed: "Deprecated: This event is superceded by the render-process-gone event which contains more information about why the render process disappeared. It isn't always because it crashed. The killed boolean can be replaced by checking reason === 'killed' when you switch to that event."

Damian Spizzirri

student•

Con el paso del tiempo, a mejorado electron el consumo de memoria?
Soy nuevo con esta libreria, me esta gustando, pero me asusta el excesivo consumo que tiene.

Gustavo Gutierrez Gonzalez

student•

buen curso, que pasaria si quiero interactuar con bases de datos

Diego Forero

Team Platzi•

Puedes hacerlo usando sqlite en local o puedes tener un api remota donde tu app de escritorio se conecte y guarde información.

daniel kant

student•

podés chequear este tutorial

Emmanuel Rangel Jiménez

student•

Estoy armando una aplicación en base a esta. Me sucede que aveces tengo que dar mas de 1 o 2 clicks para abrir una ventana, ¿Tengo un problema con los procesos?

daniel kant

student•

devtron

Detectando errores

Introducción a Electron

Paso a paso para construi aplicaciones con Electron

¿Qué es Electron?

¿Cómo funciona Electron?

Herramientas necesarias

Comenzando con Electron

Creando nuestro proyecto

Nuestra primera ventana

Propiedades de una ventana de Electron

Comenzando con nuestro aplicativo

El frontend y Electron

Configurando nuestro frontend

Herramientas de desarrollo para Electron

Algunos frameworks recomendados

Construyendo el layout

Completar elementos del Layout

Agregando interacción a nuestra aplicación

JavaScript en el frontend

Selecciona imágenes

Buscar imágenes

Añadir filtros a la imagen

Comunicación entre procesos

Accesando recursos de la máquina

Leer archivos de directorios

Generar listas de imagenes

Refactor del proyecto

Usando el diálogo de guardar

Guardar imágenes en disco

Usando cajas de mensajes

Detectando errores

Interactuando con el sistema operativo

Organizando el código del proceso principal

Múltiples ventanas y comunicación entre ellas

Creando assets para una nueva ventana

Consideraciones para múltiples plataformas

Manejo de preferencias

Usuario y contraseña

Creando un ícono en la bandeja del sistema

Imprimiendo

Subir una imagen

Portapapeles con texto o imágenes

Emitiendo notificaciones

Agregando un Menú

Atajos

Protocolos personalizados

Generando un ejecutable para nuestra aplicación

A tener en cuenta para generar ejecutables

Configurando el entorno para construcción

Configurando el entorno para construcción 2

Personalizando nuestro ejecutable

Creando paquetes para distribuir nuestro aplicativo

Considerando instaladores para múltiples plataformas

Firmas digitales con Code Signing

Cierre del curso

Bonus

Integración continua

Escribiendo tests con Ava y Spectron

Desafios

Crear un filtro personalizado

Leer las imágenes ubicaciones remotas (Cloudup)

Previsualización de filtros