Make bug tracking opt-in

app/package.json

@@ -27,8 +27,8 @@
     "electron >= 8"
   ],
   "dependencies": {
-    "@sentry/browser": "^5.16.1",
-    "@sentry/integrations": "^5.16.1",
+    "@sentry/browser": "^5.17.0",
+    "@sentry/integrations": "^5.17.0",
     "@tensorflow-models/body-pix": "^2.0.5",
     "@tensorflow/tfjs-converter": "^1.7.4",
     "@tensorflow/tfjs-core": "^1.7.4",

app/src/bugs/README-BUGTRACKER.md

@@ -0,0 +1,21 @@
+# Bug Tracking
+
+Knowing which bugs occur is crucial for the maturity of a project. And it is a complex business, where services like
+[sentry.io](https://sentry.io/) provide great infrastructure to learn the most out of the bugs and be able to fix them.
+Since privacy in general, and in particular for this project, is important, I tried to find a balance between code
+quality and privacy concerns.
+
+### Opt-in
+
+It would be sad to loose any bug information if the user is willing to help, but not aware of the feature. A solution
+to this problem is, to ask the user for permission to track errors in the moment they occur. This will not catch all 
+possible errors, but hopefuly most of them. The user still has the possibility to opt-out in the settings.
+
+### Lazy Loading
+
+To make sure no 3rd party code is doing anything in the background without the permission of the user, the related 
+code is only loaded when allowed to. It will not be loaded immediatey but "lazily" on demand.
+
+---
+
+If you still have concerns or have ideas for improvement, please write to <[email protected]>

app/src/bugs/index.js

@@ -0,0 +1,61 @@
+import Vue from 'vue'
+import { PRODUCTION } from '../config'
+import { messages } from '../lib/emitter'
+
+const log = require('debug')('app:bugs')
+
+// Lazy loading of bug tracker
+export function setupBugTracker(done) {
+  if (PRODUCTION && isAllowedBugTracking()) {
+    console.log('Sentry bug tracking is allowed')
+    import(/* webpackChunkName: 'sentry' */ './lazy-sentry').then(({ setupSentry }) => {
+      setupSentry({
+        dsn: 'https://[email protected]/5266804',
+        Vue,
+      })
+      console.log('Did init Sentry bug tracking')
+      if (done) done()
+    })
+  }
+}
+
+// Send bugs if user allowed to do so
+
+let collectedErrors = []
+
+export function isAllowedBugTracking() {
+  return localStorage.allowSentry === '1'
+}
+
+export function setAllowedBugTracking(allowed = true, reloadMessage = 'Reload to activate changes') {
+  if (allowed) {
+    localStorage.allowSentry = '1'
+    setupBugTracker(_ => {
+      for (let e of collectedErrors) {
+        trackException(e)
+      }
+    })
+  } else {
+    localStorage.allowSentry = '0'
+    if (confirm(reloadMessage)) {
+      location.reload()
+    }
+  }
+}
+
+export function trackException(e, silent = false) {
+  if (!silent) {
+    console.error('Exception:', e)
+  }
+  if (window.sentry) {
+    log('sentry exception', e)
+    window.sentry.captureException(e)
+  } else {
+    messages.emit('requestBugTracking')
+  }
+}
+
+export function trackSilentException(e) {
+  trackException(e, true)
+}
+

app/src/sentry.js → app/src/bugs/lazy-sentry.js

@@ -1,7 +1,7 @@
 import * as Sentry from '@sentry/browser'
 import { Vue as VueIntegration } from '@sentry/integrations'
-import { assert } from './lib/assert'
-import { RELEASE } from './config'
+import { assert } from '../lib/assert'
+import { RELEASE } from '../config'
 
 window.sentry = Sentry
 

app/src/components/app-settings.vue

@@ -46,6 +46,7 @@
 import { messages } from '../lib/emitter'
 import SeaSwitch from '../ui/sea-switch'
 import { RELEASE } from '../config'
+import { isAllowedBugTracking, setAllowedBugTracking } from '../bugs'
 
 export default {
   name: 'app-settings',
@@ -61,15 +62,10 @@ export default {
     release: _ => RELEASE,
     sentry: {
       set(v) {
-        localStorage.allowSentry = v ? '1' : '0'
-        if (v) {
-          if (confirm(this.l.settings.sentry_confirm)) {
-            location.reload()
-          }
-        }
+        setAllowedBugTracking(v, this.l.settings.sentry_confirm)
       },
       get() {
-        return localStorage.allowSentry !== '0'
+        return isAllowedBugTracking()
       },
     },
     video() {

app/src/components/app-video.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script>
-import { trackSilentException } from '../lib/bugs'
+import { trackSilentException } from '../bugs'
 
 const log = require('debug')('app:app-peer')
 

app/src/components/app-welcome.vue

@@ -249,7 +249,7 @@
 
 import { DEBUG } from '../config'
 import AppHelp from './app-help'
-import { trackSilentException } from '../lib/bugs'
+import { trackSilentException } from '../bugs'
 
 function generateName() {
 

app/src/config.js

@@ -23,3 +23,5 @@ export const DEBUG = process.env.NODE_ENV !== 'production'
 export const PRODUCTION = !DEBUG
 
 export const RELEASE = process.env.VUE_APP_NAME + '@' + process.env.VUE_APP_VERSION
+
+console.log('Configuration')

app/src/lib/assert.js

@@ -2,7 +2,7 @@
 
 // const log = require('debug')('assert')
 
-import { trackSilentException } from './bugs'
+import { trackSilentException } from '../bugs'
 
 export function assert(cond, ...args) {
   if (!cond) {

app/src/lib/base.js

@@ -1,4 +1,4 @@
-import { trackEvent, trackException, trackSilentException } from './bugs'
+import { trackSilentException } from '../bugs'
 
 export function cloneObject(obj) {
   try {

app/src/lib/emitter.js

@@ -1,4 +1,4 @@
-import { trackSilentException } from './bugs'
+import { trackSilentException } from '../bugs'
 
 const log = require('debug')('app:emitter')
 

app/src/lib/share.js

@@ -1,5 +1,5 @@
 import clipboardCopy from 'clipboard-copy'
-import { trackException } from './bugs'
+import { trackException } from '../bugs'
 
 export function createLinkForRoom(room) {
   return `https://brie.fi/ng/${room}`

app/src/logic/blur.js

@@ -3,7 +3,7 @@
 // https://www.tensorflow.org/js/models
 
 import { assert } from '../lib/assert'
-import { trackException } from '../lib/bugs'
+import { trackException } from '../bugs'
 
 const bodyPix = require('@tensorflow-models/body-pix')
 

app/src/logic/stream.js

@@ -1,4 +1,4 @@
-import { trackException, trackSilentException } from '../lib/bugs'
+import { trackException, trackSilentException } from '../bugs'
 
 const log = require('debug')('app:stream')
 

app/src/logic/webrtc-peer.js

@@ -4,7 +4,7 @@ import SimplePeer from 'simple-peer'
 import { assert } from '../lib/assert'
 import { cloneObject } from '../lib/base'
 import { Emitter } from '../lib/emitter'
-import { trackException } from '../lib/bugs'
+import { trackException } from '../bugs'
 
 const log = require('debug')('app:webrtc-peer')
 

app/src/pwa.js

@@ -5,25 +5,17 @@ import de from './locales/de'
 import en from './locales/en'
 import App from './pwa-app.vue'
 import { state } from './state'
-import { PRODUCTION } from './config'
+import { setupBugTracker } from './bugs'
 
-// Electron specific
+// Electron specific i.e. Windows App will become a nicer modern window title and some other small features
 if (navigator.userAgent.toLowerCase().indexOf(' electron/') > -1 && window.beaker == null) {
   console.log('Identified Electron')
   import(/* webpackChunkName: 'pwa-electron' */ './pwa-electron').then()
   console.log('Handled Electron')
 }
 
-if (PRODUCTION && localStorage.allowSentry !== '0') {
-  console.log('Sentry bug tracking is allowed')
-  import(/* webpackChunkName: 'sentry' */ './sentry').then(({ setupSentry }) => {
-    setupSentry({
-      dsn: 'https://[email protected]/5266804',
-      Vue,
-    })
-    console.log('Did init Sentry bug tracking')
-  })
-}
+// This will be done privacy conform, see bugs/README-BUGTRACKER.md
+setupBugTracker()
 
 Vue.config.productionTip = false
 

app/src/state.js

@@ -1,7 +1,7 @@
 import { messages } from './lib/emitter'
 import { setupWebRTC } from './logic/connection'
 import { defaultAudioConstraints, defaultVideoConstraints, getDevices, getDisplayMedia, getUserMedia, setAudioTracks } from './logic/stream'
-import { trackException, trackSilentException } from './lib/bugs'
+import { trackException, trackSilentException } from './bugs'
 
 const log = require('debug')('app:state')
 

app/src/ui/sea-button.vue

@@ -24,7 +24,7 @@
 <script>
 // import Popover from './sea-popover'
 import SeaSymbol from './sea-symbol'
-import { trackException } from '../lib/bugs'
+import { trackException } from '../bugs'
 
 const log = require('debug')('ui:button')