Refactor & add error reporing

2019-01-19 16:48:36 +01:00
parent f3a686b23f
commit b23ffd334d
13 changed files with 1161 additions and 272 deletions
--- a/app/index.html
+++ b/app/index.html
@@ -3,6 +3,8 @@
    <head>
        <meta charset="UTF-8" />
        <title>MQTT-Explorer</title>
+        <script src="./build/bugtracking.bundle.js"></script>
+
        <style>
          body, html {
            margin: 0;
@@ -66,7 +68,7 @@
        <script>
          function onLoad() {
            var script = document.createElement("script");
-            script.src = "./build/bundle.js"
+            script.src = "./build/app.bundle.js"
            document.head.appendChild(script);
          }
          document.addEventListener('DOMContentLoaded', onLoad(), false);
--- a/app/package-lock.json
+++ b/app/package-lock.json
--- a/app/package.json
+++ b/app/package.json
@@ -15,6 +15,7 @@
    "@types/react-dom": "^16.0.11",
    "@types/react-redux": "^6.0.12",
    "electron-nucleus": "^1.11.0",
+    "electron-telemetry": "git+https://github.com/thomasnordquist/electron-telemetry.git",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-redux": "^6.0.0",
--- a/app/src/ErrorBoundary.tsx
+++ b/app/src/ErrorBoundary.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { electronRendererTelementry } from 'electron-telemetry'
 import {
  Button,
  Modal,
@@ -27,6 +28,7 @@ class ErrorBoundary extends React.Component<Props, State> {
  }

  public componentDidCatch(error: Error, errorInfo: any) {
+    electronRendererTelementry.trackError(error)
    console.log('did catch', error)
  }

--- a/app/src/bugtracking.ts
+++ b/app/src/bugtracking.ts
@@ -1,3 +1,4 @@
 import { electronRendererTelementry } from 'electron-telemetry'

 const spareMeFromGc = electronRendererTelementry
+electronRendererTelementry.registerErrorHandler()
--- a/app/src/components/TitleBar.tsx
+++ b/app/src/components/TitleBar.tsx
@@ -3,8 +3,8 @@ import * as q from '../../../backend/src/Model'

 import { AppBar, Button, IconButton, InputBase, Toolbar, Typography } from '@material-ui/core'
 import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
-import CloudOff from '@material-ui/icons/CloudOff'

+import CloudOff from '@material-ui/icons/CloudOff'
 import Menu from '@material-ui/icons/Menu'
 import Search from '@material-ui/icons/Search'
 import { bindActionCreators } from 'redux'
@@ -106,18 +106,17 @@ class TitleBar extends React.Component<Props, State> {
  private renderSearch() {
    const { classes } = this.props

-    return <div className={classes.search}>
-      <div className={classes.searchIcon}>
-        <Search />
+    return (
+      <div className={classes.search}>
+        <div className={classes.searchIcon}>
+          <Search />
+        </div>
+        <InputBase
+          placeholder="Search…"
+          classes={{ root: classes.inputRoot, input: classes.inputInput }}
+        />
      </div>
-      <InputBase
-        placeholder="Search…"
-        classes={{
-          root: classes.inputRoot,
-          input: classes.inputInput,
-        }}
-      />
-    </div>
+    )
  }
 }

--- a/app/src/components/Tree/Tree.tsx
+++ b/app/src/components/Tree/Tree.tsx
@@ -90,7 +90,6 @@ class Tree extends React.Component<Props, TreeState> {
  }

  private handleNewData = (msg: any) => {
-    console.log('new data')
    const edges = msg.topic.split('/')
    const node = q.TreeNodeFactory.fromEdgesAndValue(edges, Buffer.from(msg.payload, 'base64').toString())
    this.state.tree.updateWithNode(node.firstNode())
--- a/app/src/reducers/index.ts
+++ b/app/src/reducers/index.ts
@@ -148,7 +148,6 @@ const reducer: Reducer<AppState | undefined, CustomAction> = (state = initialApp
      if (!action.connectionId) {
        return state
      }
-
      return {
        ...state,
        connected: false,
@@ -165,7 +164,6 @@ const reducer: Reducer<AppState | undefined, CustomAction> = (state = initialApp
      }

    case ActionTypes.connected:
-
      return {
        ...state,
        connected: true,
--- a/app/src/tracking.ts
+++ b/app/src/tracking.ts
@@ -1,6 +1,7 @@
-import { rendererEvents, trackError, trackUserInteraction } from '../../events'
+import { rendererEvents } from '../../events'
 let userId = window.localStorage.getItem('userId')
 const sha1 = require('sha1')
+import { electronRendererTelementry } from 'electron-telemetry'

 if (!userId) {
  userId = sha1(sha1(Math.random()) + sha1(performance.now()) + sha1(Date.now())).slice(0, 8) as string
@@ -19,4 +20,5 @@ export function trackEvent(name: string) {
    return
  }
  Nucleus.track(name)
+  electronRendererTelementry.trackEvent(name)
 }
--- a/app/webpack.config.js
+++ b/app/webpack.config.js
@@ -1,15 +1,24 @@
 var LiveReloadPlugin = require('webpack-livereload-plugin');

 module.exports = {
-    entry: "./src/index.tsx",
+    entry: {
+        app: "./src/index.tsx",
+        bugtracking: "./src/bugtracking.ts",
+    },
    output: {
-        filename: "bundle.js",
+        filename: "[name].bundle.js",
        path: __dirname + "/build"
    },
    optimization: {
      removeAvailableModules: false,
      removeEmptyChunks: false,
-      splitChunks: false,
+      splitChunks: {
+        cacheGroups: {
+          vendors: {
+            filename: '[name].bundle.js'
+          }
+        }
+      }
    },

    target: 'electron-renderer',
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
  "dependencies": {
    "electron-debug": "^2.0.0",
    "electron-log": "^2.2.17",
+    "electron-telemetry": "git+https://github.com/thomasnordquist/electron-telemetry.git",
    "electron-updater": "^4.0.6",
    "mqtt": "^2.18.8",
    "sha1": "^1.1.1"
--- a/src/electron.ts
+++ b/src/electron.ts
@@ -5,6 +5,9 @@ import { menuTemplate } from './MenuTemplate'
 import { autoUpdater } from 'electron-updater'
 import * as log from 'electron-log'
 import { ConnectionManager, updateNotifier } from '../backend/src/index'
+import { electronTelemetryFactory } from 'electron-telemetry'
+
+const electronTelemetry = electronTelemetryFactory('9b0c8ca04a361eb8160d98c5')

 const isDebugEnabled = Boolean(process.argv.find(arg => arg === 'debug'))
 require('electron-debug')({ enabled: isDebugEnabled })