Electron Recovery Plan

[yosriady]

@yosriady commented on Mon May 25 2020

TODO: Fix Electron

• [x] Regenerate fresh electron react project comit-app-regen
• [x] Post All previous fixes for Electron from old /app repo
  • [x] webpack postprocessing
  • [x] babel fixes
  • [x] pipelines
  • [x] renderer fixes
  • [x] main process fixes
• [x] Install native dependencies until it fails to build
  • comit-sdk ***
  • bn.js
  • lodash
  • moment
  • satoshi-bitcoin-ts
• [x] Fix CI issues
  • [x] Github Actions
  • [ ] Travis
• [x] Debug latest run https://github.com/yosriady/comit-app-regen/actions/
  • Works with comit-sdk@0.17.0
• [x] Electron package pipeline fixed.

TODO: comit-app-regen -> taker-ui

• [x] Might be easier to just regenerate the whole TS/React app instead of pruning Electron from the existing app
  • [x] Bootstrap structure
  • [x] Dependencies
  • [x] components
  • [x] hooks
  • [x] pages
• [x] Add routers to App.tsx
• [x] Environment variables for app Use file-based electron-store and settings page instead
• [x] Redesign
  • [x] Use chakra UI instead of rimble
    • Revert yarn add rimble-ui styled-components once chakra migration is completed
  • [x] Add sidebar
    • highlight active link
  • [x] settings page
    • [x] use https://github.com/electron-userland/electron-json-storage
    • [x] Create yarn command to populate settings store with ~/.create-comit-app/env contents
  • [x] order confirmation page
  • [x] swap details page
  • [x] Multi stage progress bar
• [x] Add providers to index
• [ ] Upgrade to latest SDK version comit-sdk@0.17.0
  • [ ] There's a problem with SDK version 0.14.0, so the downgrade is temporary
  • [ ] Should upgrade back after resdesign and polish
  • [ ] InMemoryBitcoinWallet to BitcoindWallet

---

@yosriady commented on Tue Jun 09 2020

Electron Recovery Plan:

1. First, extract a pure React app from the existing Electron app
2. Then, generate a new Electron app with the latest libraries
3. Include all previous fixes and pipeline modifications from old project
4. Port the React app back in

Steps 2 and 3

• [ ] ~~Regenerate Electron app ~~ Still fails https://github.com/yosriady/comit-app-regen/runs/753017498
  • [ ] OR if that still fails https://github.com/electron-userland/electron-builder
  • [ ] OR if that still fails https://www.electron.build/ and electron-webpack-quickstart

---

@yosriady commented on Tue Jun 09 2020

Error details: https://gist.github.com/yosriady/a8313b4a7f42ff5e5c5bc3adaa98026c

echo $(brew --prefix openssl)/include
/usr/local/opt/openssl@1.1/include

https://github.com/actions/virtual-environments/issues/837

OpenSSL 1.0.2t 10 Sep 2019 (/usr/local/opt/openssl -> /usr/local/Cellar/openssl/1.0.2t)

---

@yosriady commented on Wed Jun 10 2020

• [ ] Try Travis instead of Github Actions https://electron-react-boilerplate.js.org/docs/ci
  • Check https://travis-ci.com/github/yosriady/comit-app-regen
  • Same error Fatal error: 'openssl/aes.h' file not found https://travis-ci.com/github/yosriady/comit-app-regen/jobs/346519135

---

@yosriady commented on Wed Jun 10 2020

• [ ] CI should use https://github.com/marketplace/actions/upload-files-to-a-github-release

[yosriady]

• [x] Debug Error: No published versions when running packaged app https://github.com/electron-userland/electron-builder/blob/f938de5aae09cb832a6f7f742e64a0d6c025fb9f/packages/electron-updater/src/providers/GitHubProvider.ts#L69

• [x] Debug Error: No latest versions when running packaged app

• [ ] Package app screen is blank

  • [x] main process console does not display any errors
  • [x] Debug with Debugtron

/Applications/TakerUI.app/Contents/Resources/app.asar/dist/renderer.prod.js:16 TypeError: Cannot read property 'insertBefore' of null
    at e.t.insert (dist/renderer.prod.js:2)
    at Tt (dist/renderer.prod.js:2)
    at Array.forEach (<anonymous>)
    at Function.Mt (dist/renderer.prod.js:2)
    at i (dist/renderer.prod.js:2)
    at l (dist/renderer.prod.js:2)
    at Object.a [as insert] (dist/renderer.prod.js:2)
    at zt (dist/renderer.prod.js:2)
    at dist/renderer.prod.js:2
    at vs (dist/renderer.prod.js:16)

• [ ] Try disabling frameless to see if it fixes it

[yosriady]

• [ ] Package app screen is blank, main console does not display any errors
  • [x] manually activate devtools with main.dev.ts add mainWindow.webContents.openDevTools(); and set DEBUG_PROD=true

Debugging plan A:

