diff --git a/static/app-strings.json b/static/app-strings.json index 82fcc440c..e7ab0e2f5 100644 --- a/static/app-strings.json +++ b/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." } \ No newline at end of file diff --git a/ui/analytics.js b/ui/analytics.js index 7e02b3660..903202996 100644 --- a/ui/analytics.js +++ b/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, - error: string => void, + error: string => Promise, + sentryError: ({}, {}) => Promise, 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) { - Lbryio.call('event', 'desktop_error', { error_message: message }); - } - // Temporarily disabling sentry - // error: (error, errorInfo) => { - // return new Promise(resolve => { - // if (analyticsEnabled && isProduction) { - // Sentry.withScope(scope => { - // scope.setExtras(errorInfo); - // const eventId = Sentry.captureException(error); - // resolve(eventId); - // }); - // } else { - // resolve(null); - // } - // }); + return new Promise(resolve => { + if (analyticsEnabled && isProduction) { + return Lbryio.call('event', 'desktop_error', { error_message: message }).then(() => { + resolve(true); + }); + } else { + resolve(false); + } + }); + }, + sentryError: (error, errorInfo) => { + return new Promise(resolve => { + if (analyticsEnabled && isProduction) { + Sentry.withScope(scope => { + scope.setExtras(errorInfo); + const eventId = Sentry.captureException(error); + resolve(eventId); + }); + } else { + resolve(null); + } + }); }, pageView: path => { if (analyticsEnabled) { diff --git a/ui/component/errorBoundary/view.jsx b/ui/component/errorBoundary/view.jsx index ea2732f53..8f68f02a2 100644 --- a/ui/component/errorBoundary/view.jsx +++ b/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 { 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 { } componentDidCatch(error, errorInfo) { - // analytics.error(error, errorInfo).then(eventId => { - // this.setState({ eventId }); - // }); - let errorMessage = 'Uncaught error\n'; - // @if TARGET='web' - errorMessage += 'lbry.tv\n'; - errorMessage += `page: ${window.location.pathname + window.location.search}\n`; - errorMessage += error.stack; - analytics.error(errorMessage); - + analytics.sentryError(error, errorInfo).then(sentryEventId => { + this.setState({ sentryEventId }); + }); // @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 { 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 { } /> - {/* {eventId === null && ( + {!errorWasReported && (
{__('You are not currently sharing diagnostic data so this error was not reported.')}
)} - {eventId && ( + + {errorWasReported && (
- {__('Error ID: %eventId%', { eventId })} + {/* @if TARGET='web' */} + {__('Error ID: %sentryEventId%', { sentryEventId })} + {/* @endif */} + {/* @if TARGET='app' */} + {__('This error was reported and will be fixed.')} + {/* @endif */}
- )} */} + )} ); } diff --git a/ui/index.jsx b/ui/index.jsx index 6579a2193..f3c9b5a45 100644 --- a/ui/index.jsx +++ b/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') { -// Sentry.init({ -// dsn: 'https://f93af3fa9c94470d9a0a22602cce3154@sentry.io/1877677', -// blacklistUrls: ['assets.revcontent.com'], -// }); -// } +if (process.env.NODE_ENV === 'production') { + Sentry.init({ + dsn: 'https://1f3c88e2e4b341328a638e138a60fb73@sentry.lbry.tech/2', + 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}`;