Electron 13에서 25버전으로 업그레이드

이재호·2024년 4월 1일
ChromiumDevToolsNodeelectronmigrationversionvue
0

vue devtools 이슈에 따른 업그레이드

Electron stable 버전

  • devtools 이슈가 발생하는 버전은 <13.5.0
  • 현재 14버전 노드 사용하고 있기 때문에 일렉트론 14버전 이상으로 업그레이드 시 노드 버전 업그레이드 사이드이펙트도 고려 필요

비용이 많이 들지 않는 선에서 업그레이드를 고려하기 위해서는 일렉트론 14버전이 적합해 보이나 현재 support되지 않는 버전이기 때문에 추후에 결국 업그레이드를 필요로 함

노드 16버전과 함께 사용하는 일렉트론 22버전이나 18버전과 함께 사용하는 25버전을 사용하는 것이 서포트되는 안정적인 버전

vue electron

현재 프로젝트는 vue electron패키지를 사용 중이기 때문에 vue electorn 패키지와 호환이 되는지 확인이 필요
관련 글

Electron v13.6.9

upgrade Electron version

yarn upgrade electron@13.6.9 렌더링 이슈발생

yarn 패키지 재설치

rm -rf node_modules
rm yarn.lock
yarn install

yarn.lock 파일이 없는 경우에 lru-cache라는 모듈에서 lru-cache@8.0.5: The engine "node" is incompatible with this module. Expected version ">=16.14". Got "14.21.3" 와 같은 에러가 발생하여 lru-cache 버전을 컨트롤 해주어야함

  • libva error: vaGetDriverNameByIndex() failed with unknown libva error, driver_name = (null) 이슈 관련 이슈
  • 일렉트론 실행 시 devtools 콘솔에서 Uncaught ReferenceError: module is not defined 에러 발생 이슈

빌드는 성공적으로 동작

main 파일 수정

위 이슈중 렌더링이 안되는 이유로 유력한 두 번째 이슈를 해결하기 위해 webPreferences에 contextIsolation: false, 옵션을 추가하여 테스트

  • 개발자도구 콘솔에서 Cannot read property 'members' of undefined at setObjectPrototype 이슈 발생 Git Issue1 Git Issue2

Electron 13버전에서는 @electron/remote 를 기존 electron/remote 모듈 대신에 사용하려는 시도가 있고, 그에 따라 electron/remote를 코드 상 초기화 해주어야 함

@electron/remote 초기화 코드

main 프로세스에 @electron/remote를 초기화 하는 코드를 삽입 테스트
require("@electron/remote/main").initialize();

렌더링 가능 및 vue devtools 설치 및 실행 가능 추후 안정화 테스트를 위해 테스트 코드 작성 필요

Electron v25.1.1

upgrade node version

node stable version 18.16.0 업그레이드

nvm install 18

upgrade Electron version

노드 sass version 문제
error /home/jaeho/git/Coyote/node_modules/ : Command failed

upgrade node-sass version

yarn install 디펜던시 설치 성공

실행 시 Error: error:0308010C:digital envelope routines::unsupported webpack 에러 발생

솔루션

audit

위 솔루션에서 제시한 방법 중 가장 간단한 방법인 audit 시도 해보았지만 실행은 정상적으로 되었으나 큰 변화가 있지 않았음

webpack config

위 솔루션의 다음 방법으로 제시 된 방법인 webpack config를 수정해 해시 함수를 수정해주는 방법 시도
hashFunction: "sha512", 을 output 속성에 추가해주는 방법 시도해 보았지만 여전히 같은 에러가 발생

webpack config js

// HACK: OpenSSL 3 does not support md4 any more, but webpack hardcodes it all over the place: https://github.com/webpack/webpack/issues/13572
const crypto = require("crypto");
const crypto_orig_createHash = crypto.createHash;
crypto.createHash = algorithm => crypto_orig_createHash(algorithm == "md4" ? "sha256" : algorithm);

위 코드를 webpack config js 파일에 직접 추가함으로써 crypto 함수의 createHash 함수를 직접 수정하는 방법 시도

failed to build renderer process 렌더러 프로세스 빌드하는 도중 에러발생

main 파일 수정

