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);
   }