feat: add global setting for anonymized telemetry

frappe/models/doctype/SystemSettings/SystemSettings.js

@@ -84,19 +84,11 @@ module.exports = {
       default: 0,
       description: t`Hides the Get Started section from the sidebar. Change will be visible on restart or refreshing the app.`,
     },
-    {
-      fieldname: 'autoReportErrors',
-      label: t`Hide & Auto Report Errors`,
-      fieldtype: 'Check',
-      default: 0,
-      description: t`Prevent errors from showing and automatically report all errors.`,
-    },
   ],
   quickEditFields: [
     'locale',
     'dateFormat',
     'displayPrecision',
     'hideGetStarted',
-    'autoReportErrors',
   ],
 };

src/components/Controls/Check.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
     <label class="flex items-center">
+      <div class="mr-3 text-gray-900 text-sm" v-if="showLabel && !labelRight">
+        {{ df.label }}
+      </div>
       <div style="width: 14px; height: 14px; overflow: hidden; cursor: pointer">
         <svg
           v-if="checked === 1"
@@ -58,7 +61,7 @@
           @focus="(e) => $emit('focus', e)"
         />
       </div>
-      <div class="ml-3 text-gray-900 text-sm" v-if="showLabel">
+      <div class="ml-3 text-gray-900 text-sm" v-if="showLabel && labelRight">
         {{ df.label }}
       </div>
     </label>
