feat: crash reporter settings

src/components/Settings/SettingsDialog.tsx

@@ -10,7 +10,7 @@ import { ProxySettings } from './ProxySettings'
 import { AppSettingsSchema } from '@/schemas/settings'
 import { RecorderSettings } from './RecorderSettings'
 import { AppSettings } from '@/types/settings'
-import { UsageReportSettings } from './UsageReportSettings'
+import { TelemetrySettings } from './TelemetrySettings'
 import { ButtonWithTooltip } from '../ButtonWithTooltip'
 import { AppearanceSettings } from './AppearanceSettings'
 import { LogsSettings } from './LogsSettings'
@@ -25,9 +25,9 @@ const tabs = [
   { label: 'Proxy', value: 'proxy', component: ProxySettings },
   { label: 'Recorder', value: 'recorder', component: RecorderSettings },
   {
-    label: 'Usage collection',
+    label: 'Telemetry',
     value: 'usageReport',
-    component: UsageReportSettings,
+    component: TelemetrySettings,
   },
   {
     label: 'Appearance',

src/components/Settings/UsageReportSettings.tsx → src/components/Settings/TelemetrySettings.tsx

@@ -3,7 +3,7 @@ import { Controller, useFormContext } from 'react-hook-form'
 import { SettingsSection } from './SettingsSection'
 import { AppSettings } from '@/types/settings'
 
-export const UsageReportSettings = () => {
+export const TelemetrySettings = () => {
   const { control, register } = useFormContext<AppSettings>()
 
   const handleLinkClick = () =>
@@ -13,14 +13,14 @@ export const UsageReportSettings = () => {
 
   return (
     <SettingsSection>
-      <Flex gap="2">
+      <Flex gap="2" mb="4">
         <Controller
           control={control}
-          name="usageReport.enabled"
+          name="telemetry.usageReport"
           render={({ field }) => (
             <Text size="2" as="label">
               <Checkbox
-                {...register('usageReport.enabled')}
+                {...register('telemetry.usageReport')}
                 checked={field.value}
                 onCheckedChange={field.onChange}
               />{' '}
@@ -33,6 +33,24 @@ export const UsageReportSettings = () => {
           )}
         />
       </Flex>
+
+      <Flex gap="2">
+        <Controller
+          control={control}
+          name="telemetry.errorReport"
+          render={({ field }) => (
+            <Text size="2" as="label">
+              <Checkbox
+                {...register('telemetry.errorReport')}
+                checked={field.value}
+                onCheckedChange={field.onChange}
+              />{' '}
+              Send crash reports and error data to Grafana to help improve k6
+              Studio.
+            </Text>
+          )}
+        />
+      </Flex>
     </SettingsSection>
   )
 }

src/main.ts

@@ -66,6 +66,14 @@ if (process.env.NODE_ENV !== 'development') {
   Sentry.init({
     dsn: SENTRY_DSN,
     integrations: [Sentry.electronMinidumpIntegration()],
+
+    // conditionally send the event based on the user's settings
+    beforeSend: (event) => {
+      if (appSettings.telemetry.errorReport) {
+        return event
+      }
+      return null
+    },
   })
 }
 
@@ -208,7 +216,7 @@ app.whenReady().then(
     appSettings = await getSettings()
     nativeTheme.themeSource = appSettings.appearance.theme
 
-    await sendReport(appSettings.usageReport)
+    await sendReport(appSettings.telemetry.usageReport)
     await createSplashWindow()
     await setupProjectStructure()
     await createWindow()
@@ -365,7 +373,7 @@ ipcMain.handle(
       browserWindow,
       resolvedScriptPath,
       appSettings.proxy.port,
-      appSettings.usageReport.enabled
+      appSettings.telemetry.usageReport
     )
   }
 )
@@ -648,8 +656,8 @@ async function applySettings(
   if (modifiedSettings.recorder) {
     appSettings.recorder = modifiedSettings.recorder
   }
-  if (modifiedSettings.usageReport) {
-    appSettings.usageReport = modifiedSettings.usageReport
+  if (modifiedSettings.telemetry) {
+    appSettings.telemetry = modifiedSettings.telemetry
   }
   if (modifiedSettings.appearance) {
     appSettings.appearance = modifiedSettings.appearance

src/schemas/settings/index.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { migrate } from '.'
 import * as v1 from './v1'
+import * as v2 from './v2'
 
 describe('Settings migration', () => {
   it('should migrate from v1 to latest', () => {
@@ -29,6 +30,41 @@ describe('Settings migration', () => {
       },
     }
 
-    expect(migrate(v1Settings).version).toBe('2.0')
+    const migration = migrate(v1Settings)
+
+    expect(migration.version).toBe('3.0')
+    expect(migration.telemetry.usageReport).toBe(v1Settings.usageReport.enabled)
+  })
+
+  it('should migrate from v2 to latest', () => {
+    const v2Settings: v2.AppSettings = {
+      version: '2.0',
+      proxy: {
+        mode: 'regular',
+        port: 6000,
+        automaticallyFindPort: true,
+      },
+      recorder: {
+        detectBrowserPath: true,
+      },
+      windowState: {
+        width: 1200,
+        height: 800,
+        x: 0,
+        y: 0,
+        isMaximized: true,
+      },
+      usageReport: {
+        enabled: true,
+      },
+      appearance: {
+        theme: 'system',
+      },
+    }
+
+    const migration = migrate(v2Settings)
+
+    expect(migration.version).toBe('3.0')
+    expect(migration.telemetry.usageReport).toBe(v2Settings.usageReport.enabled)
   })
 })

src/schemas/settings/index.ts

@@ -1,18 +1,22 @@
 import { z } from 'zod'
 import * as v1 from './v1'
 import * as v2 from './v2'
+import * as v3 from './v3'
 import { exhaustive } from '../../utils/typescript'
 
 const AnySettingSchema = z.discriminatedUnion('version', [
   v1.AppSettingsSchema,
   v2.AppSettingsSchema,
+  v3.AppSettingsSchema,
 ])
 
 export function migrate(settings: z.infer<typeof AnySettingSchema>) {
   switch (settings.version) {
     case '1.0':
       return migrate(v1.migrate(settings))
     case '2.0':
+      return migrate(v2.migrate(settings))
+    case '3.0':
       return settings
     default:
       return exhaustive(settings)
@@ -25,6 +29,6 @@ export {
   AppearanceSchema,
   ProxySettingsSchema,
   RecorderSettingsSchema,
-  UsageReportSettingsSchema,
+  TelemetrySchema,
   WindowStateSchema,
-} from './v2'
+} from './v3'

src/schemas/settings/v2/index.ts

@@ -6,6 +6,7 @@ import {
   UsageReportSettingsSchema,
   WindowStateSchema,
 } from '../v1'
+import * as v3 from '../v3'
 
 export {
   AppearanceSchema,
@@ -26,7 +27,19 @@ export const AppSettingsSchema = z.object({
 
 export type AppSettings = z.infer<typeof AppSettingsSchema>
 
-// TODO: Migrate settings to the next version
-export function migrate(settings: z.infer<typeof AppSettingsSchema>) {
-  return { ...settings }
+// Migrate settings to the next version
+export function migrate(
+  settings: z.infer<typeof AppSettingsSchema>
+): v3.AppSettings {
+  return {
+    version: '3.0',
+    proxy: settings.proxy,
+    recorder: settings.recorder,
+    windowState: settings.windowState,
+    telemetry: {
+      usageReport: settings.usageReport.enabled,
+      errorReport: true,
+    },
+    appearance: settings.appearance,
+  }
 }

src/schemas/settings/v3/index.ts

@@ -0,0 +1,36 @@
+import { z } from 'zod'
+import {
+  AppearanceSchema,
+  ProxySettingsSchema,
+  RecorderSettingsSchema,
+  WindowStateSchema,
+} from '../v1'
+
+const TelemetrySchema = z.object({
+  usageReport: z.boolean(),
+  errorReport: z.boolean(),
+})
+
+export {
+  AppearanceSchema,
+  ProxySettingsSchema,
+  RecorderSettingsSchema,
+  TelemetrySchema,
+  WindowStateSchema,
+}
+
+export const AppSettingsSchema = z.object({
+  version: z.literal('3.0'),
+  proxy: ProxySettingsSchema,
+  recorder: RecorderSettingsSchema,
+  windowState: WindowStateSchema,
+  telemetry: TelemetrySchema,
+  appearance: AppearanceSchema,
+})
+
+export type AppSettings = z.infer<typeof AppSettingsSchema>
+
+// TODO: Migrate settings to the next version
+export function migrate(settings: z.infer<typeof AppSettingsSchema>) {
+  return { ...settings }
+}

src/settings.ts

@@ -8,7 +8,7 @@ import { safeJsonParse } from './utils/json'
 import log from 'electron-log/main'
 
 const defaultSettings: AppSettings = {
-  version: '2.0',
+  version: '3.0',
   proxy: {
     mode: 'regular',
     port: 6000,
@@ -24,8 +24,9 @@ const defaultSettings: AppSettings = {
     y: 0,
     isMaximized: true,
   },
-  usageReport: {
-    enabled: true,
+  telemetry: {
+    usageReport: true,
+    errorReport: true,
   },
   appearance: {
     theme: 'system',

src/types/settings.ts

@@ -2,11 +2,11 @@ import {
   AppSettingsSchema,
   ProxySettingsSchema,
   RecorderSettingsSchema,
-  UsageReportSettingsSchema,
+  TelemetrySchema,
 } from '@/schemas/settings'
 import { z } from 'zod'
 
 export type AppSettings = z.infer<typeof AppSettingsSchema>
 export type ProxySettings = z.infer<typeof ProxySettingsSchema>
 export type RecorderSettings = z.infer<typeof RecorderSettingsSchema>
-export type UsageReportSettings = z.infer<typeof UsageReportSettingsSchema>
+export type TelemetrySettings = z.infer<typeof TelemetrySchema>

src/usageReport.ts

@@ -3,7 +3,6 @@ import { getPlatform, getArch } from './utils/electron'
 import { writeFile, readFile } from 'fs/promises'
 import path from 'path'
 import { existsSync } from 'fs'
-import { UsageReportSettings } from './types/settings'
 import log from 'electron-log/main'
 
 const URL = 'https://stats.grafana.org/k6-studio-usage-report'
@@ -20,8 +19,8 @@ export const getOrSetInstallationId = async () => {
   return await readFile(filePath, { encoding: 'utf-8' })
 }
 
-export const sendReport = async (usageReportSettings: UsageReportSettings) => {
-  if (!usageReportSettings.enabled) {
+export const sendReport = async (usageReportEnabled: boolean) => {
+  if (!usageReportEnabled) {
     return
   }