Configure Sentry

.electron-vue/build.js

@@ -2,6 +2,7 @@
 
 process.env.NODE_ENV = 'production'
 
+require('../env')
 const fs = require('fs').promises
 const dateFormat = require('dateformat')
 const path = require('path')
@@ -54,7 +55,15 @@ async function build() {
     process.exit()
   })
 
-  pack(mainConfig).then(result => {
+  pack({
+    ...mainConfig,
+    plugins: [
+      ...mainConfig.plugins,
+      new webpack.DefinePlugin({
+        'process.env.BUILD': `"${buildNumber}"`
+      }),
+    ]
+  }).then(result => {
     results += result + '\n\n'
     m.success('main')
   }).catch(err => {

.electron-vue/dev-runner.js

@@ -1,5 +1,6 @@
 'use strict'
 
+require('../env')
 const chalk = require('chalk')
 const electron = require('electron')
 const path = require('path')

.electron-vue/webpack.main.config.js

@@ -17,17 +17,6 @@ let mainConfig = {
   ],
   module: {
     rules: [
-      // {
-      //   test: /\.(js)$/,
-      //   enforce: 'pre',
-      //   exclude: /node_modules/,
-      //   use: {
-      //     loader: 'eslint-loader',
-      //     options: {
-      //       formatter: require('eslint-friendly-formatter')
-      //     }
-      //   }
-      // },
       {
         test: /\.js$/,
         use: 'babel-loader',
@@ -75,7 +64,8 @@ if (process.env.NODE_ENV === 'production') {
   mainConfig.plugins.push(
     new BabiliWebpackPlugin(),
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': '"production"'
+      'process.env.NODE_ENV': '"production"',
+      'process.env.SENTRY_DSN': `"${process.env.SENTRY_DSN}"`
     })
   )
 }

.electron-vue/webpack.renderer.config.js

@@ -168,7 +168,8 @@ if (process.env.NODE_ENV === 'production') {
       }
     ]),
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': '"production"'
+      'process.env.NODE_ENV': '"production"',
+      'process.env.SENTRY_DSN': `"${process.env.SENTRY_DSN}"`
     }),
     new webpack.LoaderOptionsPlugin({
       minimize: true

.env.example

@@ -0,0 +1 @@
+SENTRY_DSN=https://[email protected]/1468711

.gitignore

@@ -7,3 +7,5 @@ npm-debug.log
 npm-debug.log.*
 thumbs.db
 !.gitkeep
+sentry.properties
+.env

env.js

@@ -0,0 +1,2 @@
+const dotEnv = require('dotenv-safe')
+if (!process.env.CI) dotEnv.load()

package.json

@@ -73,12 +73,14 @@
   },
   "dependencies": {
     "@kubernetes/client-node": "^0.8.2",
+    "@sentry/electron": "^0.17.1",
+    "@sentry/integrations": "^5.3.1",
     "clone-deep": "^4.0.1",
+    "dotenv-safe": "^6.1.0",
     "electron-store": "^3.2.0",
     "electron-updater": "^4.0.6",
     "killable": "^1.0.1",
     "lodash": "^4.17.11",
-    "promise-fs": "^2.1.0",
     "vue": "^2.6.10",
     "vue-click-outside": "^1.0.7",
     "vue-electron": "^1.0.6",
@@ -93,7 +95,7 @@
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.3",
     "babel-loader": "^7.1.4",
-    "babel-plugin-istanbul": "^4.1.6",
+    "babel-plugin-istanbul": "^5.1.4",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-stage-0": "^6.24.1",
@@ -125,7 +127,7 @@
     "gm": "^1.23.1",
     "html-webpack-plugin": "^3.2.0",
     "inject-loader": "^4.0.1",
-    "karma": "^2.0.2",
+    "karma": "^4.1.0",
     "karma-chai": "^0.1.0",
     "karma-coverage": "^1.1.2",
     "karma-electron": "^6.0.0",

sentry-symbols.js

@@ -0,0 +1,105 @@
+#!/usr/bin/env node
+
+let SentryCli;
+let download;
+
+try {
+  SentryCli = require('@sentry/cli');
+  download = require('electron-download');
+} catch (e) {
+  console.error('ERROR: Missing required packages, please run:');
+  console.error('npm install --save-dev @sentry/cli electron-download');
+  process.exit(1);
+}
+
+const VERSION = /\bv?(?:0|[1-9]\d*)\.(?:0|[1-9]\d*)\.(?:0|[1-9]\d*)(?:-[\da-z-]+(?:\.[\da-z-]+)*)?(?:\+[\da-z-]+(?:\.[\da-z-]+)*)?\b/i;
+const SYMBOL_CACHE_FOLDER = '.electron-symbols';
+const package = require('./package.json');
+const sentryCli = new SentryCli('./sentry.properties');
+
+async function main() {
+  let version = getElectronVersion();
+  if (!version) {
+    console.error('Cannot detect electron version, check package.json');
+    return;
+  }
+
+  console.log('We are starting to download all possible electron symbols');
+  console.log('We need it in order to symbolicate native crashes');
+  console.log(
+    'This step is only needed once whenever you update your electron version',
+  );
+  console.log('Just call this script again it should do everything for you.');
+
+  let zipPath = await downloadSymbols({
+    version,
+    platform: 'darwin',
+    arch: 'x64',
+    dsym: true,
+  });
+  await sentryCli.execute(['upload-dif', '-t', 'dsym', zipPath], true);
+
+  zipPath = await downloadSymbols({
+    version,
+    platform: 'win32',
+    arch: 'ia32',
+    symbols: true,
+  });
+  await sentryCli.execute(['upload-dif', '-t', 'breakpad', zipPath], true);
+
+  zipPath = await downloadSymbols({
+    version,
+    platform: 'win32',
+    arch: 'x64',
+    symbols: true,
+  });
+  await sentryCli.execute(['upload-dif', '-t', 'breakpad', zipPath], true);
+
+  zipPath = await downloadSymbols({
+    version,
+    platform: 'linux',
+    arch: 'x64',
+    symbols: true,
+  });
+  await sentryCli.execute(['upload-dif', '-t', 'breakpad', zipPath], true);
+
+  console.log('Finished downloading and uploading to Sentry');
+  console.log(`Feel free to delete the ${SYMBOL_CACHE_FOLDER}`);
+}
+
+function getElectronVersion() {
+  if (!package) {
+    return false;
+  }
+
+  let electronVersion =
+    (package.dependencies && package.dependencies.electron) ||
+    (package.devDependencies && package.devDependencies.electron);
+
+  if (!electronVersion) {
+    return false;
+  }
+
+  const matches = VERSION.exec(electronVersion);
+  return matches ? matches[0] : false;
+}
+
+async function downloadSymbols(options) {
+  return new Promise((resolve, reject) => {
+    download(
+      {
+        ...options,
+        cache: SYMBOL_CACHE_FOLDER,
+      },
+      (err, zipPath) => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve(zipPath);
+        }
+      },
+    );
+  });
+}
+
+main().catch(e => console.error(e));

src/common/configure-sentry.js

@@ -0,0 +1,16 @@
+import * as Sentry from '@sentry/electron'
+
+import packageJson from '../../package'
+
+export default function configureSentry(configOverrides = {}) {
+  Sentry.init({
+    dsn: process.env.SENTRY_DSN,
+    ...configOverrides
+  })
+
+  Sentry.configureScope(scope => {
+    scope.setTag('app.version', packageJson.version)
+    scope.setTag('app.build', process.env.BUILD)
+    scope.setTag('app.env', process.env.NODE_ENV)
+  })
+}

src/main/index.js

@@ -1,10 +1,16 @@
 'use strict'
 
+// require Sentry as soon as possible
+import configureSentry from '../common/configure-sentry'
+configureSentry()
+
+/* eslint-disable import/first */
 import { app, BrowserWindow, Menu } from 'electron'
 
 import buildMenuTemplate from './menuTemplate'
 import { checkForUpdates } from './appUpdater'
 import store from './store'
+/* eslint-enable import/first */
 
 /**
  * Set `__static` path to static files in production
@@ -52,7 +58,9 @@ app.on('ready', () => {
   createWindow()
 
   if (store.notFirstLaunch) {
-    checkForUpdates()
+    if (process.env.NODE_ENV === 'production') {
+      checkForUpdates()
+    }
   }
 
   store.notFirstLaunch = true

src/renderer/configure-sentry.js

@@ -0,0 +1,21 @@
+import { getCurrentHub } from '@sentry/electron'
+import * as Integrations from '@sentry/integrations'
+import configureSentryDefault from '../common/configure-sentry'
+
+export default function configureSentry(overrides = {}) {
+  // This integrations prevent an appearing of errors to console, so it is enabled only for production
+  const enableVueIntegration = process.env.NODE_ENV === 'production'
+
+  const vueIntegration = new Integrations.Vue({ Vue: overrides.Vue, attachProps: true })
+
+  // > Electron SDK hasn't been updated to use 5.x yet
+  // So we have to patch integration
+  // https://github.com/getsentry/sentry-javascript/issues/2033
+  vueIntegration.setupOnce = vueIntegration.setupOnce.bind(vueIntegration, null, getCurrentHub)
+
+  configureSentryDefault({
+    ...overrides,
+    Vue: null,
+    integrations: [enableVueIntegration && vueIntegration].filter(Boolean)
+  })
+}

src/renderer/lib/export.js

@@ -1,16 +1,16 @@
-import { readFile, writeFile } from 'promise-fs'
+import { promises as fs } from 'fs'
 import { omit, pick, intersection } from 'lodash'
 import Ajv from 'ajv'
 
 import { serviceSchema } from '../store/modules/Services'
 import { clusterSchema } from '../store/modules/Clusters'
 
 export function saveObjectToJsonFile(object, filename) {
-  return writeFile(filename, JSON.stringify(object))
+  return fs.writeFile(filename, JSON.stringify(object))
 }
 
 export async function readObjectFromJsonFile(filename) {
-  const data = await readFile(filename, { encoding: 'utf8' })
+  const data = await fs.readFile(filename, { encoding: 'utf8' })
   return JSON.parse(data)
 }
 

src/renderer/main.js

@@ -1,8 +1,14 @@
 import Vue from 'vue'
 
+// require Sentry as soon as possible
+import configureSentry from './configure-sentry'
+configureSentry({ Vue })
+
+/* eslint-disable import/first */
 import App from './App'
 import router from './router'
 import store from './store'
+/* eslint-enable import/first */
 
 if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
 Vue.config.productionTip = false
@@ -14,7 +20,7 @@ const vue = new Vue({
   template: '<App/>'
 }).$mount('#app')
 
-if (process.env.NODE_ENV === 'development') {
+if (process.env.NODE_ENV !== 'production') {
   window.Vue = Vue
   window.vue = vue
 }