@@ -71,6 +74,12 @@ export default {
   name: 'Check',
   extends: Base,
   emits: ['focus'],
+  props: {
+    labelRight: {
+      default: true,
+      type: Boolean,
+    },
+  },
   data() {
     return {
       offBorderColor: 'rgba(17, 43, 66, 0.201322)',

src/config.ts

@@ -8,6 +8,7 @@ export enum ConfigKeys {
   LastSelectedFilePath = 'lastSelectedFilePath',
   Language = 'language',
   DeviceId = 'deviceId',
+  AnonymizedTelemetry = 'anonymizedTelemetry',
 }
 
 export interface ConfigFile {

src/errorHandling.ts

@@ -7,6 +7,7 @@ import {
   ValidationError,
 } from 'frappe/common/errors';
 import BaseDocument from 'frappe/model/document';
+import config, { ConfigKeys } from './config';
 import { IPC_ACTIONS, IPC_MESSAGES } from './messages';
 import telemetry from './telemetry/telemetry';
 import { showMessageDialog, showToast } from './utils';
@@ -18,6 +19,10 @@ interface ErrorLog {
   more?: object;
 }
 
+function getCanLog(): boolean {
+  return !!config.get(ConfigKeys.AnonymizedTelemetry);
+}
+
 function shouldNotStore(error: Error) {
   return [MandatoryError, ValidationError].some(
     (errorClass) => error instanceof errorClass
@@ -39,14 +44,14 @@ async function reportError(errorLogObj: ErrorLog, cb?: Function) {
   cb?.();
 }
 
-function getToastProps(errorLogObj: ErrorLog, cb?: Function) {
+function getToastProps(errorLogObj: ErrorLog, canLog: boolean, cb?: Function) {
   const props = {
     message: t`Error: ` + errorLogObj.name,
     type: 'error',
   };
 
   // @ts-ignore
-  if (!frappe.SystemSettings?.autoReportErrors) {
+  if (!canLog) {
     Object.assign(props, {
       actionText: t`Report Error`,
       action: () => {
@@ -87,10 +92,11 @@ export function handleError(
   const errorLogObj = getErrorLogObject(error, more);
 
   // @ts-ignore
-  if (frappe.SystemSettings?.autoReportErrors) {
+  const canLog = getCanLog();
+  if (canLog) {
     reportError(errorLogObj, cb);
   } else {
-    showToast(getToastProps(errorLogObj, cb));
+    showToast(getToastProps(errorLogObj, canLog, cb));
   }
 }
 

src/pages/Settings/TabSystem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-col justify-between h-full">
     <TwoColumnForm
       v-if="doc"
       :doc="doc"
@@ -8,10 +8,27 @@
       :emit-change="true"
       @change="forwardChangeEvent"
     />
-    <div class="flex flex-row justify-between my-4">
+    <div class="flex flex-row justify-between items-center w-full">
-      <LanguageSelector class="text-sm" input-class="px-4 py-1.5"/>
+      <div class="flex items-center rounded-lg">
+        <FormControl
+          :df="anonymizedTelemetryDf"
+          :showLabel="true"
+          :value="anonymizedTelemetry"
+          @change="setAnonymizedTelemetry"
+          class="border-r pr-4"
+          :label-right="false"
+        />
+        <LanguageSelector class="text-sm w-28" input-class="px-4 py-1.5" />
+      </div>
       <button
-        class="text-gray-900 text-sm hover:bg-gray-200 rounded-md px-4 py-1.5"
+        class="
+          text-gray-900 text-sm
+          bg-gray-100
+          hover:bg-gray-200
+          rounded-md
+          px-4
+          py-1.5
+        "
         @click="checkForUpdates(true)"
       >
         Check for Updates
@@ -21,14 +38,17 @@
 </template>
 
 <script>
-import frappe from 'frappe';
+import FormControl from '@/components/Controls/FormControl';
-import TwoColumnForm from '@/components/TwoColumnForm';
-import { checkForUpdates } from '@/utils';
 import LanguageSelector from '@/components/Controls/LanguageSelector.vue';
+import TwoColumnForm from '@/components/TwoColumnForm';
+import config, { ConfigKeys } from '@/config';
+import { checkForUpdates } from '@/utils';
+import frappe from 'frappe';
 
 export default {
   name: 'TabSystem',
   components: {
+    FormControl,
     TwoColumnForm,
     LanguageSelector,
   },
@@ -36,13 +56,32 @@ export default {
   data() {
     return {
       doc: null,
+      anonymizedTelemetry: 0,
     };
   },
+  watch: {
+    anonymizedTelemetry(newValue) {
+      config.set(ConfigKeys.AnonymizedTelemetry, !!newValue);
+    },
+  },
   async mounted() {
     this.doc = frappe.SystemSettings;
     this.companyName = frappe.AccountingSettings.companyName;
+    this.anonymizedTelemetry = Number(
+      config.get(ConfigKeys.AnonymizedTelemetry)
+    );
   },
   computed: {
+    anonymizedTelemetryDf() {
+      return {
+        fieldname: 'anonymizedTelemetry',
+        label: this.t`Anonymized Telemetry`,
+        fieldtype: 'Check',
+        default: 0,
+        description: this
+          .t`Send anonymized usage data and error reports to help improve the product.`,
+      };
+    },
     fields() {
       let meta = frappe.getMeta('SystemSettings');
       return meta.getQuickEditFields();
@@ -50,6 +89,9 @@ export default {
   },
   methods: {
     checkForUpdates,
+    setAnonymizedTelemetry(value) {
+      this.anonymizedTelemetry = value;
+    },
     forwardChangeEvent(...args) {
       this.$emit('change', ...args);
     },

src/telemetry/telemetry.ts

@@ -1,3 +1,4 @@
+import config, { ConfigKeys } from '@/config';
 import frappe from 'frappe';
 import { cloneDeep } from 'lodash';
 import { getCounts, getDeviceId, getInstanceId, getLocale } from './helpers';
@@ -17,11 +18,19 @@ class TelemetryManager {
     this.#started = true;
   }
 
+  getCanLog() {
+    return !!config.get(ConfigKeys.AnonymizedTelemetry);
+  }
+
   log(verb: Verb, noun: Noun, more?: Record<string, unknown>) {
     if (!this.#started) {
       this.start();
     }
 
+    if (!this.getCanLog) {
+      return;
+    }
+
     const time = new Date().valueOf();
     if (this.#telemetryObject.timeline === undefined) {
       this.#telemetryObject.timeline = [];
@@ -45,7 +54,7 @@ class TelemetryManager {
 
     //@ts-ignore
     this.#telemetryObject.version = frappe.store.appVersion ?? '';
-    this.#telemetryObject.counts = await getCounts();
+    this.#telemetryObject.counts = this.getCanLog() ? await getCounts() : {};
     this.#telemetryObject.closeTime = new Date().valueOf();
   }