const log = require('electron-log')electron-log 모듈을 사용하면 log 파일에 로그를 남길 수 있다.
로그에 유의미한 정보를 남기고 싶을 때 어떤 방법이 있을까?
1. ProcessMetric
프로세스의 cpu 사용량, 메모리 정보 등을 파악할 때 사용하는 객체이다.
cpu.percentCPUUsage
프로세스 별 cpu 사용량으로, 아래와 같이 사용 가능하다.
// cpu 사용량 logging
let totalProcessorUsagePercent = 0.0;
for (const processMetric of app.getAppMetrics()) {
totalProcessorUsagePercent += processMetric.cpu.percentCPUUsage;
electronLog.log(
`PID [${processMetric.pid}] { cpu usage : ${processMetric.cpu.percentCPUUsage.toFixed(1) }`
);
}
electronLog.log(`Total CPU usage percent : ${totalProcessorUsagePercent.toFixed(1)}`);프로세스 별 cpu 사용량 및 그 합계를 출력했다.
memory
메모리 사용량을 알고 싶을 때, 아래 값들로 파악할 수 있다. (킬로바이트로 표기)
peakWorkingSetSize
Electron 프로세스가 시스템에서 사용하는 메모리의 최고점
메모리 사용량의 추세를 모니터링하고, 메모리 누수 또는 비효율적인 사용을 식별할 수 있다.
최적화를 위해 메모리 사용량이 증가하는 원인을 찾아 수정할 수도 있다.
workingSetSize
Electron 프로세스가 시스템 메모리에서 실제로 사용 중인 양을 나타낸다.
메모리 사용량을 실시간으로 확인할 수 있기 때문에 앱의 메모리 사용 패턴을 파악할 수 있다.
privateBytes
JS 힙 또는 HTML 콘텐츠와 같은 다른 프로세스에서 공유하지 않는 메모리 양
Windows OS 에서만 사용 가능하다.
cpu 사용량을 남긴 것과 같이 메모리 사용량을 log로 찍어두면 최적화에 도움이 될 것 같다.
2. contentTracing
프로세스의 성능 측정을 위한 모듈로, browserWindow 별 세부 동작을 측정할 수 있다.
크롬의 Lighthouse도 이 모듈을 사용한다고 한다.
레코딩 된 파일은 chrome://tracing 또는 about://tracing 페이지에서 확인 가능하다.
또는 개발자도구 perfomance 탭에서도 확인 가능한데, 이는 일렉트론과 크롬이 같은 API를 사용하여 프로파일링을 하기 때문이다! (버전에 따라 다른듯? 옛날 버전 크롬은...🤔)
categoryFilter
categoryFilter는 추적할 이벤트 카테고리를 필터링하는 데 사용되는 매개변수다.
즉, 추적할 이벤트 유형을 식별하는 데 사용되는데 Electron은 다양한 내부 이벤트 카테고리를 제공한다. 개별적인 카테고리 또는 카테고리 그룹을 선택하여 추적할 수 있다.
참고로 제공되는 카테고리가 아주 많다... -> 링크
기본적으로 가능한 모든 기록을 남기도록 설정되어 있는데, 이러면 정작 보고싶은 정보를 찾지 못할 가능성이 크기 때문에 꼭 필터링을 해줘야 한다.
나는 electron 내부 동작 뿐만아니라 자바스크립트 동작 스택도 보고 싶었기 때문에 아래와 같이 설정했다.
Javascript 스택도 보고 싶을 때
{
recording_mode: 'record-until-full',
included_categories: [
'devtools.timeline',
'disabled-by-default-devtools.timeline',
'disabled-by-default-devtools.timeline.frame',
'disabled-by-default-devtools.timeline.stack',
'v8.execute',
'blink.console',
'blink.user_timing',
'latencyInfo',
'disabled-by-default-v8.cpu_profiler',
'disabled-by-default-v8.cpu_profiler.hires'
],
excluded_categories: ['*']
}위와 같이 설정하면 크롬 개발자도구가 기록하는 것과 거의 일치하는 결과가 나온다.
참고로 ipc.on 으로 수신 된 메인 프로세스에서 실행되는 이벤트들은 각 렌더러가 아닌 메인 프로세스의 차트에서 확인 가능하다.
말하고 보니 당연한 이야기긴 한데... 꽤 오래 찾아 헤매서 기록해둔다.
그리고 일단 구현해놓긴 했으나 개발자도구로 열어서 쫌쫌따리 확인하는게 쉽지 않아 걱정이다. 🥲
