zkemail · wryonik · Feb 11, 2026
diff --git a/bun.lockb b/bun.lockb
diff --git a/src/app/(bluerpint-list)/BlueprintList.tsx b/src/app/(bluerpint-list)/BlueprintList.tsx
@@ -8,6 +8,7 @@ import { useState, useEffect, useRef, useCallback } from 'react';
 import Loader from '@/components/ui/loader';
 import { useAuthStore } from '@/lib/stores/useAuthStore';
 import { toast } from 'react-toastify';
+import { getErrorMessage } from '@/lib/errors';
 
 const PAGINATION_LIMIT = 20;
 
@@ -269,7 +270,7 @@ export default function BlueprintList({ search, filters, sort }: BlueprintListPr
         {isLoading ? (
           <Loader />
         ) : error ? (
-          <div className="text-red-600">Error loading more blueprints: {error.message}</div>
+          <div className="text-red-600">Error loading more blueprints: {getErrorMessage(error)}</div>
         ) : !hasMore && blueprints.length > 0 ? (
           <div className="text-grey-500">No more blueprints to load</div>
         ) : blueprints.length === 0 && !isLoading ? (

diff --git a/src/app/[id]/ConnectEmails.tsx b/src/app/[id]/ConnectEmails.tsx
@@ -7,6 +7,7 @@ import useGoogleAuth from '../hooks/useGoogleAuth';
 import { toast } from 'react-toastify';
 import { findOrCreateDSP } from '../utils';
 import { useEmailCacheStore } from '@/lib/stores/useEmailCacheStore';
+import { getErrorMessage } from '@/lib/errors';
 
 const ConnectEmails = () => {
   const { setFile, setStep, setEmlUploadMode } = useProofStore();
@@ -105,7 +106,7 @@ const ConnectEmails = () => {
                 emailCacheStore.clearCache();
                 setEmlUploadMode('upload');
               })
-              .catch((err) => toast.error(err.message ?? err));
+              .catch((err) => toast.error(getErrorMessage(err)));
           }
         }}
         id="drag-and-drop-emails"
@@ -155,7 +156,7 @@ const ConnectEmails = () => {
                     setEmlUploadMode('upload');
                   })
                   .catch((err) => {
-                    toast.error(err.message ?? err);
+                    toast.error(getErrorMessage(err));
                   });
               }
             }}

diff --git a/src/app/[id]/error.tsx b/src/app/[id]/error.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import { useEffect } from 'react';
+
+export default function BlueprintError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error('Blueprint page error:', error);
+  }, [error]);
+
+  return (
+    <div className="container mx-auto flex min-h-[50vh] flex-col items-center justify-center py-8">
+      <div className="max-w-md text-center">
+        <h2 className="mb-4 text-2xl font-bold text-gray-900">Failed to load blueprint</h2>
+        <p className="mb-6 text-gray-600">
+          There was a problem loading this blueprint. It may not exist or there might be a temporary issue.
+        </p>
+        {error.digest && (
+          <p className="mb-4 text-sm text-gray-400">Error ID: {error.digest}</p>
+        )}
+        <div className="flex gap-4 justify-center">
+          <button
+            onClick={reset}
+            className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 transition-colors"
+          >
+            Try again
+          </button>
+          <a
+            href="/"
+            className="rounded-md border border-gray-300 px-4 py-2 text-gray-700 hover:bg-gray-50 transition-colors"
+          >
+            Back to blueprints
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/[id]/page.tsx b/src/app/[id]/page.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { use, useEffect } from 'react';
+import { use, useEffect, useRef } from 'react';
 import Image from 'next/image';
 import { getStatusColorLight, getStatusIcon, getStatusName } from '../utils';
 import { Button } from '@/components/ui/button';
@@ -19,6 +19,8 @@ import { Blueprint, Status, ZkFramework } from '@zk-email/sdk';
 import { toast } from 'react-toastify';
 import { useAuthStore } from '@/lib/stores/useAuthStore';
 import { initNoirWasm } from '@/lib/utils';
+import { captureEvent, getClientInfo } from '@/lib/analytics';
+import { isAuthError, isNotFoundError, getErrorMessage } from '@/lib/errors';
 
 const Pattern = ({ params }: { params: Promise<{ id: string }> }) => {
   const { id } = use(params);
@@ -42,6 +44,9 @@ const Pattern = ({ params }: { params: Promise<{ id: string }> }) => {
     : ['Connect emails', 'Select emails', 'View and verify'];
 
   let step = searchParams.get('step') || '0';
+  const pageStartRef = useRef<number>(performance.now());
+  const stepStartRef = useRef<number>(performance.now());
+  const lastStepRef = useRef<string>(step);
 
   useEffect(() => {
     reset();
@@ -59,24 +64,60 @@ const Pattern = ({ params }: { params: Promise<{ id: string }> }) => {
         }
       })
       .catch((err) => {
-        if (err.toString().includes('401')) {
+        if (isAuthError(err)) {
           clearAuth();
           return;
         }
         console.error(`Failed to get blueprint with id ${id}: `, err);
-        toast.error('This blueprint could not be found');
+        toast.error(isNotFoundError(err) ? 'This blueprint could not be found' : getErrorMessage(err));
         router.push('/');
       });
   }, []);
 
+  useEffect(() => {
+    const now = performance.now();
+    if (lastStepRef.current !== step) {
+      captureEvent('proof_wizard_step_time_spent', {
+        step: lastStepRef.current,
+        step_label: steps[parseInt(lastStepRef.current)],
+        duration_ms: Math.round(now - stepStartRef.current),
+        blueprint_id: id,
+        has_external_inputs: !!blueprint?.props.externalInputs?.length,
+        ...getClientInfo(),
+      });
+      lastStepRef.current = step;
+      stepStartRef.current = now;
+    }
+  }, [step, id, steps, blueprint]);
+
+  useEffect(() => {
+    return () => {
+      const now = performance.now();
+      captureEvent('proof_wizard_step_time_spent', {
+        step: lastStepRef.current,
+        step_label: steps[parseInt(lastStepRef.current)],
+        duration_ms: Math.round(now - stepStartRef.current),
+        blueprint_id: id,
+        has_external_inputs: !!blueprint?.props.externalInputs?.length,
+        ...getClientInfo(),
+      });
+      captureEvent('proof_wizard_page_time_spent', {
+        duration_ms: Math.round(now - pageStartRef.current),
+        blueprint_id: id,
+        has_external_inputs: !!blueprint?.props.externalInputs?.length,
+        ...getClientInfo(),
+      });
+    };
+  }, [id, steps, blueprint]);
+
   const onCancelCompilation = async () => {
     if (!blueprint) return;
     try {
       await blueprint.cancelCompilation();
       router.push(`/create/${id}`);
     } catch (err) {
       console.error('Failed to cancel blueprint compilation: ', err);
-      toast.error('Failed to cancel blueprint compilation');
+      toast.error(`Failed to cancel blueprint compilation: ${getErrorMessage(err)}`);
     }
   };
 

diff --git a/src/app/[id]/store.ts b/src/app/[id]/store.ts
@@ -15,6 +15,7 @@ import { useEmlStore } from '@/lib/stores/useEmlStore';
 import sdk from '@/lib/sdk';
 import { initNoirWasm } from '@/lib/utils';
 import { get, set } from 'idb-keyval';
+import { captureEvent, getClientInfo } from '@/lib/analytics';
 
 export type Step = '0' | '1' | '2' | '3';
 export type EmlUploadMode = 'upload' | 'connect';
@@ -159,6 +160,20 @@ export const useProofStore = create<ProofState>()(
 
         // Create prover and generate proof
         const prover = blueprint.createProver({ isLocal });
+        const startTime =
+          typeof performance !== 'undefined' ? performance.now() : Date.now();
+        captureEvent('proof_generation_started', {
+          is_local: isLocal,
+          zk_framework: blueprint.props.clientZkFramework,
+          client_zk_framework: blueprint.props.clientZkFramework,
+          server_zk_framework: blueprint.props.serverZkFramework,
+          blueprint_id: blueprint.props.id,
+          blueprint_slug: blueprint.props.slug,
+          blueprint_version: blueprint.props.version,
+          external_inputs_count: externalInputs?.length ?? 0,
+          eml_upload_mode: get().emlUploadMode,
+          ...getClientInfo(),
+        });
         let proof: Proof;
         try {
           let options: GenerateProofOptions = {};
@@ -167,9 +182,41 @@ export const useProofStore = create<ProofState>()(
             options.noirWasm = noirWasm;
           }
           proof = await prover.generateProof(file, externalInputs || [], options);
+          const endTime =
+            typeof performance !== 'undefined' ? performance.now() : Date.now();
+          captureEvent('proof_generation_succeeded', {
+            is_local: isLocal,
+            zk_framework: blueprint.props.clientZkFramework,
+            client_zk_framework: blueprint.props.clientZkFramework,
+            server_zk_framework: blueprint.props.serverZkFramework,
+            blueprint_id: blueprint.props.id,
+            blueprint_slug: blueprint.props.slug,
+            blueprint_version: blueprint.props.version,
+            external_inputs_count: externalInputs?.length ?? 0,
+            eml_upload_mode: get().emlUploadMode,
+            duration_ms: Math.round(endTime - startTime),
+            proof_id: proof.props.id,
+            ...getClientInfo(),
+          });
           // save proof.props with blueprint.props.id as proof on useProofEmailStore here
         } catch (err) {
           console.error('Failed to generate a proof request');
+          const endTime =
+            typeof performance !== 'undefined' ? performance.now() : Date.now();
+          captureEvent('proof_generation_failed', {
+            is_local: isLocal,
+            zk_framework: blueprint.props.clientZkFramework,
+            client_zk_framework: blueprint.props.clientZkFramework,
+            server_zk_framework: blueprint.props.serverZkFramework,
+            blueprint_id: blueprint.props.id,
+            blueprint_slug: blueprint.props.slug,
+            blueprint_version: blueprint.props.version,
+            external_inputs_count: externalInputs?.length ?? 0,
+            eml_upload_mode: get().emlUploadMode,
+            duration_ms: Math.round(endTime - startTime),
+            error_message: err instanceof Error ? err.message : String(err),
+            ...getClientInfo(),
+          });
           throw err;
         }
 

diff --git a/src/app/[id]/versions/VersionCard.tsx b/src/app/[id]/versions/VersionCard.tsx
@@ -17,6 +17,7 @@ import { getFileContent } from '@/lib/utils';
 import { Step } from '../store';
 import DragAndDropFile from '@/app/components/DragAndDropFile';
 import { useEmlStore } from '@/lib/stores/useEmlStore';
+import { getErrorMessage } from '@/lib/errors';
 
 interface VersionCardProps {
   blueprint: Blueprint;
@@ -78,7 +79,7 @@ const VersionCard = ({
       toast.success('Compilation cancelled');
     } catch (err) {
       console.error('Failed to cancel blueprint compilation: ', err);
-      toast.error('Failed to cancel blueprint compilation');
+      toast.error(`Failed to cancel blueprint compilation: ${getErrorMessage(err)}`);
     }
   };
 
@@ -91,7 +92,7 @@ const VersionCard = ({
       }
     } catch (err) {
       // TODO: Handle different kind of errors, e.g. per field errors
-      toast.error('Failed to submit blueprint');
+      toast.error(`Failed to submit blueprint: ${getErrorMessage(err)}`);
       console.error('Failed to submit blueprint: ', err);
     } finally {
       setIsSaveDraftLoading(false);

diff --git a/src/app/[id]/versions/page.tsx b/src/app/[id]/versions/page.tsx
@@ -12,6 +12,7 @@ import { toast } from 'react-toastify';
 import Loader from '@/components/ui/loader';
 import { useAuthStore } from '@/lib/stores/useAuthStore';
 import { getCombinedBlueprintStatus } from '@/app/utils';
+import { getErrorMessage } from '@/lib/errors';
 
 const VersionsPage = ({ params }: { params: Promise<{ id: string }> }) => {
   const router = useRouter();
@@ -67,7 +68,7 @@ const VersionsPage = ({ params }: { params: Promise<{ id: string }> }) => {
       }
     } catch (err) {
       console.error('Failed to delete blueprint: ', err);
-      toast.error('Failed to delete blueprint');
+      toast.error(`Failed to delete blueprint: ${getErrorMessage(err)}`);
     } finally {
       setIsDeleteBlueprintLoading(false);
     }

diff --git a/src/app/create/[id]/page.tsx b/src/app/create/[id]/page.tsx
@@ -2,7 +2,7 @@
 
 import { useCreateBlueprintStore } from './store';
 
-import { use, useEffect, useState } from 'react';
+import { use, useEffect, useRef, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import Image from 'next/image';
 import { extractEMLDetails, DecomposedRegex, testBlueprint, parseEmail } from '@zk-email/sdk';
@@ -25,6 +25,8 @@ import { debounce } from '@/app/utils';
 import ModalGenerator from '@/components/ModalGenerator';
 import { useEmlStore } from '@/lib/stores/useEmlStore';
 import Loader from '@/components/ui/loader';
+import { captureEvent, getClientInfo } from '@/lib/analytics';
+import { getErrorMessage } from '@/lib/errors';
 
 type Step = '0' | '1' | '2';
 
@@ -86,6 +88,9 @@ const CreateBlueprint = ({ params }: { params: Promise<{ id: string }> }) => {
 
   const searchParams = useSearchParams();
   let step = searchParams.get('step') || '0';
+  const pageStartRef = useRef<number>(performance.now());
+  const stepStartRef = useRef<number>(performance.now());
+  const lastStepRef = useRef<string>(step);
 
   const setStep = (step: Step, id?: string) => {
     if (id) {
@@ -107,6 +112,39 @@ const CreateBlueprint = ({ params }: { params: Promise<{ id: string }> }) => {
     };
   }, [optOut]);
 
+  useEffect(() => {
+    const now = performance.now();
+    if (lastStepRef.current !== step) {
+      captureEvent('create_blueprint_step_time_spent', {
+        step: lastStepRef.current,
+        step_label: steps[parseInt(lastStepRef.current)],
+        duration_ms: Math.round(now - stepStartRef.current),
+        blueprint_id: id,
+        ...getClientInfo(),
+      });
+      lastStepRef.current = step;
+      stepStartRef.current = now;
+    }
+  }, [step, id, steps]);
+
+  useEffect(() => {
+    return () => {
+      const now = performance.now();
+      captureEvent('create_blueprint_step_time_spent', {
+        step: lastStepRef.current,
+        step_label: steps[parseInt(lastStepRef.current)],
+        duration_ms: Math.round(now - stepStartRef.current),
+        blueprint_id: id,
+        ...getClientInfo(),
+      });
+      captureEvent('create_blueprint_page_time_spent', {
+        duration_ms: Math.round(now - pageStartRef.current),
+        blueprint_id: id,
+        ...getClientInfo(),
+      });
+    };
+  }, [id, steps]);
+
   useEffect(() => {
     if (savedEmls[id]) {
       const parser = new PostalMime();
@@ -133,7 +171,7 @@ const CreateBlueprint = ({ params }: { params: Promise<{ id: string }> }) => {
           setHasLoadedBlueprint(true);
         } catch (err) {
           console.error('Failed to load blueprint:', err);
-          toast.error('Failed to load blueprint');
+          toast.error(getErrorMessage(err));
         } finally {
           setIsBlueprintLoading(false);
         }
@@ -183,7 +221,7 @@ const CreateBlueprint = ({ params }: { params: Promise<{ id: string }> }) => {
       router.push(`/${blueprintId}`);
     } catch (error) {
       console.error('Failed to compile:', error);
-      toast.error(`Failed to compile blueprint: ${error?.toString()?.replace('Error: ', '')}`);
+      toast.error(`Failed to compile blueprint: ${getErrorMessage(error)}`);
     } finally {
       setIsCompileLoading(false);
     }