Track event metrics in vercel

FuelLabs · Apr 11, 2024 · 4b428ff · 4b428ff
1 parent f463e34
commit 4b428ff
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 23 deletions.
diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -14,7 +14,7 @@ import { useLog } from './features/editor/hooks/useLog';
 import { Toolchain } from './features/editor/components/ToolchainDropdown';
 import { useTranspile } from './features/editor/hooks/useTranspile';
 import EditorView from './features/editor/components/EditorView';
-import { Analytics } from '@vercel/analytics/react';
+import { Analytics, track } from '@vercel/analytics/react';
 
 const DRAWER_WIDTH = '40vw';
 
@@ -88,8 +88,10 @@ function App() {
   );
 
   const onCompileClick = useCallback(() => {
+    track('Compile Click', { toolchain });
     if (showSolidity) {
       // Transpile the Solidity code before compiling.
+      track('Transpile');
       setCodeToTranspile(solidityCode);
     } else {
       setCodeToCompile(swayCode);

diff --git a/app/src/features/editor/components/ExampleDropdown.tsx b/app/src/features/editor/components/ExampleDropdown.tsx
@@ -21,8 +21,10 @@ function ExampleDropdown({
   examples,
   style,
 }: ExampleDropdownProps) {
-  const [currentExample, setCurrentExample] =
-    React.useState<ExampleMenuItem | null>(null);
+  const [currentExample, setCurrentExample] = React.useState<ExampleMenuItem>({
+    label: '',
+    code: '',
+  });
 
   const onChange = useCallback(
     (event: any) => {
@@ -47,7 +49,7 @@ function ExampleDropdown({
             label='Example'
             variant='outlined'
             style={{ minWidth: '110px', background: 'white' }}
-            value={currentExample?.label}
+            value={currentExample.label}
             onChange={onChange}>
             {examples.map(({ label }: ExampleMenuItem, index) => (
               <MenuItem key={`${label}-${index}`} value={index}>

diff --git a/app/src/features/editor/hooks/useCompile.tsx b/app/src/features/editor/hooks/useCompile.tsx
@@ -9,6 +9,7 @@ import {
 import { CopyableHex } from '../../../components/shared';
 import { Toolchain } from '../components/ToolchainDropdown';
 import { SERVER_URI } from '../../../constants';
+import { track } from '@vercel/analytics/react';
 
 function toResults(
   prefixedBytecode: string,
@@ -63,6 +64,10 @@ export function useCompile(
         if (response.status < 400) {
           return response.json();
         } else {
+          track('Compile Error', {
+            source: 'network',
+            status: response.status,
+          });
           setServerError(true);
         }
       })
@@ -94,6 +99,7 @@ export function useCompile(
         }
       })
       .catch(() => {
+        track('Compile Error', { source: 'network' });
         setServerError(true);
       });
     setIsCompiled(true);
@@ -113,4 +119,4 @@ export function useCompile(
       setVersion(undefined);
     }
   }, [setResults, version]);
-}
+}
diff --git a/app/src/features/editor/hooks/useTranspile.tsx b/app/src/features/editor/hooks/useTranspile.tsx
@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import ansicolor from 'ansicolor';
 import React, { useState, useEffect } from 'react';
 import { SERVER_URI } from '../../../constants';
+import { track } from '@vercel/analytics/react';
 
 export function useTranspile(
   code: string | undefined,
@@ -40,6 +41,10 @@ export function useTranspile(
         if (response.status < 400) {
           return response.json();
         } else {
+          track('Transpile Error', {
+            source: 'network',
+            status: response.status,
+          });
           setServerError(true);
         }
       })
@@ -64,6 +69,7 @@ export function useTranspile(
         }
       })
       .catch(() => {
+        track('Transpile Error', { source: 'network' });
         setServerError(true);
       });
   }, [code, setResults, onSwayCodeChange, setCodeToCompile]);

diff --git a/app/src/features/interact/components/CallButton.tsx b/app/src/features/interact/components/CallButton.tsx
@@ -2,6 +2,8 @@ import { useCallFunction } from '../hooks/useCallFunction';
 import { CallType } from '../../../utils/types';
 import { CallableParamValue } from './FunctionParameters';
 import SecondaryButton from '../../../components/SecondaryButton';
+import { track } from '@vercel/analytics/react';
+import { useCallback } from 'react';
 
 interface CallButtonProps {
   contractId: string;
@@ -29,10 +31,11 @@ export function CallButton({
     updateLog,
   });
 
-  function onFunctionClick() {
+  const onFunctionClick = useCallback(() => {
+    track('Function Call Click', { callType });
     setResponse('');
     functionMutation.mutate();
-  }
+  }, [callType, functionMutation, setResponse]);
 
   return (
     <SecondaryButton

diff --git a/app/src/features/toolbar/components/DeploymentButton.tsx b/app/src/features/toolbar/components/DeploymentButton.tsx
@@ -7,6 +7,7 @@ import {
 import SecondaryButton from '../../../components/SecondaryButton';
 import { ButtonSpinner } from '../../../components/shared';
 import { useConnectIfNotAlready } from '../hooks/useConnectIfNotAlready';
+import { track } from '@vercel/analytics/react';
 
 interface DeploymentButtonProps {
   abi: string;
@@ -72,6 +73,7 @@ export function DeploymentButton({
   );
 
   const onDeployClick = useCallback(async () => {
+    track('Deploy Click');
     if (!isConnected) {
       updateLog(`Connecting to wallet...`);
     }

diff --git a/app/src/features/toolbar/hooks/useDeployContract.ts b/app/src/features/toolbar/hooks/useDeployContract.ts
@@ -1,6 +1,8 @@
 import { ContractFactory, JsonAbi, StorageSlot } from 'fuels';
 import { useMutation } from '@tanstack/react-query';
-import { useFuel, useWallet } from '@fuels/react';
+import { useConnectors, useFuel, useWallet } from '@fuels/react';
+import { track } from '@vercel/analytics/react';
+import { useMemo } from 'react';
 
 const DEPLOYMENT_TIMEOUT_MS = 120000;
 
@@ -19,14 +21,25 @@ export function useDeployContract(
 ) {
   const { wallet, isLoading: walletIsLoading } = useWallet();
   const { fuel } = useFuel();
+  const { connectors } = useConnectors();
+
+  const walletName = useMemo(() => {
+    const currentConnector = connectors.find(
+      (connector) => connector.connected
+    );
+    return !!wallet && !!currentConnector ? currentConnector.name : 'none';
+  }, [connectors, wallet]);
 
   const mutation = useMutation({
     // Retry once if the wallet is still loading.
     retry: walletIsLoading && !wallet ? 1 : 0,
-    onSuccess: onSuccess,
-    onError: onError,
+    onSuccess,
+    onError: (error) => {
+      track('Deploy Error', { source: error.name, walletName });
+      onError(error);
+    },
     mutationFn: async () => {
-      const network = await fuel.currentNetwork();
+      const { url: networkUrl } = await fuel.currentNetwork();
       if (!wallet) {
         if (walletIsLoading) {
           updateLog('Connecting to wallet...');
@@ -49,26 +62,24 @@ export function useDeployContract(
             });
             resolve({
               contractId: contract.id.toB256(),
-              networkUrl: network.url,
+              networkUrl,
             });
           } catch (error) {
+            track('Deploy Error', { source: 'sdk', networkUrl, walletName });
             reject(error);
           }
         }
       );
 
       const timeoutPromise = new Promise((_resolve, reject) =>
-        setTimeout(
-          () =>
-            reject(
-              new Error(
-                `Request timed out after ${
-                  DEPLOYMENT_TIMEOUT_MS / 1000
-                } seconds`
-              )
-            ),
-          DEPLOYMENT_TIMEOUT_MS
-        )
+        setTimeout(() => {
+          track('Deploy Error', { source: 'timeout', networkUrl, walletName });
+          reject(
+            new Error(
+              `Request timed out after ${DEPLOYMENT_TIMEOUT_MS / 1000} seconds`
+            )
+          );
+        }, DEPLOYMENT_TIMEOUT_MS)
       );
 
       return await Promise.race([resultPromise, timeoutPromise]);