위 이슈중 렌더링이 안되는 이유로 유력한 두 번째 이슈를 해결하기 위해 webPreferences에 contextIsolation: false, 옵션을 추가하여 테스트

node-sass version

Node Sass version 9.0.0 is incompatible with ^4.0.0
위 이슈 해결을 위해서 sass-loader 13.3 이상의 최신버전 업데이트 필요

TypeError: this.getOptions is not a function at Object.loader 타입에러 발생

webpack v5

참고
위 이슈를 해결하기 위해 webpack v5로 업그레이드 필요
그에 따라 webpack 설정 파일 변경
1. query 옵션 options로 변경
2. configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$ webpack 설정 스트릭트 이슈 devtool: "eval-cheap-module-source-map"로 변경

dev-runner 이슈

기존에 Promise.all([startRenderer(), startMain()])로 프로미스를 한 번에 실행시키는 과정에서 renderer가 먼저 실행되어야 webpackHotMiddleware가 할당되는 현상

 startRenderer()
    .then(() => {
      startMain().then(() => {
        startElectron();
      });
    })
    .catch((err) => {
      console.error(err);
    });

순차적으로 실행할 수 있도록 변경

VueLoaderPlugin

[VueLoaderPlugin Error] No matching use for vue-loader is found. 참고

htmlWebpackPluginAlterChunks

compilation.hooks.htmlWebpackPluginAlterChunks = new SyncWaterfallHook(['chunks', 'objectWithPluginRef']);
html-webpack-plugin 모듈 최신버전 업데이트

htmlWebpackPluginAfterEmit hook

compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync( TypeError: Cannot read properties of undefined (reading 'tapAsync')
compiler.hooks.afterEmit.tapAsync compiler에서 직접 훅에 접근하는 방법으로 해결

Sass loader invalid options object

options has an unknown property 'data'. These properties are valid
옵션 명 additionalData로 변경

electron remote 모듈

@electron/remote is disabled for this WebContents. Call require("@electron/remote/main").enable(webContents) to enable it 

app.on("browser-window-created", (_, window) => {
  require("@electron/remote/main").enable(window.webContents);
})

Cannot read properties of undefined (reading 'Menu')
App.vue 파일에서 기존방식으로 electron remote 사용하는 부분 아래와 같이 변경
const remote = require("@electron/remote");

ElectronStore reading app

Cannot read properties of undefined (reading 'app')
yarn upgrade electron-store@latest
Issue 현재 오픈되어 있는 이슈
yarn-lock파일 vuex-electron에 있는 electron-store 버전을 업그레이드

electron local crash reporter

os.tmpDir is not a function
repo
전혀 업데이트 되고 있지 않은 모듈이라서 만약 사용하지 않는다면 코드에서 삭제 요망

Electron sandboxed_renderer.bundle.js

Issue

gl_surface_presentation_helper.cc

Issue
새로운 버전의 크로미엄에서 발생하는 에러로 추정

cert_verify_proc_builtin.cc

ssl 관련 에러
Issue
Issue
CertVerifyProcBuiltin for 127.0.0.1 failed 로컬 머신에 ssh 접속을 시도하면서 생기는 문제

UI 깨지는 문제

deep 셀렉터가 제대로 동작하지 않는 문제
style 코드에 scoped 파라미터를 제대로 넣지 않아서 /deep/이 동작하지 않는 현상
일렉트론 버전 업그레이드 후 다음과 같이 nested deep에 대해서는 /deep/ 텍스트가 그대로 들어가게 되어 속성이 적용되지 않음

제대로 /deep/을 사용하게 되면 다음과 같이 출력

새로운 버전에서 scope 오타를 사용하게 되었을 때

scoped 스타일을 제대로 사용하게 되었을 때

기존 버전에서는 동작했던 이유

hot reloading 안되는 문제

electronProcess.kill("SIGKILL"); 로 해결

새 크롬 버전에서 포커스를 얻을 때마다 MenuItem 클릭 메서드 실행되는 이슈

if (browserWindow !== undefined)
              this.preferenceToggle()

임시로 위와 같이 작성해서 이슈 해결 조금 더 디깅해볼 필요는 있어 보입니다. 또한 아래 핫로드 이슈와도 관련 있는 것 같습니다.
참고
custom-electron-titlebar에서 remote 모듈 충돌 문제

타이틀바 메뉴바 핫로드 이슈


참고
위 이슈에서 파생된 이슈로 보여집니다. 타이틀바에서 중복된 remote 모듈을 사용함으로써 위와 같은 핫로드 시에도 이슈가 발생하는 것으로 보입니다.

서버 죽었을 때 어플 같이 죽지 않는 이슈

SIGINT 이벤트를 추가해 clean up 진행

테스트 케이스 탭에 컨텐츠 보이지 않는 이슈

이상하게도 .ivu-table-hidden CSS 달려있는 것으로 확인
el-tabs__content 클래스에 height 속성 추가 시 확인 가능
CSS deep 셀렉터가 제대로 동작하지 않아서 발생하는 것으로 확인
deep 셀렉터 수정

파일일괄 설정 클릭 시 동작하지 않는 이슈

핸들러 옵션 변경으로 해결 

  mainWindow.webContents.setWindowOpenHandler((details) => {
    debugger;
    return {
      action: "allow",
      overrideBrowserWindowOptions: {
        frame: false,
        parent: mainWindow,
        webPreferences: {
          plugins: true,
          nodeIntegration: true,
          enableRemoteModule: true,
          contextIsolation: false,
          webSecurity: false,
          defaultFontFamily: {
            sansSerif: "Arial",
          },
        },
      },
    };
  });

파일 불러오기 버그

현상은 우분투에서 같은 경로의 파일셀렉터를 두 번 오픈하려하면 나타나는 현상
일렉트론에서 다이얼로그를 두 번 부르는 현상이 발생하는 것으로 보임
Issue
Issue
Issue
현재 일렉트론 레벨에서 처리중인 이슈입니다.
윈도우즈에서 흰색 네모난 브라우저와 취소 시 Focus를 잃는 현상

  • Focus는 modal:true 옵션으로 처리

chromium gpu error

Skia shader compilation error

참고

compiler.plugin

babili-webpack-plugin is deprecated and teser-webpack-plugin is included with webpack5 default

Electron upgrade pros

참고

Openai

  1. Performance and Stability
    일렉트론을 실행하고 개발하는데 있어서 최적화를 통해 이전보다 성능이 향상
    Github Issue에서 새로운 버전이 앱을 실행하는데도 빠르고 최적화가 잘 되어있으니 사용하라고 권장
  2. Chromium and Node.js
    일렉트론은 Chromium과 Node.js 기반에서 작성되었기 때문에 일렉트론 버전을 높이게 되면 Chromium과 Node.js 버전도 향상시킬 수 있어 성능, 보안과 새로운 스탠다드에 대한 호환성
  3. New Features and APIs
    Electron 버전이 업그레이드 될 때마다 새로운 기능과 API가 추가되어 개발자들에게 도움이 된다.
  4. Developer Tools
    개발자 도구에 대한 업데이트도 꾸준히 진행을 하고 있어서 모니터링이나 디버깅에 유리하다.
  5. Security Update
    보안 위험에 대한 수정
  6. Community Contributions and Bug Fixes
    지속적인 contribution 및 버그 수정

Electron 11 Notable Changes

  • Chromium 87
  • Node.js 12.18.3
  • V8 8.7
  • Apple M1 하드웨어 지원
  • context bridge에 큰 오브젝트를 전달하는 성능 향상

Electron 11 Breaking Changes

  • BrowserView.{fromId, fromWebContents, getAllViews} API 제거
  • BrowserView id 속성 제거

Electron 12 Notable Changes

  • Chromium 89
  • Node.js 14.16
  • V8 8.9
  • 메인 프로세스에서 webContents 인스턴스의 sub-frame에 접근할 수 있는 webFrameMain API추가

Electron 12 Breaking Changes

  • remote 모듈 @electron/remote 모듈로 변경
  • contextIsolation 기본값 true로 변경
  • worldSafeExecuteJavaScript 기본값 true로 변경
  • crashReporter.start({compress}) 기본값 true로 변경
  • Chromium Flash 지원 제거
  • Chromium x86 CPU지원 시 SSE3 요구

Electron 13 Notable Changes

  • Chromium 91
  • Node.js 14.16
  • V8 9.1
  • 현재 렌더러 컨텍스트가 contextIsolation 허용여부 확인할 수 있는 process.contextIsolated 속성 추가
  • session data를 위한 디스크 path를 가져올 수 있는 session.storagePath API 추가
  • new-window 이벤트 webContents.setWindowOpenHandler()로 변경

Electron 13 Breaking Changes

  • window.open() frameName 파라미터가 더이상 윈도우 타이틀로 설정되지 않음

Electron 14 Notable Changes

  • Chromium 93
  • Node.js 14.17
  • V8 9.3
  • 자식 윈도우가 더이상 BrowserWindow 생성자 옵션을 상속받지 않음
  • 쿠키 암호화 지원

Electron 14 Breaking Changes

  • app.allowRendererProcessReuse 제거
  • remote 모듈 제거
  • additionalFeatures 속성 제거
  • 자식 윈도우가 더이상 BrowserWindow 생성자 옵션을 상속받지 않음
  • worldSafeExecuteJavaScript 제거
  • nativeWindowOpen true로 기본값 설정
  • BrowserWindow 생성 시 affinity 옵션 제거

Electron 15 Notable Changes

  • Chromium 94
  • Node.js 16.5
  • V8 9.4
  • string 암호화 API인 safeStorage 추가
  • WebContents에 페이지에 frame이 생성될 때 호출되는 frame-created 이벤트 추가

Electron 16 Notable Changes

  • Chromium 96
  • Node.js 16.9.1
  • V8 9.6
  • WebHID API 지원
  • 인스턴스 간 데이터를 공유하기 위한 app.requestSingleInstanceLock 데이터 파라미터 추가
  • commandLine.removeSwitch 추가

Electron 16 Breaking Changes

  • 프로젝트가 node-gyp를 사용해서 native 모듈을 빌드한다면 --force-process-config 옵션을 사용해 셋업해주어야 함
  • crashReporter API가 Breakpad 에서 Crashpad로 변경

Electron 17 Notable Changes

  • Chromium 98
  • Node.js 16.13
  • V8 9.8

Electron 17 Breaking Changes

  • desktopCapture.getSources API가 이제는 main process에서만 허용

Electron 18 Notable Changes

  • Chromium 100
  • Node.js 16.13.2
  • V8 10.0
  • code cache 디렉토리를 설정하기 위한 ses.setCodeCachePath() API 추가
  • WebContents에 focus, blur 이벤트 추가
  • 두 번째 인스턴스에서 첫 번째 인스턴스로 데이터를 리턴하기 위해 first-instance-ack 이벤트 추가
  • setBackgroundColor에 더 많은 컬러 포맷 추가

Electron 18 Breaking Changes

nativeWindowOpen 제거

Electron 19 Notable Changes

  • Chromium 102
  • Node.js 16.14.2
  • V8 10.2

Electron 19 Breaking Changes

  • BrowserWindow 생성자 옵션인 skipTaskbar Linux에서 더이상 지원되지 않음
  • WebPreferences.preloadURL 속성 제거

Electron 20 Notable Changes

  • Chromium 104
  • Node.js 16.15.0
  • V8 10.4
  • 윈도우에서 다크 모드 지원
  • 윈도우11에서 Windows Control Overlay 버튼이 좀 더 네이티브하게 보일 수 있도록 수정
  • 렌더러가 이제는 기본적으로 샌드박스로 지원됩니다.
  • 네이티브 모듈을 빌드할 때 safeguards 추가

Electron 20 Breaking Changes

  • 렌더러가 이제는 기본적으로 샌드박스로 지원됩니다.

Electron 21 Notable Changes

  • Chromium 106
  • Node.js 16.16
  • V8 10.6
  • webFrameMain.origin 추가
  • WebContents.ipc와 WebFrameMain.ipc API 추가
  • Window를 전체화면 어플에서 float over 가능

Electron 22 Notable Changes

  • Chromium 108
  • Node.js 16.17.1
  • V8 10.8
  • UtilityProcess API

Electron 22 Breaking Changes

  • WebContents의 new-window event 제거

Electron 23 Notable Changes

  • Chromium 110
  • Node.js 18.12.1
  • V8 11.0
  • Display 오브젝트에 label 속성 추가
  • 유저의 시스템 언어를 알 수 있는 app.getPreferredSystemLanguages() API 추가
  • WebUSB API 지원 추가
  • SerialPort.forget() 추가

Electron 23 Breaking Changes

  • BrowserWindow scroll-touch-* 이벤트 제거

Electron 24 Notable Changes

  • Chromium 112
  • Node 18.14
  • V8 11.2
  • HttpOnly 쿠키를 필터할 수 있는 기능을 cookies.get()에 추가
  • 전체 프로그램 단위의 최적화 가능

Electron 24 Breaking Changes

  • nativeImage.createThumbnailFromPath(path, size) API 변경

Electron 25 Notable Changes

  • Chromium 114
  • Node.js 18.15
  • V8 11.4
  • Chromium의 네트워킹 스택을 이용하는 net.fetch 메서드 추가

Node

블로그

Node 16 prospects

  • 성능 향상 및 새로운 V8버전으로 인해 실행속도 및 전반적인 성능 개선
  • top-level await 지원 기존에 await 사용하기 위에서 최상단에 async 함수로 래핑해주어야 하는 부분 개선
  • 진단 리포트 기능과 내부에 힙 덤프 기능을 포함하여 상용 서비스에서도 이슈를 분석하고 디버깅하는 것이 가능
  • Streams API 개선
  • LTS 버전

Node 18 prospects

참고

  • OpenSSL 3.0으로 업그레이드 하여 보안 강화
  • native Fetch API
  • --watch 옵션, 파일 변경되면 자동으로 restart해주는 기능 기존의 nodemon과 같은 기능
  • node:test 모듈

Chromium

Chromium 108

  • 새로운 viewport size units를 사용해 반응형 UI를 작성하는데 도움이 될 수 있음
    • dvh, lvh, svh
  • FileSystemSyncAccessHandle 메서드 동기로 동작

Chromium 110

  • iframe에서 Cross Origin Embedder Policy설정되지 않은 써드파티 콘텐츠를 가져오기 위해 credentialless 속성 사용
  • :picture-in-picture 수도 클래스

Chromium 112

  • 기존의 css preprocessor 들 처럼 CSS에서도 nesting 기능 지원

Chromium 114

블로그

  • text-wrap:balance
    • 자동으로 텍스트 위치 맞춰주는 기능
  • CHIPS: Cookies Having Independent Partitioned State
    • 써드파티 쿠키가 최상단 사이트에 의해서 파티셔닝 될 수 있도록 해주는 기능
    • 사이트에 접속했을 때 동일한 임베디드 사이트가 있다면 그 임베디드 사이트에 의해 다른 사이트의 쿠키를 컴파일하고 사용할 수 있는 점 개선
  • Popover API
    • <dialog>와 비슷한 기능을 하는 API 추가

Vue

Release
ChangeLog
가장 안정적인 버전은 3.3.4 버전 현재 2.7.14 버전 사용중
일렉트론과 버전 호환보다 Chromium, Node 버전과의 호환성 이슈 가능성 존재.
node-sass issue
vue-cli-service issue
chromium issue

정리

업그레이드를 진행하게 되면 미래의 업그레이드 비용을 줄이는 것도 고려하여 최신 안정화 버전의 Electron으로 업그레이드를 고려하는 것이 좋을 것 같습니다.

Electron stable versions:

Electron 업그레이드를 진행 시 이점

  • 다양한 Electron API 및 기능
  • Electron 서버 성능 향상 및 안정화
  • Ubuntu 22머신에서 개발자 도구 사용
  • Playwright 새로운 버전 사용으로 더 확장성 있는 테스트 코드 작성
  • Playwright 테스트 코드 VSCode 디버그 모드 사용
  • Chromium 버전 업그레이드에 따른 다양한 CSS 기능 및 보안관련 업데이트
  • Node 버전 업그레이드에 따른 다수의 취약점 보완과 성능 및 새로운 API 사용

Electron 업그레이드 비용

  • Node 버전 업그레이드에 따른 Deprecated된 기능 수정
  • Electron 버전 업그레이드에 따른 Deprecated된 기능 수정
  • Chromium 버전 업그레이드에 따른 Deprecated된 기능 수정
  • 업그레이드 진행해보며 정확한 비용 산정 가능
profile
이재호
복세편살
이전 포스트

EKS RBAC 및 AWS IAM Authenticator

0개의 댓글