fix(serve): remove junk terminal output from electron, closes #60

Author: nklayman

__tests__/commands.spec.js

@@ -16,16 +16,24 @@ const mockYargsCommand = jest.fn(() => ({ parse: mockYargsParse }))
 jest.mock('yargs', () => ({ command: mockYargsCommand }))
 jest.mock('@vue/cli-service/lib/commands/build')
 jest.mock('fs-extra')
+jest.mock('../lib/removeJunk.js', () => jest.fn(() => 'removeJunk'))
 jest.mock('electron-builder')
 const mockInstallAppDeps = jest.fn()
 jest.mock('electron-builder/out/cli/install-app-deps.js', () => ({
   installAppDeps: mockInstallAppDeps
 }))
 jest.mock('../lib/webpackConfig.js')
+const mockPipe = jest.fn()
 const mockExeca = {
   on: jest.fn(),
   removeAllListeners: jest.fn(),
-  kill: jest.fn()
+  kill: jest.fn(),
+  stdout: {
+    pipe: jest.fn(() => ({ pipe: mockPipe }))
+  },
+  stderr: {
+    pipe: jest.fn(() => ({ pipe: mockPipe }))
+  }
 }
 jest.mock('execa', () => jest.fn(() => mockExeca))
 jest.mock('@vue/cli-service/lib/commands/serve', () => ({
@@ -419,6 +427,30 @@ describe('serve:electron', () => {
     // Electron was re-launched
     expect(execa).toHaveBeenCalledTimes(3)
   })
+
+  test('Junk output is stripped from electron child process', async () => {
+    await runCommand('serve:electron')
+
+    // Junk is removed
+    expect(mockExeca.stderr.pipe).toBeCalledWith('removeJunk')
+    expect(mockExeca.stdout.pipe).toBeCalledWith('removeJunk')
+    // Output is piped to console
+    expect(mockPipe).toBeCalledWith(process.stderr)
+    expect(mockPipe).toBeCalledWith(process.stdout)
+  })
+
+  test('Junk output is not stripped from electron child process if removeElectronJunk is set to false', async () => {
+    await runCommand('serve:electron', {
+      pluginOptions: { electronBuilder: { removeElectronJunk: false } }
+    })
+
+    // Junk is not removed
+    expect(mockPipe).not.toBeCalled()
+    expect(mockPipe).not.toBeCalled()
+    // Output is still piped to console
+    expect(mockExeca.stderr.pipe).toBeCalledWith(process.stderr)
+    expect(mockExeca.stdout.pipe).toBeCalledWith(process.stdout)
+  })
 })
 
 describe('Custom webpack chain', () => {

docs/guide/configuration.md

@@ -106,4 +106,37 @@ module.exports = {
 
 :::tip Tip <Badge text="1.0.0-rc.1+" type="info"/>
 If you decide to add the `@vue/typescript` plugin to your app later on, make sure to re-invoke the generator of VCP-Electron-Builder with `vue invoke electron-builder`. This will automatically insert missing type definitions to your `background.ts` file.
-:::
+:::
+
+## Electron's Junk Terminal Output
+
+Electron will sometimes produce a bunch of junk output like so:
+
+```
+2018-08-10 22:52:14.068 Electron[90710:4891777] *** WARNING: Textured window <AtomNSWindow: 0x7fd508e75020> is getting an implicitly transparent titlebar. This will break when linking against newer SDKs. Use NSWindow's -titlebarAppearsTransparent=YES instead.
+2018-08-10 22:52:37.919 Electron Helper[90714:4892173] Couldn't set selectedTextBackgroundColor from default ()
+[90789:0810/225757.360355:ERROR:CONSOLE(0)] "Failed to load https://chrome-devtools-frontend.appspot.com/serve_file/@7accc8730b0f99b5e7c0702ea89d1fa7c17bfe33/product_registry_impl/product_registry_impl_module.js: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'chrome-devtools://devtools' is therefore not allowed access. The response had HTTP status code 404.", source: chrome-devtools://devtools/bundled/inspector.html?remoteBase=https://chrome-devtools-frontend.appspot.com/serve_file/@7accc8730b0f99b5e7c0702ea89d1fa7c17bfe33/&can_dock=true&toolbarColor=rgba(223,223,223,1)&textColor=rgba(0,0,0,1)&experiments=true (0)
+[90789:0810/225757.360445:ERROR:CONSOLE(22)] "Empty response arrived for script 'https://chrome-devtools-frontend.appspot.com/serve_file/@7accc8730b0f99b5e7c0702ea89d1fa7c17bfe33/product_registry_impl/product_registry_impl_module.js'", source: chrome-devtools://devtools/bundled/inspector.js (22)
+[90789:0810/225757.361236:ERROR:CONSOLE(105)] "Uncaught (in promise) Error: Could not instantiate: ProductRegistryImpl.Registry", source: chrome-devtools://devtools/bundled/inspector.js (105)
+[90789:0810/225757.361293:ERROR:CONSOLE(105)] "Uncaught (in promise) Error: Could not instantiate: ProductRegistryImpl.Registry", source: chrome-devtools://devtools/bundled/inspector.js (105)
+App logging
+[90789:0810/225802.898597:ERROR:CONSOLE(105)] "Uncaught (in promise) Error: Could not instantiate: ProductRegistryImpl.Registry", source: chrome-devtools://devtools/bundled/inspector.js (105)
+[90789:0810/225803.872738:ERROR:CONSOLE(105)] "Uncaught (in promise) Error: Could not instantiate: ProductRegistryImpl.Registry", source: chrome-devtools://devtools/bundled/inspector.js (105)
+[90789:0810/225803.898240:ERROR:CONSOLE(105)] "Uncaught (in promise) Error: Could not instantiate: ProductRegistryImpl.Registry", source: chrome-devtools://devtools/bundled/inspector.js (105)
+[90789:0810/225803.898297:ERROR:CONSOLE(105)] "Uncaught (in promise) Error: Could not instantiate: ProductRegistryImpl.Registry", source: chrome-devtools://devtools/bundled/inspector.js (105)
+...
+```
+
+VCP Electron Builder will automatically remove this for you (powered by [run-electron](https://github.com/sindresorhus/run-electron)). If you don't want this removed, set `electronJunkOutput` to `false` in plugin options:
+
+```javascript
+// vue.config.js
+
+module.exports = {
+  pluginOptions: {
+    electronBuilder: {
+      removeElectronJunk: false // True by default
+    }
+  }
+}
+```

index.js

@@ -315,14 +315,28 @@ module.exports = (api, options) => {
               [`${outputDir}/background.js`],
               {
                 cwd: api.resolve('.'),
-                stdio: 'inherit',
                 env: {
                   ...process.env,
                   // Disable electron security warnings
                   ELECTRON_DISABLE_SECURITY_WARNINGS: true
                 }
               }
             )
+
+            if (pluginOptions.removeElectronJunk === false) {
+              // Pipe output to console
+              child.stdout.pipe(process.stdout)
+              child.stderr.pipe(process.stderr)
+            } else {
+              // Remove junk terminal output (#60)
+              child.stdout
+                .pipe(require('./lib/removeJunk.js')())
+                .pipe(process.stdout)
+              child.stderr
+                .pipe(require('./lib/removeJunk.js')())
+                .pipe(process.stderr)
+            }
+
             child.on('exit', () => {
               //   Exit when electron is closed
               process.exit(0)

lib/removeJunk.js

@@ -0,0 +1,26 @@
+const split = require('split2')
+const filter = require('through2-filter')
+const map = require('through2-map')
+const pumpify = require('pumpify')
+
+process.env.FORCE_COLOR = '1'
+
+module.exports = () => {
+  const filterStream = filter({ wantStrings: true }, chunk => {
+    // Example: 2018-08-10 22:48:42.866 Electron[90311:4883863] *** WARNING: Textured window <AtomNSWindow: 0x7fb75f68a770>
+    if (
+      /\d+-\d+-\d+ \d+:\d+:\d+\.\d+ Electron(?: Helper)?\[\d+:\d+] /.test(chunk)
+    ) {
+      return false
+    }
+
+    // Example: [90789:0810/225804.894349:ERROR:CONSOLE(105)] "Uncaught (in promise) Error: Could not instantiate: ProductRegistryImpl.Registry", source: chrome-devtools://devtools/bundled/inspector.js (105)
+    if (/\[\d+:\d+\/|\d+\.\d+:ERROR:CONSOLE\(\d+\)\]/.test(chunk)) {
+      return false
+    }
+
+    return true
+  })
+
+  return pumpify(split(), filterStream, map(chunk => `${chunk}\n`))
+}

package.json

@@ -33,7 +33,11 @@
     "fs-extra": "^7.0.0",
     "lodash.merge": "^4.6.1",
     "portfinder": "^1.0.16",
+    "pumpify": "^1.5.1",
     "spectron": "^3.8.0",
+    "split2": "^3.0.0",
+    "through2-filter": "^3.0.0",
+    "through2-map": "^3.0.0",
     "uglifyjs-webpack-plugin": "^1.3.0",
     "unzip-crx": "^0.2.0",
     "webpack": "^4.16.5",

yarn.lock

@@ -9366,7 +9366,7 @@ pump@^3.0.0:
     end-of-stream "^1.1.0"
     once "^1.3.1"
 
-pumpify@^1.3.3:
+pumpify@^1.3.3, pumpify@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.1.tgz#36513be246ab27570b1a374a5ce278bfd74370ce"
   dependencies:
@@ -9583,6 +9583,14 @@ [email protected], readable-stream@~1.1.9:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
+readable-stream@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.0.2.tgz#ca0f4f8e426bcabd772df73096b8d3f6722b31ff"
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
 readable-stream@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
@@ -10456,6 +10464,12 @@ split-string@^3.0.1, split-string@^3.0.2:
   dependencies:
     extend-shallow "^3.0.0"
 
+split2@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/split2/-/split2-3.0.0.tgz#55057cd560687a7ef6464471597404577ff1735d"
+  dependencies:
+    readable-stream "^3.0.0"
+
 [email protected]:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/split/-/split-0.3.3.tgz#cd0eea5e63a211dfff7eb0f091c4133e2d0dd28f"
@@ -10642,7 +10656,7 @@ string_decoder@^0.10.25, string_decoder@~0.10.x:
   version "0.10.31"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
 
-string_decoder@^1.0.0, string_decoder@~1.1.1:
+string_decoder@^1.0.0, string_decoder@^1.1.1, string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
   dependencies:
@@ -10938,7 +10952,21 @@ [email protected]:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-0.0.2.tgz#cfedf88e60c00dd9697b61fdd2a8343a9b680eaf"
 
-through2@^2.0.0:
+through2-filter@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/through2-filter/-/through2-filter-3.0.0.tgz#700e786df2367c2c88cd8aa5be4cf9c1e7831254"
+  dependencies:
+    through2 "~2.0.0"
+    xtend "~4.0.0"
+
+through2-map@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/through2-map/-/through2-map-3.0.0.tgz#a6c3026ce63b4898a997d540506b66ffd970f271"
+  dependencies:
+    through2 "~2.0.0"
+    xtend "^4.0.0"
+
+through2@^2.0.0, through2@~2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be"
   dependencies:
@@ -11431,7 +11459,7 @@ utf8-byte-length@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz#f45f150c4c66eee968186505ab93fcbb8ad6bf61"
 
-util-deprecate@~1.0.1:
+util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
 
@@ -12271,7 +12299,7 @@ [email protected]:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.0.0.tgz#e698189de49dd2a18cc5687b05e17c8e43943020"
 
-xtend@^4.0.0, xtend@~4.0.1:
+xtend@^4.0.0, xtend@~4.0.0, xtend@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"