Added Errors to Notarization Progress

src/entries/Background/db.ts

@@ -115,6 +115,7 @@ export async function setNotaryRequestError(
 export async function setNotaryRequestProgress(
   id: string,
   progress: RequestProgress,
+  errorMessage?: string,
 ): Promise<RequestHistory | null> {
   const existing = await historyDb.get(id);
 
@@ -123,6 +124,7 @@ export async function setNotaryRequestProgress(
   const newReq: RequestHistory = {
     ...existing,
     progress,
+    errorMessage,
   };
 
   await historyDb.put(id, newReq);

src/entries/Background/rpc.ts

@@ -167,9 +167,13 @@
   SendingRequest,
   ReadingTranscript,
   FinalizingOutputs,
+  Error,
 }
 
-export function progressText(progress: RequestProgress): string {
+export function progressText(
+  progress: RequestProgress,
+  errorMessage?: string,
+): string {
   switch (progress) {
     case RequestProgress.CreatingProver:
       return 'Creating prover...';
@@ -183,6 +187,10 @@
       return 'Reading request transcript...';
     case RequestProgress.FinalizingOutputs:
       return 'Finalizing notarization outputs...';
+    case RequestProgress.Error:
+      return errorMessage
+        ? errorMessage
+        : 'Error: Notarization Failed';
   }
 }
 
@@ -208,6 +216,7 @@
   secretHeaders?: string[];
   secretResps?: string[];
   cid?: string;
+  errorMessage?: string;
   metadata?: {
     [k: string]: string;
   };
@@ -428,9 +437,9 @@
   request: BackgroundAction,
   sendResponse: (data?: any) => void,
 ) {
-  const { id, progress } = request.data;
+  const { id, progress, errorMessage } = request.data;
 
-  const newReq = await setNotaryRequestProgress(id, progress);
+  const newReq = await setNotaryRequestProgress(id, progress, errorMessage);
   if (!newReq) return;
   await pushToRedux(addRequestHistory(await getNotaryRequest(id)));
 

src/entries/Offscreen/rpc.ts

@@ -452,27 +452,45 @@
   const hostname = urlify(url)?.hostname || '';
   const notary = NotaryServer.from(notaryUrl);
 
-  updateRequestProgress(id, RequestProgress.CreatingProver);
-  const prover: TProver = await new Prover({
+  let prover: TProver;
+  prover = await handleProgress(
     id,
-    serverDns: hostname,
-    maxSentData,
-    maxRecvData,
-  });
+    RequestProgress.CreatingProver,
+    () => new Prover({
+      id,
+      serverDns: hostname,
+      maxSentData,
+      maxRecvData,
+    }),
+    'Error creating prover'
+  );
 
-  updateRequestProgress(id, RequestProgress.GettingSession);
-  const sessionUrl = await notary.sessionUrl(maxSentData, maxRecvData);
+  const sessionUrl = await handleProgress(
+    id,
+    RequestProgress.GettingSession,
+    () => notary.sessionUrl(maxSentData, maxRecvData),
+    'Error getting session from Notary'
+  );
 
-  updateRequestProgress(id, RequestProgress.SettingUpProver);
-  await prover.setup(sessionUrl);
+  await handleProgress(
+    id,
+    RequestProgress.SettingUpProver,
+    () => prover.setup(sessionUrl),
+    'Error setting up prover'
+  );
 
-  updateRequestProgress(id, RequestProgress.SendingRequest);
-  await prover.sendRequest(websocketProxyUrl + `?token=${hostname}`, {
-    url,
-    method,
-    headers,
-    body,
-  });
+  await handleProgress(
+    id,
+    RequestProgress.SendingRequest,
+    () =>
+      prover.sendRequest(websocketProxyUrl + `?token=${hostname}`, {
+        url,
+        method,
+        headers,
+        body,
+      }),
+    'Error sending request'
+  );
 
   return prover;
 }
@@ -505,13 +523,39 @@
   return result;
 }
 
-function updateRequestProgress(id: string, progress: RequestProgress) {
-  devlog(`Request ${id}: ${progressText(progress)}`);
+function updateRequestProgress(
+  id: string,
+  progress: RequestProgress,
+  errorMessage?: string,
+) {
+  const progressMessage =
+    progress === RequestProgress.Error
+      ? `${errorMessage || 'Notarization Failed'}`
+      : progressText(progress);
+  console.log('ERROR MESSAGE', progressMessage);
+  devlog(`Request ${id}: ${progressMessage}`);
+
   browser.runtime.sendMessage({
     type: BackgroundActiontype.update_request_progress,
     data: {
       id,
-      progress: progress,
+      progress,
+      errorMessage,
     },
   });
 }
+
+async function handleProgress<T>(
+  id: string,
+  progress: RequestProgress,
+  action: () => Promise<T>,
+  errorMessage: string,
+): Promise<T> {
+  try {
+    updateRequestProgress(id, progress);
+    return await action();
+  } catch (error: any) {
+    updateRequestProgress(id, RequestProgress.Error, errorMessage);
+    throw error;
+  }
+}

src/entries/SidePanel/SidePanel.tsx

@@ -318,12 +318,14 @@ function StepContent(
       <button className="button mt-2 w-fit flex flex-row flex-nowrap items-center gap-2 cursor-default">
         <Icon className="animate-spin" fa="fa-solid fa-spinner" size={1} />
         <span className="text-sm">
-          {notaryRequest?.progress
-            ? `(${(
-                ((notaryRequest.progress + 1) / 6.06) *
-                100
-              ).toFixed()}%) ${progressText(notaryRequest.progress)}`
-            : 'Pending...'}
+          {notaryRequest?.progress === 6
+            ? `${progressText(notaryRequest.progress, notaryRequest?.errorMessage)}`
+            : notaryRequest?.progress
+              ? `(${(
+                  ((notaryRequest.progress + 1) / 6.06) *
+                  100
+                ).toFixed()}%) ${progressText(notaryRequest.progress)}`
+              : 'Pending...'}
         </span>
       </button>
     );

src/pages/History/index.tsx

@@ -1,11 +1,7 @@
 import React, { ReactElement, useState, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router';
-import {
-  useHistoryOrder,
-  useRequestHistory,
-  deleteRequestHistory,
-} from '../../reducers/history';
+import { useHistoryOrder, useRequestHistory } from '../../reducers/history';
 import Icon from '../../components/Icon';
 import NotarizeIcon from '../../assets/img/notarize.png';
 import { getNotaryApi, getProxyApi } from '../../utils/storage';
@@ -110,12 +106,14 @@ export function OneRequestHistory(props: {
                 size={1}
               />
               <span className="">
-                {request?.progress
-                  ? `(${(
-                      ((request.progress + 1) / 6.06) *
-                      100
-                    ).toFixed()}%) ${progressText(request.progress)}`
-                  : 'Pending...'}
+                {request?.progress === 6
+                  ? `${progressText(request.progress, request.errorMessage)}`
+                  : request?.progress
+                    ? `(${(
+                        ((request.progress + 1) / 6.06) *
+                        100
+                      ).toFixed()}%) ${progressText(request.progress)}`
+                    : 'Pending...'}
               </span>
             </div>
           )}