• [x] Do a git bisect and yarn package at each checkpoint in this list https://github.com/comit-network/taker-ui/actions
• [x] Identify the offending commit
  • [x] This is fine https://github.com/comit-network/taker-ui/commit/92fc253fc8145c4c95c0eb1a0de3de8ed75dd51e
  • [x] This is fine https://github.com/comit-network/taker-ui/commit/78d9c4ad53df1c69c770eef3906a21f997d72af9
  • [x] This is fine https://github.com/comit-network/taker-ui/commit/dfeec4e28402d9d7c9a963214c707c6565c3038d
  • Root https://github.com/comit-network/taker-ui/blob/dfeec4e28402d9d7c9a963214c707c6565c3038d/app/pages/Root.tsx
  • [ ] This is NOT fine https://github.com/comit-network/taker-ui/commit/573e424dce259e1653e926d68cde1cbc487b7596
    • [x] CSSReset?
      • No
    • [x] ThemeProvider?
      • No
    • [x] @chakra-ui/core?
      • No
    • [ ] Revert Root changes https://github.com/comit-network/taker-ui/commit/573e424dce259e1653e926d68cde1cbc487b7596#diff-4b7f0fcecbf54e1197f4a778fa21085b
      • [x] This fixes it - Why?
        • Importing ThemeProvider alone does not seem to trigger the error
      • [x] Remove CSSReset ?
      • [x] No, just removing it from 'Root' doesn't fix it. However, adding just CssReset to the previous Root triggers the error.
      • [x] Adding <Flex id="content"> around Switch breaks Root
      • [x] Adding <Flex> around Switch breaks Root
      • [ ] Does adding any chakra component break the packaged app?
        • YES! This is the problem. ThemeProvider does not count, even Text will trigger the error.
      • [x] Try installing chakra in the /app package.json instead of the root one
        • No, two package.json structure does not address this issue
      • [ ] Try to reproduce and solve in sanity-check repo
      • [x] <CSSReset /> can be extracted to global.css
        • https://github.com/chakra-ui/chakra-ui/blob/master/packages/css-reset/src/css-
  • [x] This is NOT fine https://github.com/comit-network/taker-ui/commit/f9f9b82377514706159bce44ab84c1a9ae0fdfe5
    • [x] Use pages/Root instead of App
      • No, doesn't seem to fix it
    • [ ] Remove CSSReset ?
  • [x] This is NOT fine https://github.com/comit-network/taker-ui/actions/runs/132044574
    • [ ] Review what's wrong with https://github.com/comit-network/taker-ui/commit/e16a62d9316c133394c583219a5b6ceca4422068
      • [x] Check resizable: false
        • No
      • [x] Remove MarketData and Order
        • Still no
      • [x] Remove react-step-progress?
        • No
      • [ ] Something else?

Debugging plan B:

• [X] Check if frameless is causing it
  • No, nor does AppRegionDrag

Debugging plan C:

• [x] Check if webPreferences.preload is causing it
  • No
  • Commenting out preload: path.join(__dirname, 'dist/renderer.prod.js') from main.dev.ts makes the error disappear but screen is still blank with no other errors.

Debugging plan D:

• [x] yarn add fix-path
  • No

Debugging plan E:

• [x] <Route render={() => <Redirect to="/" />} /> in Layout.tsx
  • No

[yosriady]

Using any component from chakra results in TypeError: Cannot read property 'insertBefore' of null when in production mode yarn start

• [ ] Related: https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/2395

• [ ] Compare webpack.config.renderer.dev vs webpack.config.renderer.prod

• [ ] Investigate the difference between prod (build-main build-renderer) and dev (start-renderer-dev):

  • "build": "concurrently \"yarn build-main\" \"yarn build-renderer\"",
  • "build-main": "cross-env NODE_ENV=production webpack --config ./configs/webpack.config.main.prod.babel.js --colors",
  • "build-renderer": "cross-env NODE_ENV=production webpack --config ./configs/webpack.config.renderer.prod.babel.js --colors",
  • "start-renderer-dev": "cross-env NODE_ENV=development webpack-dev-server --config configs/webpack.config.renderer.dev.babel.js",

• [ ] Check if it's an issue with CSS loaders / minification in the prod babel / webpack pipeline

[yosriady]

This hack / temporary fix helps but is not recommended for security reasons: https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/2395#issuecomment-593474211

This is a big security hole because it opens up the app to XSS attack if we ever use any external data https://www.electronjs.org/docs/tutorial/security#isolation-for-untrusted-content

[yosriady]

• [ ] Follow up on https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/2485
  • [ ] renderer process changes https://github.com/electron-react-boilerplate/electron-react-boilerplate/pull/2365
  • https://github.com/electron-react-boilerplate/electron-react-boilerplate/pull/2465/files
  • [x] Apply fix https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/2395#issuecomment-651328378

Optional:

• [ ] Swap typed-css-modules-webpack-plugin for typings-for-css-modules-loader

  • https://github.com/electron-react-boilerplate/electron-react-boilerplate/pull/2465/commits/e1b1054b539dee3367b559eee55236e3e1c35bcc?file-filters%5B%5D=.js
  • https://github.com/electron-react-boilerplate/electron-react-boilerplate/pull/2465/files#diff-6c8abe8b56ebdebae650cc1fabcbe65e

• [ ] Bump all deps to latest semver

  • https://github.com/electron-react-boilerplate/electron-react-boilerplate/pull/2465/commits/3408cd41224cfdcdfecb89d6ed298faec9ac2944
  • https://github.com/electron-react-boilerplate/electron-react-boilerplate/pull/2465/commits/5b358a3395726588e592f30d7ddd9a1cac16912d#diff-b9cfc7f2cdf78a7f4b91a753d10865a2

• [ ] Lazy load routes with react suspense https://github.com/electron-react-boilerplate/electron-react-boilerplate/pull/2465/commits/e466197f503988d96c16264e0303bf3960c3b9cc

[yosriady]

Fixed via electron-react-boilerplate/electron-react-boilerplate#2395 (comment)