Electron 앱을 디버깅하는 방법

이것이 생산 Electron 애플리케이션을 디버깅하는 느낌입니다.

Electron은 크로스 플랫폼 데스크톱 애플리케이션을 쉽게 개발할 수있는 훌륭한 프레임 워크입니다. 자바 스크립트 개발자라면 데스크톱 애플리케이션을 구축하기로 결정할 때 가장 먼저 접하게 될 것입니다. 나도 알아. 첫 번째와 두 번째 데스크톱 애플리케이션을 구축 할 때 Electron을 사용했습니다. 그 과정에서 개발 과정을 좀 더 원활하게 진행할 수있는 몇 가지 트릭을 배웠습니다. 이러한 트릭 중 하나는 개발 과정에서 볼 수없는 Electron 앱의 패키징 된 프로덕션 버전에서 발생할 수있는 문제를 더 잘 디버깅하는 방법입니다.

Electron에 익숙하지 않은 경우 웹 기술로 앱을 작성하고 데스크톱에서 사용할 수있는 프레임 워크입니다. 이는 전용 Chromium 기반 애플리케이션 내에서 앱을 패키징하여 수행됩니다. 웹 브라우저를 생각해보십시오. 웹 앱과 웹 페이지를 탐색 할 수있는 데스크톱 애플리케이션뿐입니다. 이것이 Electron이 앱을 위해하는 일입니다. 데스크톱 브라우저에서 일회성으로 만듭니다. 이렇게하면 기존 웹 응용 프로그램에서 사용할 수없는 기본 데스크톱 기능에 액세스 할 수 있습니다.

많은 소프트웨어 프로젝트와 마찬가지로 로컬 개발 경험이 프로덕션에서 발생하는 것과 정확히 일치하지 않을 수 있습니다. 프로덕션 용도로 앱을 축소, 빌드, 컴파일 및 패키징하면 미묘한 변경으로 인해 애플리케이션의 환경이 손상되거나 앱이 완전히 중단 될 수 있습니다. 이는 웹 앱에 익숙했던 것보다 더 많은 액세스 권한을 가진 데스크톱 애플리케이션을 다룰 때 특히 그렇습니다. 애플리케이션이 로컬에서 작동하지만 프로덕션 상태에서 작동하지 않을 때 문제를 디버깅하면 실망 스러울 수 있습니다. 이것은 Electron에서 웹 애플리케이션의 JavaScript 출력에만 액세스 할 수 있고 기본 Electron 코드의 출력에는 액세스 할 수없는 경우 훨씬 더 실망스러워집니다. 다행히도 오류 모니터링 서비스를 사용하여이 문제를 해결할 수 있습니다.

우리는 Electron 애플리케이션을 디버깅하고 모니터링하기 위해 Exceptionless 와 Exceptionless JavaScript 클라이언트를 사용할 것입니다 . Exceptionless는 무료로 시작할 수 있으며 완전히 오픈 소스입니다. 시작하자.

Electron 앱의 프로젝트 디렉토리 내에서 npm i exceptionless.

이제 Exceptionless 클라이언트를 구성하여 어디서나 사용할 수 있습니다. 즉, "프론트 엔드"(웹 앱) 코드와 "백 엔드"Electron 코드 모두에서 사용할 수 있습니다. 이 튜토리얼에서는 Electron 코드에만 초점을 맞출 것입니다. 당신의 내부 main.js파일의 다른 수입 아래에 다음을 추가 / 문이 필요합니다

const { ExceptionlessClient } = require("exceptionless")
const client = ExceptionlessClient.default.config.apiKey = "YOUR API KEY"

이제 클라이언트가 구성된 상태에서 Exceptionless를 사용하여 이벤트를 기록 할 수 있습니다. 멋진 점은 이것이 단지 오류 일 필요가 없다는 것입니다. 특정 함수가 메인 Electron 코드 내에서 호출 될 때 기록하고 싶다면, client.submitLog("Function called")좀 더 설명적인 것을 사용할 수 있습니다 . 특정 함수에 대한 로그 이벤트를 제출하면 함수가 호출되고 있는지 확인할 수 있습니다. 물론 오류를 추적 할 수도 있고 추적해야합니다. 이것은 client.submitException(error)오류 로 호출 하는 것만 큼 ​​간단 합니다.

그러나 이것은 모두 매우 추상적입니다. 자, 실용적인 예를 보겠습니다. Electron 앱이 컴퓨터의 하드 디스크에 데이터를 쓰기 위해 이벤트를 수신한다고 가정 해 보겠습니다. "프런트 엔드"html / js 코드에서 오는 트리거가 필요합니다. 그런 다음 해당 트리거를 읽고 조치를 취해야합니다. Electron에서는 ipcMain프런트 엔드 코드에서 이벤트를 수신 하는 데 사용 합니다. 이에 대한 예는 다음과 같습니다.

ipcMain.on("Save File", async (event, message) => {
  try {
    await fs.writeFileSync("/path/to/where/you/want/to/store/the/file", message)
    client.submitLog(`Wrote file successfully with the following content: ${message}`)
  } catch(e) {
    client.submitException(e)
  }
});

Electron 앱이 빌드되고 패키징 된 후에 작성하려는 파일 경로가 존재하지 않는다고 가정 해 보겠습니다 (일반적인 문제는 기본적으로 애플리케이션에 노출되는 PATH 변수가 사용자가 사용하고있는 것과 다를 수 있다는 것입니다. 개발 환경). 해당 경로가 없으면 writeFileSync명령이 작동하지 않습니다. 이유를 모를 것이며 사용자는 작성되어야하는 파일을 가져 오려고 할 때만 알 수 있습니다.

오류 및 이벤트 모니터링없이이를 디버깅하려고한다고 상상해보십시오. 컴퓨터에서 로컬로 실행하고 몇 가지 테스트를 실행하고 사용자가 수행 한 것과 똑같은 단계를 복제하려고합니다. 그리고 모든 것이 작동합니다. 개발 환경이 프로덕션 환경과 충분히 다르기 때문에 프로덕션의 쓰기 경로가 존재하지 않는다는 사실을 깨닫지 못하기 때문에 오류가 표시되지 않습니다.

Electron 앱이 조용히 실패 할 수있는 방법은 백만 가지가 있습니다. 오류 및 이벤트 모니터링을 추가하면 책상에서 머리를 부딪 힐 수있는 문제를 신속하게 디버깅 할 수 있습니다.

Suggested posts

소프트웨어 개발 프로젝트를위한 최고의 개요를 작성하는 5 가지 팁

소프트웨어 개발 프로젝트를위한 최고의 개요를 작성하는 5 가지 팁

작성자 : Jessica Fender 이미지 및 헤더 이미지 출처 : Pixabay 프리랜서, 소프트웨어 개발 기업 직원 또는 회사 소유주이든 관계없이 항상 새로운 비즈니스를 찾고 있습니다. 비즈니스를 찾는 데있어 중요한 부분은 잠재 고객의 요구에 신속하고 적절하게 대응하는 것입니다.

초보자를위한 Pandas — 데이터 프레임 재구성 — 2 부

긴 형식에서 넓은 형식으로 데이터 변환

초보자를위한 Pandas — 데이터 프레임 재구성 — 2 부

지난 튜토리얼에서 우리는 와이드 데이터 양식을 긴 양식으로 재구성하는 Pandas melt 함수를 시연했습니다. 이 튜토리얼은 반대 과정에 초점을 맞출 것입니다.