remove sentry (#2418)

Author: roienatan

package-lock.json

@@ -85,7 +85,6 @@
     "@fortawesome/free-brands-svg-icons": "^5.6.1",
     "@fortawesome/react-fontawesome": "^0.1.3",
     "@portis/web3": "^2.0.0-beta.59",
-    "@sentry/browser": "^5.0.8",
     "@toruslabs/torus-embed": "^1.3.0",
     "@walletconnect/web3-provider": "1.3.1",
     "axios": "^0.21.1",

package.json

@@ -1,5 +1,4 @@
 import { getWeb3ProviderInfo, getProviderNetworkName } from "arc";
-import * as Sentry from "@sentry/browser";
 import * as Redux from "redux";
 
 import Analytics from "lib/analytics";
@@ -23,12 +22,6 @@ export function setCurrentAccount(accountAddress: string, network?: string) {
     };
     dispatch(action);
 
-    if (process.env.NODE_ENV === "production") {
-      Sentry.configureScope((scope) => {
-        scope.setUser({ id: accountAddress || "" });
-      });
-    }
-
     // if the accountAddress is undefined, we are done
     if (accountAddress === undefined) {
       Analytics.reset();

src/@store/web3/web3Actions.ts

@@ -3,37 +3,29 @@ import { Link } from "react-router-dom";
 import * as appCss from "../../layouts/App.scss";
 import * as css from "./Errors.scss";
 
-export default class Error404 extends React.PureComponent {
-
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      sentryEventId: null,
-    };
-  }
-
-  render() {
-    return (
-      <div className={css.errorContainer}>
-        <nav className={appCss.header}>
-          <div>
-            <div className={appCss.menu}>
-              <Link to="/"><img src="/assets/images/alchemy-logo-white.svg"/></Link>
-            </div>
-            <div className={appCss.topInfo}>Alchemy</div>
-          </div>
-        </nav>
-        <div className={css.content}>
-          <div className={css.banner}>
-            <img className={css.stars} src="/assets/images/Errors/stars-404.svg" />
-          </div>
-          <div className={css.title}>Are you lost?</div>
-          <div className={css.description}>This URL seems wrong (probably a copy-paste error 😉)… Please check the url or contact support.</div>
-          <div>
-            <Link to="/"><button className={css.home}>Home</button></Link>
+const Error404 = () => {
+  return (
+    <div className={css.errorContainer}>
+      <nav className={appCss.header}>
+        <div>
+          <div className={appCss.menu}>
+            <Link to="/"><img src="/assets/images/alchemy-logo-white.svg" /></Link>
           </div>
+          <div className={appCss.topInfo}>Alchemy</div>
+        </div>
+      </nav>
+      <div className={css.content}>
+        <div className={css.banner}>
+          <img className={css.stars} src="/assets/images/Errors/stars-404.svg" />
+        </div>
+        <div className={css.title}>Are you lost?</div>
+        <div className={css.description}>This URL seems wrong (probably a copy-paste error 😉)… Please check the url or contact support.</div>
+        <div>
+          <Link to="/"><button className={css.home}>Home</button></Link>
         </div>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
+
+export default Error404;

src/components/Errors/Error404.tsx

@@ -1,19 +1,14 @@
 import * as React from "react";
-import { showReportDialog } from "@sentry/browser";
 import { Link } from "react-router-dom";
 import * as appCss from "../../layouts/App.scss";
 import * as css from "./Errors.scss";
 
 interface IExternalProps {
   errorMessage: string;
-  sentryEventId?: string;
   goHome?: () => void;
 }
 
 export default class ErrorUncaught extends React.PureComponent<IExternalProps> {
-  handleReport = () => {
-    showReportDialog({ eventId: this.props.sentryEventId });
-  }
 
   render() {
     return (
@@ -37,7 +32,6 @@ export default class ErrorUncaught extends React.PureComponent<IExternalProps> {
           <div className={css.title}>Something went wrong…</div>
           <div className={css.description}>{this.props.errorMessage}</div>
           <div>
-            { this.props.sentryEventId ? <a className={css.report} onClick={this.handleReport}>Report</a> : "" }
             { this.props.goHome ? <Link to="/"><button onClick={this.props.goHome} className={css.home}>Home</button></Link> : "" }
           </div>
         </div>

src/components/Errors/ErrorUncaught.tsx

@@ -1,7 +1,6 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faGithub } from "@fortawesome/free-brands-svg-icons/faGithub";
 import { faTwitter } from "@fortawesome/free-brands-svg-icons/faTwitter";
-import { init as sentryInit } from "@sentry/browser";
 import * as Mixpanel from "mixpanel-browser";
 import * as React from "react";
 import { render } from "react-dom";
@@ -15,13 +14,6 @@ async function renderApp() {
   // Add icons we want to use from FontAwesome
   library.add(faGithub, faTwitter);
 
-  if (process.env.NODE_ENV === "production") {
-    sentryInit({
-      dsn: "https://[email protected]/1419793",
-      environment: process.env.NODE_ENV,
-    });
-  }
-
   if (process.env.MIXPANEL_TOKEN && (process.env.NODE_ENV === "production")) {
     Mixpanel.init(process.env.MIXPANEL_TOKEN);
   }

src/index.tsx

@@ -18,7 +18,6 @@ import { matchPath, Link, Route, RouteComponentProps, Switch } from "react-route
 import { ModalContainer } from "react-router-modal";
 import { History } from "history";
 import classNames from "classnames";
-import { captureException, withScope } from "@sentry/browser";
 import { Address } from "@daostack/arc.js";
 import { sortedNotifications } from "@store/notifications/notifications";
 import * as css from "./App.scss";
@@ -80,7 +79,6 @@ type IProps = IExternalProps & IStateProps & IDispatchProps;
 
 interface IState {
   error: Error;
-  sentryEventId: string;
 }
 
 class AppContainer extends React.Component<IProps, IState> {
@@ -92,24 +90,15 @@ class AppContainer extends React.Component<IProps, IState> {
     super(props);
     this.state = {
       error: null,
-      sentryEventId: null,
     };
   }
 
   private showSimpleMessage = (options: ISimpleMessagePopupProps): void => {
     this.props.showSimpleMessage(options);
   }
 
-  public componentDidCatch(error: Error, errorInfo: any): void {
+  public componentDidCatch(error: Error): void {
     this.setState({ error });
-
-    if (process.env.NODE_ENV === "production") {
-      withScope((scope): void => {
-        scope.setExtras(errorInfo);
-        const sentryEventId = captureException(error);
-        this.setState({ sentryEventId });
-      });
-    }
   }
 
   public async componentDidMount(): Promise<void> {
@@ -180,7 +169,7 @@ class AppContainer extends React.Component<IProps, IState> {
   }
 
   private clearError = () => {
-    this.setState({ error: null, sentryEventId: null });
+    this.setState({ error: null });
   }
 
   private dismissNotif = (id: string) => () => this.props.dismissNotification(id);
@@ -224,7 +213,7 @@ class AppContainer extends React.Component<IProps, IState> {
       // eslint-disable-next-line no-console
       console.error(this.state.error);
       return <div>
-        <ErrorUncaught errorMessage={this.state.error.message} sentryEventId={this.state.sentryEventId} goHome={this.clearError}></ErrorUncaught>
+        <ErrorUncaught errorMessage={this.state.error.message} goHome={this.clearError}></ErrorUncaught>
       </div>;
     } else {
       const hasAcceptedCookies = !!localStorage.getItem(AppContainer.hasAcceptedCookiesKey);