feat: add error reporting

app/assets/javascripts/app.ts

@@ -3,6 +3,7 @@
 declare const __VERSION__: string;
 declare const __WEB__: boolean;
 
+import { SNLog } from 'snjs';
 import angular from 'angular';
 import { configRoutes } from './routes';
 
@@ -64,11 +65,14 @@ if (__WEB__) {
   (window as any).startApplication = startApplication;
 }
 
-function startApplication(
+async function startApplication(
   defaultSyncServerHost: string,
   bridge: Bridge
 ) {
-  startErrorReporting();
+
+  SNLog.onLog = console.log;
+  await startErrorReporting();
+
   angular.module('app', ['ngSanitize']);
 
   // Config
@@ -142,4 +146,6 @@ function startApplication(
       },
     });
   }
+
+  angular.bootstrap(document, ['app']);
 }

app/assets/javascripts/directives/views/accountMenu.ts

@@ -27,6 +27,7 @@ import { PasswordWizardType } from '@/types';
 import { BackupFile } from 'snjs/dist/@types/services/protocol_service';
 import { confirmDialog, alertDialog } from '@/services/alertService';
 import { autorun, IReactionDisposer } from 'mobx';
+import { storage, StorageKey } from '@/services/localStorage';
 
 const ELEMENT_ID_IMPORT_PASSWORD_INPUT = 'import-password-request';
 
@@ -65,6 +66,7 @@ type AccountMenuState = {
   encryptionEnabled: boolean;
   selectedAutoLockInterval: any;
   showBetaWarning: boolean;
+  errorReportingEnabled: boolean;
 }
 
 class AccountMenuCtrl extends PureViewCtrl<{}, AccountMenuState> {
@@ -96,6 +98,7 @@ class AccountMenuCtrl extends PureViewCtrl<{}, AccountMenuState> {
       },
       mutable: {},
       showBetaWarning: false,
+      errorReportingEnabled: !storage.get(StorageKey.DisableErrorReporting),
     } as AccountMenuState;
   }
 
@@ -587,6 +590,31 @@ class AccountMenuCtrl extends PureViewCtrl<{}, AccountMenuState> {
     }
   }
 
+  openErrorReportingDialog() {
+    alertDialog({
+      title: 'Data sent during automatic error reporting',
+      text: `
+        We use <a target="_blank" href="https://www.bugsnag.com/">Bugsnag</a> to automatically
+        reports errors that occur while the app is running.
+        <a target="_blank" href="https://docs.bugsnag.com/platforms/javascript/#sending-diagnostic-data">
+          See this article, paragraph 'Browser' under 'Sending diagnostic data',
+        </a>
+        to know what data is automatically captured.
+      `
+    });
+  }
+
+  toggleErrorReportingEnabled() {
+    if (this.state.errorReportingEnabled) {
+      storage.set(StorageKey.DisableErrorReporting, true);
+    } else {
+      storage.set(StorageKey.DisableErrorReporting, false);
+    }
+    if (!this.application.getSyncStatus().syncInProgress) {
+      window.location.reload();
+    }
+  }
+
   isDesktopApplication() {
     return isDesktopApplication();
   }

app/assets/javascripts/services/errorReporting.ts

@@ -1,14 +1,16 @@
+import { SNLog } from 'snjs';
 import { isDesktopApplication, isDev } from '@/utils';
 import { storage, StorageKey } from './localStorage';
-import Bugsnag from '@bugsnag/js';
 
 declare const __VERSION__: string;
 
 export async function startErrorReporting() {
   if (storage.get(StorageKey.DisableErrorReporting)) {
+    SNLog.onError = console.error;
     return;
   }
   try {
+    const { default: Bugsnag } = await import('@bugsnag/js');
     Bugsnag.start({
       apiKey: (window as any)._bugsnag_api_key,
       appType: isDesktopApplication() ? 'desktop' : 'web',
@@ -17,6 +19,13 @@ export async function startErrorReporting() {
       autoTrackSessions: false,
       releaseStage: isDev ? 'development' : undefined
     });
+    if (isDev) {
+      SNLog.onError = console.error;
+    } else {
+      SNLog.onError = (error) => {
+        Bugsnag.notify(error);
+      }
+    }
   } catch (error) {
     console.error('Failed to start Bugsnag.', error);
   }

app/assets/templates/directives/account-menu.pug

@@ -302,6 +302,18 @@
                 | the whole file, please use the Batch Manager extension.
           .sk-panel-row
             .sk-spinner.small.info(ng-if='self.state.importData.loading')
+        .sk-panel-section
+          .sk-panel-section-title Error Reporting
+          .sk-panel-section-subtitle.info
+            | Automatic error reporting is {{ self.state.errorReportingEnabled ? 'enabled.' : 'disabled.' }}
+          p.sk-p
+            | Help us improve Standard Notes by automatically submitting
+            | anonymized error reports.
+          .sk-panel-row
+            button(ng-click="self.toggleErrorReportingEnabled()").sk-button.info
+              span.sk-label {{ self.state.errorReportingEnabled ? 'Disable' : 'Enable'}} Error Reporting
+          .sk-panel-row
+            a(ng-click="self.openErrorReportingDialog()").sk-a What data is being sent?
     .sk-panel-footer
       .sk-panel-row
         .sk-p.left.neutral

app/views/application/app.html.erb

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html ng-app="app">
+<html>
   <head>
     <meta charset="utf-8"/>
     <meta content="IE=edge" http-equiv="X-UA-Compatible"/>

index.html

@@ -2,7 +2,7 @@
   This file is strictly used for local development using the webpack-dev-server.
 -->
 <!DOCTYPE html>
-<html ng-app="app">
+<html>
 
 <head>
   <meta charset="utf-8" />

package-lock.json

@@ -11028,8 +11028,8 @@
       "from": "github:standardnotes/sncrypto#8794c88daa967eaae493cd5fdec7506d52b257ad"
     },
     "snjs": {
-      "version": "github:standardnotes/snjs#b7866c68243b418ae5e7be830d1593f0e07333e4",
+      "version": "github:standardnotes/snjs#5757198630342821fdb0e8133b1597a39e0502ad",
-      "from": "github:standardnotes/snjs#b7866c68243b418ae5e7be830d1593f0e07333e4"
+      "from": "github:standardnotes/snjs#5757198630342821fdb0e8133b1597a39e0502ad"
     },
     "sockjs": {
       "version": "0.3.20",

package.json

@@ -72,6 +72,6 @@
     "@bugsnag/js": "^7.5.1",
     "mobx": "^6.0.1",
     "sncrypto": "github:standardnotes/sncrypto#8794c88daa967eaae493cd5fdec7506d52b257ad",
-    "snjs": "github:standardnotes/snjs#b7866c68243b418ae5e7be830d1593f0e07333e4"
+    "snjs": "github:standardnotes/snjs#5757198630342821fdb0e8133b1597a39e0502ad"
   }
 }