Обработка ошибок в ElectronJS

Опубликовано: 28 Июля, 2021

ElectronJS - это платформа с открытым исходным кодом, используемая для создания кроссплатформенных нативных настольных приложений с использованием веб-технологий, таких как HTML, CSS и JavaScript, которые могут работать в операционных системах Windows, macOS и Linux. Он объединяет движок Chromium и NodeJS в единую среду выполнения. В любом приложении обработка ошибок и исключений является важной частью разработки. Информацию об обработке ошибок и исключений в NodeJS см. В статье: Обработка исключений в Node. Информацию об обработке ошибок и исключений с помощью JavaScript см. В статьях:

  • Javascript | Ошибки и исключительная обработка с примерами
  • JavaScript | Ошибки - брось и попробуй поймать

Большинство языков и платформ предоставляют встроенную поддержку обработки ошибок и исключений. Разработчики при разработке приложения независимо от языка или платформы должны позаботиться о некоторых распространенных исключениях, которые могут возникать в коде, таких как обработка NULL , деление числа на 0 и т. Д. Разработчики обычно обрабатывают исключения и ошибки, помимо несколько конкретных вариантов использования, связанных с их функциональностью. Список исключений, которые могут быть созданы, не является исчерпывающим. Мы уже рассмотрели обработку ошибок и исключений в NodeJS и JavaScript. Те же методы можно использовать при разработке приложения Electron. Однако часто возникает ситуация, когда рабочий код может сломаться по неизвестным причинам или ошибка в приложении может вызвать исключение или ошибку, которые могут нарушить поток выполнения. У них также может быть проблема с безопасностью приложения. В таких случаях нам нужен общий способ безопасной обработки этих исключений, не нарушая работу приложения, и он также должен быть совместим с собственной системой. В этом руководстве мы рассмотрим обработку ошибок и исключений в приложении Electron с использованием необработанного электронного пакета npm. Мы предполагаем, что вы знакомы с предварительными условиями, описанными в вышеупомянутой ссылке. Для работы Electron в системе должны быть предварительно установлены node и npm.

  • Структура проекта:

Пример: следуйте инструкциям, приведенным в разделе «Динамическое оформление в ElectronJS», чтобы настроить базовое приложение «Электрон». Скопируйте код Boilerplate для файлов main.js и index.html, как указано в статье. Мы продолжим создавать наше приложение, используя ту же кодовую базу. Кроме того, установите пакет без обработки электронов с помощью npm. Используя этот внешний пакет, мы можем обнаруживать необработанные ошибки и отклонения обещаний в наших электронных приложениях и безопасно обрабатывать их.

 npm install electronic-unhandled --save

Кроме того, внесите необходимые изменения, упомянутые в файле package.json, чтобы запустить приложение Electron. Мы продолжим создавать наше приложение, используя ту же кодовую базу. Основные шаги, необходимые для настройки приложения Electron, остаются прежними.
package.json:

{
  "name": "ловушка электрона",
  "версия": "1.0.0",
  "description": "Поймать необработанные ошибки и отклонения обещаний в электронном",
  "main": "main.js",
  "scripts": {
    "старт": "электрон".
  },
  "ключевые слова": [
    "электрон"
  ],
  «автор»: «Радхеш Ханна»,
  "лицензия": "ISC",
  "dependencies": {
    "электрон": "^ 8.3.0",
    "электрон-необработанный": "^ 3.0.2"
  }
}

Выход:

Обработка ошибок в Electron: пакет npm , не обрабатываемый электроном, можно напрямую использовать в основном процессе и процессах рендеринга приложения для обнаружения необработанных ошибок. Этот пакет требует, чтобы Electron 5+ работал без каких-либо проблем. Этот пакет совместим с Electron v8.3.0, работает без ошибок и регулярно обновляется. Для получения более подробной информации об этом пакете, обновлениях версий и журналах изменений перейдите по ссылке: https://www.npmjs.com/package/electron-unhandled . Этот пакет был принят и используется самим Electron в демонстрационных целях.

  • index.html: добавьте в этот файл следующий фрагмент.

HTML




< h3 >Catch Unhandled Errors and Promise Rejections in Electron</ h3 >
< button id = "generate" >
Generate Errors
</ button >
<!-- Adding Individual Renderer Process file -->
  • index.js: кнопка "Создать ошибки" пока не имеет связанных с ней функций. В этом руководстве мы будем генерировать общую ошибку из интерфейса ошибок и передавать ей настраиваемое сообщение. Чтобы изменить это, добавьте следующий фрагмент кода в файл index.js.

javascript




