better analytics

web/src/components/Navbar/index.tsx

@@ -3,6 +3,7 @@ import { routeSelector } from "../../state/route";
 import { routeFilesSelector } from "../../state/route-files";
 import { useClearRouteProgress } from "../../state/route-progress";
 import { borderListStyles, interactiveStyles } from "../../styles";
+import { trackEvent } from "../../utility/telemetry";
 import styles from "./styles.module.css";
 import classNames from "classnames";
 import React, { useEffect, useState } from "react";
@@ -148,6 +149,7 @@ export function Navbar({}: NavbarProps) {
               icon={<FaRegClipboard className={classNames("inlineIcon")} />}
               onClick={() => {
                 clipboardRoute();
+                trackEvent({ name: "3rd-Party Export" });
                 toast.success("Exported to Clipboard");
                 setNavExpand(false);
               }}

web/src/main.tsx

@@ -1,14 +1,12 @@
 import { App } from "./containers";
 import "./index.css";
-import { loadAnalytics } from "./utility/telementry";
+import { loadAnalytics } from "./utility/telemetry";
 import React, { Suspense } from "react";
 import ReactDOM from "react-dom/client";
 import { HashRouter } from "react-router-dom";
 import { RecoilRoot } from "recoil";
 
-if (import.meta.env.VITE_ANALYTICS_KEY) {
-  loadAnalytics(import.meta.env.VITE_ANALYTICS_KEY);
-}
+loadAnalytics();
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>

web/src/utility/telemetry.ts

@@ -0,0 +1,29 @@
+import { ReactPlugin } from "@microsoft/applicationinsights-react-js";
+import { ApplicationInsights } from "@microsoft/applicationinsights-web";
+import { createHashHistory } from "history";
+
+const history = createHashHistory();
+const reactPlugin = new ReactPlugin();
+const appInsights = new ApplicationInsights({
+  config: {
+    connectionString: import.meta.env.VITE_ANALYTICS_KEY,
+    enableAutoRouteTracking: true,
+    extensions: [reactPlugin],
+    extensionConfig: {
+      [reactPlugin.identifier]: { history },
+    },
+  },
+});
+
+export function loadAnalytics() {
+  if (import.meta.env.VITE_ANALYTICS_KEY) {
+    appInsights.loadAppInsights();
+  }
+}
+
+export function trackEvent(event: {
+  name: string;
+  properties?: Record<string, any>;
+}) {
+  reactPlugin.trackEvent(event);
+}