Event Logging for when a recording starts & completes (#232)

* fixed hydration error on local environment

* updated @microsoft/applicationinsights-web to v3.3.0 from v3.0.7

* set up project-wise application insights

* disabled production server on local environment

* restored production URL

* add: env variable for app insights key to .env.example

* add: dev app insights key for build to work

* remove: extra log

* fix: edit insight tags

* implemenyed appInsights for starting and ending a brain recording

* Merge branch 'master' of github.com:NEUROFUSIONInc/fusion into feat/implement-application-insights

* updated @microsoft/applicationinsights-web to v3.3.0 from v3.0.7 and added tracking to Muse recordings

* blog: update time for quests post

* edit: keep event logging in the experiment component

* misc

frontend/package.json

@@ -15,7 +15,7 @@
     "@hookform/resolvers": "^3.1.1",
     "@magic-sdk/admin": "^2.0.0",
     "@microsoft/applicationinsights-react-js": "^17.3.0",
-    "@microsoft/applicationinsights-web": "^3.3.0",
+    "@microsoft/applicationinsights-web": "^3.0.7",
     "@neurosity/pipes": "^5.2.1",
     "@neurosity/sdk": "^6.5.9",
     "@radix-ui/react-accordion": "^1.1.2",

frontend/src/components/features/landing/hero-section/hero-section.tsx

@@ -1,6 +1,11 @@
 import { ButtonLink, CustomLink } from "~/components/ui";
+import { appInsights } from "~/utils/appInsights";
 
 export const HeroSection = ({ isResearch = false }) => {
+  const handleClick = () => {
+    appInsights.trackEvent({ name: "use_neurofusion_explorer" });
+  };
+
   return (
     <section
       title="hero-section"
@@ -13,7 +18,13 @@ export const HeroSection = ({ isResearch = false }) => {
           </h1>
 
           <div className="mt-10 flex flex-col items-center justify-center gap-x-6 gap-y-2 md:flex-row">
-            <ButtonLink intent="outlined" href="/playground" size="xl" className="mt-4 w-full md:w-11/12">
+            <ButtonLink
+              onClick={handleClick}
+              intent="outlined"
+              href="/playground"
+              size="xl"
+              className="mt-4 w-full md:w-11/12"
+            >
               Use NeuroFusion Explorer!
             </ButtonLink>
           </div>

frontend/src/components/lab/experiment.tsx

@@ -1,14 +1,14 @@
 /* eslint-disable react/no-unescaped-entities */
 /* eslint-disable react/self-closing-comp */
 import { DeviceInfo } from "@neurosity/sdk/dist/esm/types/deviceInfo";
-import { FC, useState, useEffect, use, useContext } from "react";
+import { FC, useState, useEffect, useContext } from "react";
 
 import { Button } from "../ui/button/button";
 
 import { connectToNeurosityDevice, useNeurosityState } from "~/hooks";
 import { neurosityService, neurosity } from "~/services";
 import { PlugZap } from "lucide-react";
-
+import { appInsights } from "~/utils/appInsights";
 import { IExperiment, EventData } from "~/@types";
 import SignalQuality from "./signalquality";
 import { Input } from "../ui";
@@ -17,6 +17,7 @@ import exp from "constants";
 import { MuseContext } from "~/hooks/muse.context";
 import { MuseEEGService, NeuroFusionParsedEEG } from "~/services/integrations/muse.service";
 import { SignalViewer } from "./signalviewer";
+import { useSession } from "next-auth/react";
 
 export const Experiment: FC<IExperiment> = (experiment) => {
   const [isNeurosityRecording, setIsNeurosityRecording] = useState(false);
@@ -36,18 +37,36 @@ export const Experiment: FC<IExperiment> = (experiment) => {
 
   const [experimentInfo, setExperimentInfo] = useState<IExperiment>(experiment);
 
+  const session = useSession();
+
   useEffect(() => {
     setExperimentInfo({ ...experiment, duration, tags });
   }, [experiment, tags, duration]);
 
   async function startNeurosityRecording() {
     if (connectedDevice) {
+      appInsights.trackEvent({
+        name: "start_neurosity_recording",
+        properties: {
+          deviceInfo: connectedDevice,
+          experimentInfo: experimentInfo,
+          userNpub: session.data?.user?.email,
+        },
+      });
       console.log(experimentInfo);
       neurosityService.startRecording(experimentInfo, connectedDevice?.channelNames, duration);
     }
   }
 
   async function stopNeurosityRecording() {
+    appInsights.trackEvent({
+      name: "stop_neurosity_recording",
+      properties: {
+        deviceInfo: connectedDevice,
+        experimentDetails: experimentInfo,
+        userNpub: session.data?.user?.email,
+      },
+    });
     neurosityService.stopRecording();
   }
 
@@ -61,13 +80,29 @@ export const Experiment: FC<IExperiment> = (experiment) => {
   async function startMuseRecording() {
     if (museEEGService) {
       setIsMuseRecording(true);
+      appInsights.trackEvent({
+        name: "start_muse_recording",
+        properties: {
+          deviceInfo: await museContext?.museClient?.deviceInfo(),
+          experimentInfo: experimentInfo,
+          userNpub: session.data?.user?.email,
+        },
+      });
       await museEEGService.startRecording();
     }
   }
 
   async function stopMuseRecording() {
     if (museEEGService) {
       setIsMuseRecording(false);
+      appInsights.trackEvent({
+        name: "stop_muse_recording",
+        properties: {
+          deviceInfo: await museContext?.museClient?.deviceInfo(),
+          experimentInfo: experimentInfo,
+          userNpub: session.data?.user?.email,
+        },
+      });
       await museEEGService.stopRecording(true);
     }
   }

frontend/src/pages/auth/login.tsx

@@ -8,7 +8,6 @@ import { authService } from "~/services";
 import { MainLayout, Meta } from "~/components/layouts";
 import { Button, Input, Logo } from "~/components/ui";
 import { getPrivateKey, persistPrivateKey } from "~/utils/auth";
-
 import { authOptions } from "../api/auth/[...nextauth]";
 import { SeverityLevel } from "@microsoft/applicationinsights-web";
 
@@ -26,11 +25,19 @@ const LoginPage = React.memo(() => {
 
   const useGuestAccount = async () => {
     try {
+      appInsights.trackEvent({ name: 'use_guest_account'})
       const privateKey = getPrivateKey();
       const { publicKey } = await persistPrivateKey(privateKey);
       completeNostrLogin(publicKey, privateKey);
     } catch (error) {
       console.error(error);
+      appInsights.trackException({
+        exception: new Error(error as string),
+        severityLevel: SeverityLevel.Error,
+        properties: {
+          message: "Error using guest account"
+        }
+      })
     }
   };
 
@@ -52,6 +59,7 @@ const LoginPage = React.memo(() => {
   const useExistingAccount = async (privateKey: string) => {
     appInsights.trackEvent({ name: "use_existing_account", properties: { customProperty: "value" } });
     try {
+      appInsights.trackEvent({ name: 'use_existing_account'});
       if (privateKey.length !== 64) {
         return;
       }

frontend/src/pages/profile.tsx

@@ -88,7 +88,7 @@ export const DeleteAccountModal: FC<IDeleteAccountModalProps> = ({
     <Dialog open={confirmDeleteAccount} onOpenChange={() => setConfirmDeleteAccount(!confirmDeleteAccount)}>
       <DialogContent>
         <DialogTitle>Confirm Delete Account</DialogTitle>
-        <DialogDescription>This will delete your private key. Are you sure you want to contiue?</DialogDescription>
+        <DialogDescription>This will delete your private key. Are you sure you want to continue?</DialogDescription>
         <Button intent="dark" onClick={deleteAccount}>
           Delete Account
         </Button>