const electron = require( 'electron' )
const electron = require( 'electron' );
// Importing unhandled.
const unhandled = require( 'electron-unhandled' );
unhandled({
logger: () => {
console.error();
},
showDialog: true ,
reportButton: (error) => {
console.log( 'Report Button Initialized' );
}
});
unhandled.logError(Error, {
title: 'Title of the Box'
});
var generate = document.getElementById( 'generate' );
// Throwing a Generic Error from the Error Interface
generate.addEventListener( 'click' , () => {
throw new Error( 'THIS IS AN ERROR' );
});

Объяснение: В приведенном выше приложении, щелкнув элемент HTML DOM Button, мы выдаем новую ошибку с сообщением. Поскольку мы не использовали блок try-catch , это необработанная ошибка, и мы будем обрабатывать ее с помощью пакета npm, не обрабатываемого электроном. Метод экземпляра unhandled (options) не имеет возвращаемого типа и принимает следующие параметры.

  • options: object Мы можем передавать пользовательские конфигурации, которые определяют способ их перехвата. Ошибки должны обрабатываться, выводиться на печать и сообщаться. Он состоит из следующих параметров.
    • logger: Функция (необязательно) Эта функция является необязательным параметром. Этот параметр определяет пользовательскую функцию, которая может использоваться для регистрации / печати обнаруженных ошибок. По умолчанию используется console.error глобального объекта консоли в JavaScript. Этот параметр чрезвычайно полезен, если мы используем внешний инструмент для отслеживания ошибок, таких как часовой, или записываем их во внешний файл в собственном системном каталоге пользователя. Sentry - это инструмент отслеживания ошибок и мониторинга производительности для приложений JavaScript.
    • showDialog: Boolean (Необязательно) Этот параметр является необязательным. Для этого параметра задано значение true , будет отображаться диалоговое окно «Системная ошибка» с заголовком « Необработанная ошибка» в случае ошибок или « Отклонение необработанного обещания» в случае обещаний . По умолчанию в диалоговом окне присутствуют кнопки « ОК» , которые поддерживаются на всех платформах, а также дополнительная кнопка « Копировать ошибку» на платформе Windows. Помимо этого, мы можем добавить еще одну кнопку «Отчет…» , о которой рассказывается ниже. Для получения более подробной информации о диалоговых окнах в Electron, обратитесь к статье: Пользовательские сообщения в ElectronJS. По умолчанию это диалоговое окно отображается только в производственной среде, то есть когда приложение Electron работает в производственном режиме.
    • reportButton: Function (Необязательно) Этот параметр является необязательным. Этот параметр, если он определен, будет отображать кнопку Report… в диалоговом окне Error, как описано в параметре showDialog. По умолчанию этот параметр не определен, т.е. он не будет включен в диалоговое окно ошибки. Эта функция получает сообщение об ошибке: String в качестве аргумента, представляющего обнаруженный объект ошибки. По умолчанию эта функция выполняет другую внутреннюю функцию, которая перенаправляет пользователя на страницу проблем GitHub необработанного пакета и сообщает об обнаруженной ошибке автору этого пакета. Эта внутренняя функция использует внешний пакет electronic-util для перенаправления на страницу проблем Github. Внешний пакет electronic-util добавляет в приложение Electron полезные функции отладки и служебные функции, о которых будет рассказано в отдельной статье. Поведение по умолчанию этой функции можно переопределить, как мы это сделали в приведенном выше примере кода. В нашем коде мы просто печатаем консольный оператор с настраиваемым сообщением и объектом ошибки всякий раз, когда нажимается эта кнопка « Отчет…». Обратитесь к выходным данным для лучшего понимания.

Пакет электрона-необработанный также дает нам unhandled.logError (ошибка, опционы) метод экземпляра , который может быть использован для входа / печати / дисплея пойманных ошибок в Error Handling , например, в блоке поймать заявление примерки улова. Этот метод экземпляра использует те же конфигурации, что и в методе экземпляра unhandled (), или вызывает конфигурации по умолчанию. Следовательно, в нашем случае мы выбрали отображение диалогового окна ошибки в методе unhandled () Instance, и то же самое будет сделано и для этого метода. Он принимает следующие параметры.

  • error: Object Этот параметр представляет объект ошибки обнаруженной ошибки, которую необходимо зарегистрировать.
  • options: Object Этот параметр просто принимает параметр title: String, который представляет заголовок диалогового окна Error, которое будет отображаться в случае, если параметр showDialog установлен в конфигурациях метода экземпляра unhandled (). По умолчанию заголовок диалогового окна ошибки будет отображаться как: $ {appName} обнаружила ошибку , где appName - это имя вашего приложения Electron, как определено в файле package.json. В нашем случае мы просто поймали общий интерфейс ошибок, который должен отображаться при запуске приложения Electron.

На этом этапе после запуска приложения Electron мы должны увидеть, как необработанный электроном пакет создает два настраиваемых диалоговых окна ошибок: одно при запуске приложения, а другое при нажатии кнопки «Создать ошибки».
Выход: