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

src/common/sentry.ts

@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { CaptureConsole, Dedupe, Offline } from "@sentry/integrations";
+import type { Event as SentryEvent } from "@sentry/types";
+import { sentryDsn, sentryDsnIsValid, isProduction } from "./vars";
+import { UserStore } from "./user-store";
+import logger from "../main/logger";
+
+// https://www.electronjs.org/docs/api/process#processtype-readonly
+const electronProcessType = ["browser", "renderer", "worker"] as const;
+
+export const integrations = [
+  new CaptureConsole({ levels: ["error"] }),
+  new Dedupe(),
+  new Offline()
+];
+
+const initialScope = (processType: typeof electronProcessType[number]) => {
+  return {
+    tags: {
+      // "translate" browser to 'main' as Lens developer more familiar with the term 'main'
+      "process": processType === "browser" ? "main" : "renderer"
+    }
+  };
+};
+
+export const environment = isProduction ? "production" : "development";
+
+const logInitError = (reason: string) => {
+  logger.warn(`⚠️  [SENTRY-INIT]: ${reason}, Sentry is not initialized.`);
+};
+
+export const beforeSend = (event: SentryEvent) => {
+  const allowErrorReporting = UserStore.getInstance().allowErrorReporting;
+
+  if (allowErrorReporting) return event;
+
+  logger.info(`🔒  [SENTRY-BEFORE-SEND-HOOK]: allowErrorReporting: ${allowErrorReporting}. Sentry event is caught but not sent to server.`);
+  logger.info("🔒  [SENTRY-BEFORE-SEND-HOOK]: === START OF SENTRY EVENT ===");
+  logger.info(event);
+  logger.info("🔒  [SENTRY-BEFORE-SEND-HOOK]: ===  END OF SENTRY EVENT  ===");
+
+  // if return null, the event won't be sent
+  // ref https://github.com/getsentry/sentry-javascript/issues/2039
+  return null;
+};
+
+export const SentryInit = () => {
+  if (!sentryDsnIsValid) {
+    logInitError("Sentry DSN is not valid");
+
+    return;
+  }
+
+  const processType = process.type as typeof electronProcessType[number];
+
+  let Sentry;
+
+  try {
+    // if in main process 
+    if (processType === "browser") {
+      Sentry = require("@sentry/electron/dist/main");
+    }
+
+    // if in renderer process
+    if (processType === "renderer") {
+      Sentry = require("@sentry/electron/dist/renderer");
+    }
+  } catch (error) {
+    logInitError(`Error loading Sentry module ${error?.message}`);
+
+    return;
+  }
+
+
+  if (!Sentry) {
+    logInitError(`Unsupported process type ${processType}`);
+
+    return;
+  }
+
+  try {
+    Sentry.init({
+      beforeSend,
+      dsn: sentryDsn,
+      integrations,
+      initialScope: initialScope(processType),
+      environment
+    });
+    logger.info(`✔️  [SENTRY-INIT]: Sentry for ${processType} is initialized.`);
+  } catch (error) {
+    logInitError(`Sentry.init() error ${error?.message}`);
+
+    return;
+  }
+};

src/common/user-store/preferences-helpers.ts

@@ -106,6 +106,19 @@ const allowTelemetry: PreferenceDescription<boolean> = {
   },
 };
 
+const allowErrorReporting: PreferenceDescription<boolean> = {
+  fromStore(val) {
+    return val ?? true;
+  },
+  toStore(val) {
+    if (val === true) {
+      return undefined;
+    }
+
+    return val;
+  },
+};
+
 const downloadMirror: PreferenceDescription<string> = {
   fromStore(val) {
     return val ?? "default";
@@ -227,6 +240,7 @@ export const DESCRIPTORS = {
   localeTimezone,
   allowUntrustedCAs,
   allowTelemetry,
+  allowErrorReporting,
   downloadMirror,
   downloadKubectlBinaries,
   downloadBinariesPath,

src/common/user-store/user-store.ts

@@ -59,6 +59,7 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
   @observable seenContexts = observable.set<string>();
   @observable newContexts = observable.set<string>();
   @observable allowTelemetry: boolean;
+  @observable allowErrorReporting: boolean;
   @observable allowUntrustedCAs: boolean;
   @observable colorTheme: string;
   @observable localeTimezone: string;
@@ -169,6 +170,7 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
     this.localeTimezone = DESCRIPTORS.localeTimezone.fromStore(preferences?.localeTimezone);
     this.allowUntrustedCAs = DESCRIPTORS.allowUntrustedCAs.fromStore(preferences?.allowUntrustedCAs);
     this.allowTelemetry = DESCRIPTORS.allowTelemetry.fromStore(preferences?.allowTelemetry);
+    this.allowErrorReporting = DESCRIPTORS.allowErrorReporting.fromStore(preferences?.allowErrorReporting);
     this.downloadMirror = DESCRIPTORS.downloadMirror.fromStore(preferences?.downloadMirror);
     this.downloadKubectlBinaries = DESCRIPTORS.downloadKubectlBinaries.fromStore(preferences?.downloadKubectlBinaries);
     this.downloadBinariesPath = DESCRIPTORS.downloadBinariesPath.fromStore(preferences?.downloadBinariesPath);
@@ -188,6 +190,7 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
         localeTimezone: DESCRIPTORS.localeTimezone.toStore(this.localeTimezone),
         allowUntrustedCAs: DESCRIPTORS.allowUntrustedCAs.toStore(this.allowUntrustedCAs),
         allowTelemetry: DESCRIPTORS.allowTelemetry.toStore(this.allowTelemetry),
+        allowErrorReporting: DESCRIPTORS.allowErrorReporting.toStore(this.allowErrorReporting),
         downloadMirror: DESCRIPTORS.downloadMirror.toStore(this.downloadMirror),
         downloadKubectlBinaries: DESCRIPTORS.downloadKubectlBinaries.toStore(this.downloadKubectlBinaries),
         downloadBinariesPath: DESCRIPTORS.downloadBinariesPath.toStore(this.downloadBinariesPath),

src/common/utils/index.ts

@@ -51,6 +51,8 @@ export * from "./tar";
 export * from "./toggle-set";
 export * from "./toJS";
 export * from "./type-narrowing";
+export * from "./isValidURL";
+export * from "./isValidSentryDsn";
 
 import * as iter from "./iter";
 

src/common/utils/isValidSentryDsn.ts

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+
+// Regular expression used to parse a Sentry Dsn.
+// from https://github.com/getsentry/sentry-javascript/blob/f624f442fd76bf655de6def9fa4d7631735ebba0/packages/utils/src/dsn.ts#L6
+const DSN_REGEX = /^(?:(\w+):)\/\/(?:(\w+)(?::(\w+))?@)([\w.-]+)(?::(\d+))?\/(.+)/;
+
+/**
+ * check if string is a valid Sentry dsn
+ *
+ * @param {(string | undefined | null)} string
+ * @return {boolean} 
+ */
+export const isValidSentryDsn = (string: string | undefined | null) => {
+
+  const valid = DSN_REGEX.exec(string);
+
+  return valid;
+
+};

src/common/utils/isValidURL.ts

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+
+/**
+ * check if string is valid URL
+ *
+ * @param {(string | undefined | null)} url
+ * @return {boolean} 
+ */
+export const isValidURL = (url: string | undefined | null) => {
+  try {
+    new URL(url);
+
+    return true;
+  } catch {
+    // ignore TypeError and return false
+  }
+
+  return false;
+};

src/common/vars.ts

@@ -24,6 +24,8 @@ import path from "path";
 import { SemVer } from "semver";
 import packageInfo from "../../package.json";
 import { defineGlobal } from "./utils/defineGlobal";
+import { isValidURL } from "./utils/isValidURL";
+import { isValidSentryDsn } from "./utils/isValidSentryDsn";
 
 export const isMac = process.platform === "darwin";
 export const isWindows = process.platform === "win32";
@@ -70,3 +72,7 @@ export const supportUrl = "https://docs.k8slens.dev/latest/support/" as string;
 
 export const appSemVer = new SemVer(packageInfo.version);
 export const docsUrl = `https://docs.k8slens.dev/main/` as string;
+
+export const sentryDsn = packageInfo.config?.sentryDsn;
+export const sentryDsnIsValid = isValidURL(sentryDsn) && isValidSentryDsn(sentryDsn);
+

src/main/index.ts

@@ -59,6 +59,9 @@ import { UserStore } from "../common/user-store";
 import { WeblinkStore } from "../common/weblink-store";
 import { ExtensionsStore } from "../extensions/extensions-store";
 import { FilesystemProvisionerStore } from "./extension-filesystem";
+import { SentryInit } from "../common/sentry";
+
+SentryInit();
 
 const workingDir = path.join(app.getPath("appData"), appName);
 const cleanup = disposer();

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 {