feat: :mute: complete removal of telemetry when allow_anonymous_telemetry false

3 files changed, 53 insertions, 21 deletions

diff --git a/extension/react-app/src/hooks/CustomPostHogProvider.tsx b/extension/react-app/src/hooks/CustomPostHogProvider.tsx
new file mode 100644
index 00000000..cc6de4a2
--- /dev/null
+++ b/extension/react-app/src/hooks/CustomPostHogProvider.tsx
@@ -0,0 +1,34 @@
+import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
+import { PropsWithChildren, useEffect } from "react";
+import { RootStore } from "../redux/store";
+import { useSelector } from "react-redux";
+import React from "react";
+
+const CustomPostHogProvider = ({ children }: PropsWithChildren) => {
+  const allowAnonymousTelemetry = useSelector(
+    (store: RootStore) => store?.serverState?.config?.allow_anonymous_telemetry
+  );
+
+  const [client, setClient] = React.useState<any>(undefined);
+
+  useEffect(() => {
+    if (allowAnonymousTelemetry) {
+      posthog.init("phc_JS6XFROuNbhJtVCEdTSYk6gl5ArRrTNMpCcguAXlSPs", {
+        api_host: "https://app.posthog.com",
+        disable_session_recording: true,
+      });
+      setClient(client);
+    } else {
+      setClient(undefined);
+    }
+  }, [allowAnonymousTelemetry]);
+
+  return allowAnonymousTelemetry ? (
+    <PostHogProvider client={client}>{children}</PostHogProvider>
+  ) : (
+    <>{children}</>
+  );
+};
+
+export default CustomPostHogProvider;
diff --git a/extension/react-app/src/main.tsx b/extension/react-app/src/main.tsx
index 1776490c..79c8e70b 100644
--- a/extension/react-app/src/main.tsx
+++ b/extension/react-app/src/main.tsx
@@ -5,22 +5,14 @@ import { Provider } from "react-redux";
 import store from "./redux/store";
 import "./index.css";
 
-import posthog from "posthog-js";
-import { PostHogProvider } from "posthog-js/react";
-
-console.log("Starting React");
-
-posthog.init("phc_JS6XFROuNbhJtVCEdTSYk6gl5ArRrTNMpCcguAXlSPs", {
-  api_host: "https://app.posthog.com",
-  disable_session_recording: true,
-});
+import CustomPostHogProvider from "./hooks/CustomPostHogProvider";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <PostHogProvider client={posthog}>
-      <Provider store={store}>
+    <Provider store={store}>
+      <CustomPostHogProvider>
         <App />
-      </Provider>
-    </PostHogProvider>
+      </CustomPostHogProvider>
+    </Provider>
   </React.StrictMode>
 );
diff --git a/extension/src/extension.ts b/extension/src/extension.ts
index 386a2fb7..7fab9ed9 100644
--- a/extension/src/extension.ts
+++ b/extension/src/extension.ts
@@ -4,17 +4,23 @@
 
 import * as vscode from "vscode";
 import { getExtensionVersion } from "./activation/environmentSetup";
-import { PostHog } from "posthog-node";
 
-const client = new PostHog(
-  "phc_JS6XFROuNbhJtVCEdTSYk6gl5ArRrTNMpCcguAXlSPs",
+let client: any = undefined;
+async function capture(args: any) {
+  console.log("Capturing posthog event: ", args);
+  if (!client) {
+    const { PostHog } = await import("posthog-node");
+    client = new PostHog("phc_JS6XFROuNbhJtVCEdTSYk6gl5ArRrTNMpCcguAXlSPs", {
+      host: "https://app.posthog.com",
+    });
+  }
+  client.capture(args);
+}
 
-  { host: "https://app.posthog.com" }
-);
 async function dynamicImportAndActivate(context: vscode.ExtensionContext) {
   if (!context.globalState.get("hasBeenInstalled")) {
     context.globalState.update("hasBeenInstalled", true);
-    client.capture({
+    capture({
       distinctId: vscode.env.machineId,
       event: "install",
       properties: {
@@ -50,7 +56,7 @@ export function activate(context: vscode.ExtensionContext) {
 }
 
 export function deactivate() {
-  client.capture({
+  capture({
     distinctId: vscode.env.machineId,
     event: "deactivate",
     properties: {
@@ -58,5 +64,5 @@ export function deactivate() {
     },
   });
 
-  client.shutdown();
+  client?.shutdown();
 }