feat: event tracking errors

Author: comatory

studio/src/components/onboarding/step-1.tsx

@@ -62,10 +62,19 @@ export const Step1 = () => {
   const { mutate, isPending } = useMutation(createOnboarding, {
     onSuccess: (d) => {
       if (d.response?.code !== EnumStatusCode.OK) {
+        const description = d.response?.details ?? 'We had issues with storing your data. Please try again.';
         toast({
-          description: d.response?.details ?? 'We had issues with storing your data. Please try again.',
+          description,
           duration: 3000,
         });
+        captureOnboardingEvent(posthog, {
+          name: 'onboarding_step_failed',
+          options: {
+            step_name: 'welcome',
+            error_category: 'resource',
+            error_message: description,
+          },
+        });
         return;
       }
 
@@ -85,10 +94,19 @@ export const Step1 = () => {
       router.push('/onboarding/2');
     },
     onError: (error) => {
+      const description = error.details.toString() ?? 'We had issues with storing your data. Please try again.';
       toast({
-        description: error.details.toString() ?? 'We had issues with storing your data. Please try again.',
+        description,
         duration: 3000,
       });
+      captureOnboardingEvent(posthog, {
+        name: 'onboarding_step_failed',
+        options: {
+          step_name: 'welcome',
+          error_category: 'resource',
+          error_message: description,
+        },
+      });
     },
   });
 

studio/src/components/onboarding/step-2.tsx

@@ -138,7 +138,7 @@ export const Step2 = () => {
     return () => clearTimeout(timer);
   }, [pollingEpoch]);
 
-  const { data, isError } = useQuery(
+  const { data, isError, error } = useQuery(
     getFederatedGraphByName,
     { name: 'demo', namespace: 'default' },
     {
@@ -149,8 +149,38 @@ export const Step2 = () => {
   const status = getDemoGraphStatus({ data, isPolling, isError });
 
   useEffect(() => {
-    if (status === 'ok') setIsPolling(false);
-  }, [status]);
+    switch (status) {
+      case 'ok': {
+        setIsPolling(false);
+        break;
+      }
+      case 'fail':
+      case 'error': {
+        captureOnboardingEvent(posthog, {
+          name: 'onboarding_step_failed',
+          options: {
+            step_name: 'create_graph',
+            error_category: 'resource',
+            error_message: 'Demo federated graph not created',
+          },
+        });
+        break;
+      }
+    }
+  }, [status, posthog]);
+
+  useEffect(() => {
+    if (!isError) return;
+
+    captureOnboardingEvent(posthog, {
+      name: 'onboarding_step_failed',
+      options: {
+        step_name: 'create_graph',
+        error_category: 'resource',
+        error_message: error.message,
+      },
+    });
+  }, [isError, error, posthog]);
 
   return (
     <OnboardingContainer>