Add Sentry to capture exceptions and console.error messages, add a checkbox in preference to enable/disable error reporting (#3252)

src/renderer/components/+preferences/preferences.tsx

@@ -40,6 +40,8 @@ import { Tab, Tabs } from "../tabs";
 import { FormSwitch, Switcher } from "../switch";
 import { KubeconfigSyncs } from "./kubeconfig-syncs";
 import { SettingLayout } from "../layout/setting-layout";
+import { Checkbox } from "../checkbox";
+import { sentryDsnIsValid } from "../../../common/vars";
 
 enum Pages {
   Application = "application",
@@ -257,6 +259,29 @@ export class Preferences extends React.Component {
           <section id="telemetry">
             <h2 data-testid="telemetry-header">Telemetry</h2>
             {telemetryExtensions.map(this.renderExtension)}
+            {sentryDsnIsValid ? (
+              <React.Fragment key='sentry'>
+                <section id='sentry' className="small">
+                  <SubTitle title='Automatic Error Reporting' />
+                  <Checkbox
+                    label="Allow automatic error reporting"
+                    value={UserStore.getInstance().allowErrorReporting}
+                    onChange={value => {
+                      UserStore.getInstance().allowErrorReporting = value;
+                    }}
+                  />
+                  <div className="hint">
+                    <span>
+                    Automatic error reports provide vital information about issues and application crashes.
+                    It is highly recommended to keep this feature enabled to ensure fast turnaround for issues you might encounter.
+                    </span>
+                  </div>
+                </section>
+                <hr className="small" />
+              </React.Fragment>) :
+              // we don't need to shows the checkbox at all if Sentry dsn is not a valid url
+              null
+            }
           </section>
         )}
         {this.activeTab == Pages.Extensions && (

src/renderer/components/error-boundary/error-boundary.tsx

@@ -21,74 +21,54 @@
 
 import "./error-boundary.scss";
 
-import React, { ErrorInfo } from "react";
-import { reaction } from "mobx";
-import { disposeOnUnmount, observer } from "mobx-react";
+import React from "react";
 import { Button } from "../button";
 import { navigation } from "../../navigation";
 import { issuesTrackerUrl, slackUrl } from "../../../common/vars";
-
-interface Props {
-}
-
-interface State {
-  error?: Error;
-  errorInfo?: ErrorInfo;
-}
+import * as Sentry from "@sentry/react";
+import { observer } from "mobx-react";
 
 @observer
-export class ErrorBoundary extends React.Component<Props, State> {
-  public state: State = {};
-
-  @disposeOnUnmount
-  resetOnNavigate = reaction(
-    () => navigation.toString(),
-    () => this.setState({ error: null, errorInfo: null })
-  );
-
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    this.setState({ error, errorInfo });
-  }
-
-  back = () => {
-    navigation.goBack();
-  };
-
+export class ErrorBoundary extends React.Component {
   render() {
-    const { error, errorInfo } = this.state;
+    return (
+      <Sentry.ErrorBoundary
+        fallback={({ error, componentStack, resetError }) => {
+          const slackLink = <a href={slackUrl} rel="noreferrer" target="_blank">Slack</a>;
+          const githubLink = <a href={issuesTrackerUrl} rel="noreferrer" target="_blank">Github</a>;
+          const pageUrl = location.pathname;
 
-    if (error) {
-      const slackLink = <a href={slackUrl} rel="noreferrer" target="_blank">Slack</a>;
-      const githubLink = <a href={issuesTrackerUrl} rel="noreferrer" target="_blank">Github</a>;
-      const pageUrl = location.pathname;
-
-      return (
-        <div className="ErrorBoundary flex column gaps">
-          <h5>
-            App crash at <span className="contrast">{pageUrl}</span>
-          </h5>
-          <p>
-            To help us improve the product please report bugs to {slackLink} community or {githubLink} issues tracker.
-          </p>
-          <div className="wrapper">
-            <code className="block">
-              <p className="contrast">Component stack:</p>
-              {errorInfo.componentStack}
-            </code>
-            <code className="box grow">
-              <p className="contrast">Error stack:</p> <br/>
-              {error.stack}
-            </code>
-          </div>
-          <Button
-            className="box self-flex-start"
-            primary label="Back"
-            onClick={this.back}
-          />
-        </div>
-      );
-    }
-
-    return this.props.children;
+          return (
+            <div className="flex ErrorBoundary column gaps">
+              <h5>
+                App crash at <span className="contrast">{pageUrl}</span>
+              </h5>
+              <p>
+                To help us improve the product please report bugs to {slackLink} community or {githubLink} issues tracker.
+              </p>
+              <div className="wrapper">
+                <code className="block">
+                  <p className="contrast">Component stack:</p>
+                  {componentStack}
+                </code>
+                <code className="box grow">
+                  <p className="contrast">Error stack:</p> <br/>
+                  {error.stack}
+                </code>
+              </div>
+              <Button
+                className="box self-flex-start"
+                primary label="Back"
+                onClick={() => {
+                  resetError();
+                  navigation.goBack();
+                }}
+              />
+            </div>
+          );
+        }}>
+        {this.props.children}
+      </Sentry.ErrorBoundary>
+    );
   }
 }

src/renderer/lens-app.tsx

@@ -36,6 +36,9 @@ import { registerIpcHandlers } from "./ipc";
 import { ipcRenderer } from "electron";
 import { IpcRendererNavigationEvents } from "./navigation/events";
 import { catalogEntityRegistry } from "./api/catalog-entity-registry";
+import { SentryInit } from "../common/sentry";
+
+SentryInit();
 
 @observer
 export class LensApp extends React.Component {