re-enable sentry for web

static/app-strings.json

@@ -955,5 +955,6 @@
   "After submitting, you will not see the changes immediately. Please check back in a few minutes.": "After submitting, you will not see the changes immediately. Please check back in a few minutes.",
   "Thumbnail Recommended ratio is 1:1": "Thumbnail Recommended ratio is 1:1",
   "Cover Recommended ratio is 6.25:1": "Cover Recommended ratio is 6.25:1",
-  "You already have a claim with this name.": "You already have a claim with this name."
+  "You already have a claim with this name.": "You already have a claim with this name.",
+  "You are not currently sharing diagnostic data so this error was not reported.": "You are not currently sharing diagnostic data so this error was not reported."
 }

ui/analytics.js

@@ -1,7 +1,7 @@
 // @flow
 import { Lbryio } from 'lbryinc';
 import ReactGA from 'react-ga';
-// import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/browser';
 import { history } from './store';
 // @if TARGET='app'
 import Native from 'native';
@@ -22,8 +22,8 @@ ElectronCookies.enable({
 // @endif
 
 type Analytics = {
-  // error: ({}, {}) => Promise<any>,
+  error: string => Promise<any>,
-  error: string => void,
+  sentryError: ({}, {}) => Promise<any>,
   pageView: string => void,
   setUser: Object => void,
   toggle: (boolean, ?boolean) => void,
@@ -51,22 +51,28 @@ let analyticsEnabled: boolean = isProduction;
 
 const analytics: Analytics = {
   error: message => {
-    if (analyticsEnabled && isProduction) {
+    return new Promise(resolve => {
-      Lbryio.call('event', 'desktop_error', { error_message: message });
+      if (analyticsEnabled && isProduction) {
-    }
+        return Lbryio.call('event', 'desktop_error', { error_message: message }).then(() => {
-    // Temporarily disabling sentry
+          resolve(true);
-    // error: (error, errorInfo) => {
+        });
-    // return new Promise(resolve => {
+      } else {
-    //   if (analyticsEnabled && isProduction) {
+        resolve(false);
-    //     Sentry.withScope(scope => {
+      }
-    //       scope.setExtras(errorInfo);
+    });
-    //       const eventId = Sentry.captureException(error);
+  },
-    //       resolve(eventId);
+  sentryError: (error, errorInfo) => {
-    //     });
+    return new Promise(resolve => {
-    //   } else {
+      if (analyticsEnabled && isProduction) {
-    //     resolve(null);
+        Sentry.withScope(scope => {
-    //   }
+          scope.setExtras(errorInfo);
-    // });
+          const eventId = Sentry.captureException(error);
+          resolve(eventId);
+        });
+      } else {
+        resolve(null);
+      }
+    });
   },
   pageView: path => {
     if (analyticsEnabled) {

ui/component/errorBoundary/view.jsx

@@ -18,13 +18,14 @@ type Props = {
 
 type State = {
   hasError: boolean,
-  eventId: ?string,
+  sentryEventId: ?string,
+  desktopErrorReported: boolean,
 };
 
 class ErrorBoundary extends React.Component<Props, State> {
   constructor() {
     super();
-    this.state = { hasError: false, eventId: undefined };
+    this.state = { hasError: false, sentryEventId: undefined, desktopErrorReported: false };
 
     (this: any).refresh = this.refresh.bind(this);
   }
@@ -34,26 +35,23 @@ class ErrorBoundary extends React.Component<Props, State> {
   }
 
   componentDidCatch(error, errorInfo) {
-    // analytics.error(error, errorInfo).then(eventId => {
-    //   this.setState({ eventId });
-    // });
-    let errorMessage = 'Uncaught error\n';
-
     // @if TARGET='web'
-    errorMessage += 'lbry.tv\n';
+    analytics.sentryError(error, errorInfo).then(sentryEventId => {
-    errorMessage += `page: ${window.location.pathname + window.location.search}\n`;
+      this.setState({ sentryEventId });
-    errorMessage += error.stack;
+    });
-    analytics.error(errorMessage);
-
     // @endif
+
     // @if TARGET='app'
+    let errorMessage = 'Uncaught error\n';
     Native.getAppVersionInfo().then(({ localVersion }) => {
       Lbry.version().then(({ lbrynet_version: sdkVersion }) => {
         errorMessage += `app version: ${localVersion}\n`;
         errorMessage += `sdk version: ${sdkVersion}\n`;
         errorMessage += `page: ${window.location.href.split('.html')[1]}\n`;
         errorMessage += `${error.stack}`;
-        analytics.error(errorMessage);
+        analytics.error(errorMessage).then(isSharingData => {
+          this.setState({ desktopErrorReported: isSharingData });
+        });
       });
     });
     // @endif
@@ -69,6 +67,9 @@ class ErrorBoundary extends React.Component<Props, State> {
 
   render() {
     const { hasError } = this.state;
+    const { sentryEventId, desktopErrorReported } = this.state;
+
+    const errorWasReported = IS_WEB ? sentryEventId !== null : desktopErrorReported;
 
     if (hasError) {
       return (
@@ -94,18 +95,24 @@ class ErrorBoundary extends React.Component<Props, State> {
               </I18nMessage>
             }
           />
-          {/* {eventId === null && (
+          {!errorWasReported && (
             <div className="error-wrapper">
               <span className="error-text">
                 {__('You are not currently sharing diagnostic data so this error was not reported.')}
               </span>
             </div>
           )}
-          {eventId && (
+
+          {errorWasReported && (
             <div className="error-wrapper">
-              <span className="error-text">{__('Error ID: %eventId%', { eventId })}</span>
+              {/* @if TARGET='web' */}
+              <span className="error-text">{__('Error ID: %sentryEventId%', { sentryEventId })}</span>
+              {/* @endif */}
+              {/* @if TARGET='app' */}
+              <span className="error-text">{__('This error was reported and will be fixed.')}</span>
+              {/* @endif */}
             </div>
-          )} */}
+          )}
         </div>
       );
     }

ui/index.jsx

@@ -1,5 +1,5 @@
 import 'babel-polyfill';
-// import * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/browser';
 import ErrorBoundary from 'component/errorBoundary';
 import App from 'component/app';
 import SnackBar from 'component/snackBar';
@@ -47,12 +47,12 @@ import apiPublishCallViaWeb from 'lbrytv/setup/publish';
 // Will only work if you have a SENTRY_AUTH_TOKEN env
 // We still add code in analytics.js to send the error to sentry manually
 // If it's caught by componentDidCatch in component/errorBoundary, it will not bubble up to this error reporter
-// if (process.env.NODE_ENV === 'production') {
+if (process.env.NODE_ENV === 'production') {
-// Sentry.init({
+  Sentry.init({
-//   dsn: 'https://f93af3fa9c94470d9a0a22602cce3154@sentry.io/1877677',
+    dsn: 'https://1f3c88e2e4b341328a638e138a60fb73@sentry.lbry.tech/2',
-//   blacklistUrls: ['assets.revcontent.com'],
+    whitelistUrls: [/\/public\/ui.js/],
-// });
+  });
-// }
+}
 
 const PROXY_PATH = 'api/v1/proxy';
 export const SDK_API_URL = `${process.env.SDK_API_URL}/${PROXY_PATH}` || `https://api.lbry.tv/${PROXY_PATH}`;