Implement a custom alert that asks the user if they want analytics enabled.

Author: markrickert

apps/reactotron-app/package.json

@@ -57,6 +57,7 @@
     "electron-window-state": "^5.0.3",
     "immer": "^10.0.3",
     "react": "18.2.0",
+    "react-confirm-alert": "^3.0.6",
     "react-dom": "18.2.0",
     "react-ga4": "^2.1.0",
     "react-hotkeys": "^2.0.0",

apps/reactotron-app/src/main/menu.ts

@@ -1,7 +1,5 @@
 import { Menu, app, shell } from "electron"
-import Store from "electron-store"
-
-const configStore = new Store()
+import configStore from "../renderer/config"
 
 const isDarwin = process.platform === "darwin"
 

apps/reactotron-app/src/renderer/App.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect } from "react"
 import { HashRouter as Router, Route, Routes } from "react-router-dom"
 import styled from "styled-components"
 
@@ -15,7 +15,7 @@ import Overlay from "./pages/reactNative/Overlay"
 import Storybook from "./pages/reactNative/Storybook"
 import CustomCommands from "./pages/customCommands"
 import Help from "./pages/help"
-import { usePageTracking } from "./util/analyticsHelpers"
+import { useAnalytics, usePageTracking } from "./util/analyticsHelpers"
 
 const AppContainerComponent = styled.div`
   position: absolute;
@@ -28,8 +28,20 @@ const AppContainerComponent = styled.div`
   flex-direction: column;
   background-color: ${(props) => props.theme.background};
 `
+
+// This wrapper container is used to track page views within the app automatically using react-router-dom
+// as well as to initialize analytics on app load.
 const AppContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   usePageTracking()
+  const { initializeAnalytics } = useAnalytics()
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      initializeAnalytics()
+    }, 250)
+    return () => clearTimeout(timer)
+  }, [])
+
   return <AppContainerComponent>{children}</AppContainerComponent>
 }
 

apps/reactotron-app/src/renderer/KeybindHandler.tsx

@@ -101,7 +101,6 @@ function KeybindHandler({ children }) {
     // Tab Navigation
     OpenHomeTab: () => {
       window.location.hash = "/"
-
       sendKeyboardShortcutAnalyticsEvent("OpenHomeTab")
     },
     OpenTimelineTab: () => {
@@ -137,6 +136,7 @@ function KeybindHandler({ children }) {
     },
     TakeSnapshot: () => {
       createSnapshot()
+      sendKeyboardShortcutAnalyticsEvent("TakeSnapshot")
     },
 
     // Miscellaneous

apps/reactotron-app/src/renderer/config.ts

@@ -9,16 +9,41 @@ const schema = {
     type: "number",
     default: 500,
   },
+  analyticsOptOut: {
+    type: "string",
+    default: "unknown",
+  },
 }
 
-const configStore = new Store({ schema } as any)
+const configStore = new Store({
+  schema,
+  defaults: {
+    serverPort: schema.serverPort.default,
+    commandHistory: schema.commandHistory.default,
+    analyticsOptOut: schema.analyticsOptOut.default,
+  },
+  beforeEachMigration: (_store, context) => {
+    console.log(`[main-config] migrate from ${context.fromVersion} → ${context.toVersion}`)
+  },
+  migrations: {
+    "1.0.0": (store) => {
+      // Added analyticsOptOut in order to track if the user has opted out of analytics
+      // and present the user with a blocking dialog box.
+      // When the user makes a choice, it will be set to "true" or "false"
+      store.set("analyticsOptOut", "unknown")
+    },
+  },
+} as any)
 
 // Setup defaults
 if (!configStore.has("serverPort")) {
-  configStore.set("serverPort", 9090)
+  configStore.set("serverPort", schema.serverPort.default)
 }
 if (!configStore.has("commandHistory")) {
-  configStore.set("commandHistory", 500)
+  configStore.set("commandHistory", schema.commandHistory.default)
+}
+if (!configStore.has("analyticsOptOut")) {
+  configStore.set("analyticsOptOut", schema.analyticsOptOut.default)
 }
 
 export default configStore

apps/reactotron-app/src/renderer/images/Reactotron-analytics.png

@@ -1,3 +1,4 @@
 export const reactotronLogo: string = require("./Reactotron-128.png").default
+export const reactotronAnalytics: string = require("./Reactotron-analytics.png").default
 export const storybookActiveImg: string = require("./storybook-logo-color.png").default
 export const storybookInactiveImg: string = require("./storybook-logo.png").default