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 && (