feat: add error handling to prover (#42)

tlsnotary · Feb 6, 2024 · 1da4f45 · 1da4f45
1 parent c8f2b54
commit 1da4f45
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 44 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.4.2",
     "tailwindcss": "^3.3.3",
-    "tlsn-js": "0.1.0-alpha.3-rc1"
+    "tlsn-js": "0.1.0-alpha.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -88,4 +88,4 @@
     "webpack-dev-server": "^4.11.1",
     "zip-webpack-plugin": "^4.0.1"
   }
-}
+}
diff --git a/src/entries/Background/rpc.ts b/src/entries/Background/rpc.ts
@@ -177,10 +177,19 @@ async function handleRetryProveReqest(
 ) {
   const { id, notaryUrl, websocketProxyUrl } = request.data;
 
+  await setNotaryRequestError(id, null);
   await setNotaryRequestStatus(id, 'pending');
 
   const req = await getNotaryRequest(id);
 
+  await browser.runtime.sendMessage({
+    type: BackgroundActiontype.push_action,
+    data: {
+      tabId: 'background',
+    },
+    action: addRequestHistory(req),
+  });
+
   await browser.runtime.sendMessage({
     type: BackgroundActiontype.process_prove_request,
     data: {

diff --git a/src/entries/Offscreen/Offscreen.tsx b/src/entries/Offscreen/Offscreen.tsx
@@ -45,6 +45,8 @@ const Offscreen = () => {
                 },
               });
             } catch (error) {
+              console.log('i caught an error');
+              console.error(error);
               browser.runtime.sendMessage({
                 type: BackgroundActiontype.finish_prove_request,
                 data: {

diff --git a/src/pages/History/index.tsx b/src/pages/History/index.tsx
@@ -10,6 +10,11 @@ import Icon from '../../components/Icon';
 import { get, NOTARY_API_LS_KEY, PROXY_API_LS_KEY } from '../../utils/storage';
 import { urlify, download } from '../../utils/misc';
 import { BackgroundActiontype } from '../../entries/Background/rpc';
+import Modal, {
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '../../components/Modal/Modal';
 
 export default function History(): ReactElement {
   const history = useHistoryOrder();
@@ -26,6 +31,7 @@ export default function History(): ReactElement {
 function OneRequestHistory(props: { requestId: string }): ReactElement {
   const dispatch = useDispatch();
   const request = useRequestHistory(props.requestId);
+  const [showingError, showError] = useState(false);
   const navigate = useNavigate();
   const { status } = request || {};
   const requestUrl = urlify(request?.url || '');
@@ -55,8 +61,50 @@ function OneRequestHistory(props: { requestId: string }): ReactElement {
     dispatch(deleteRequestHistory(props.requestId));
   }, [props.requestId]);
 
+  const onShowError = useCallback(async () => {
+    showError(true);
+  }, [request?.error, showError]);
+
+  const closeModal = useCallback(() => showError(false), [showError]);
+
+  const RetryButton = (): ReactElement => (
+    <button
+      className="flex flex-row flex-grow-0 gap-2 self-end items-center justify-end px-2 py-1 bg-slate-100 text-slate-300 hover:bg-slate-200 hover:text-slate-500 hover:font-bold"
+      onClick={onRetry}
+    >
+      <Icon fa="fa-solid fa-arrows-rotate" size={1} />
+      <span className="text-xs font-bold">Retry</span>
+    </button>
+  );
+
+  const ErrorButton = (): ReactElement => (
+    <button
+      className="flex flex-row flex-grow-0 gap-2 self-end items-center justify-end px-2 py-1 bg-red-100 text-red-300 hover:bg-red-200 hover:text-red-500 hover:font-bold"
+      onClick={onShowError}
+    >
+      <Icon fa="fa-solid fa-circle-exclamation" size={1} />
+      <span className="text-xs font-bold">Error</span>
+    </button>
+  );
+
   return (
     <div className="flex flex-row flex-nowrap border rounded-md p-2 gap-1 hover:bg-slate-50 cursor-pointer">
+      {showingError && (
+        <Modal
+          className="flex flex-col gap-4 items-center text-base cursor-default justify-center !w-auto mx-4 my-[50%] min-h-24 p-4 border border-red-500"
+          onClose={closeModal}
+        >
+          <ModalContent className="flex justify-center items-center text-slate-500">
+            {request?.error || 'Something went wrong :('}
+          </ModalContent>
+          <button
+            className="m-0 w-24 bg-red-100 text-red-300 hover:bg-red-200 hover:text-red-500"
+            onClick={closeModal}
+          >
+            OK
+          </button>
+        </Modal>
+      )}
       <div className="flex flex-col flex-nowrap flex-grow flex-shrink w-0">
         <div className="flex flex-row items-center text-xs">
           <div className="bg-slate-200 text-slate-400 px-1 py-0.5 rounded-sm">
@@ -84,46 +132,39 @@ function OneRequestHistory(props: { requestId: string }): ReactElement {
       <div className="flex flex-col gap-1">
         {status === 'success' && (
           <>
-            <div
+            <button
               className="flex flex-row flex-grow-0 gap-2 self-end items-center justify-end px-2 py-1 bg-slate-600 text-slate-200 hover:bg-slate-500 hover:text-slate-100 hover:font-bold"
               onClick={onView}
             >
               <Icon className="" fa="fa-solid fa-receipt" size={1} />
               <span className="text-xs font-bold">View Proof</span>
-            </div>
-            <div
+            </button>
+            <button
               className="flex flex-row flex-grow-0 gap-2 self-end items-center justify-end px-2 py-1 bg-slate-100 text-slate-300 hover:bg-slate-200 hover:text-slate-500 hover:font-bold"
               onClick={() =>
                 download(`${request?.id}.json`, JSON.stringify(request?.proof))
               }
             >
               <Icon className="" fa="fa-solid fa-download" size={1} />
               <span className="text-xs font-bold">Download</span>
-            </div>
+            </button>
           </>
         )}
-        {(!status || status === 'error') && (
-          <div
-            className="flex flex-row flex-grow-0 gap-2 self-end items-center justify-end px-2 py-1 bg-slate-100 text-slate-300 hover:bg-slate-200 hover:text-slate-500 hover:font-bold"
-            onClick={onRetry}
-          >
-            <Icon fa="fa-solid fa-arrows-rotate" size={1} />
-            <span className="text-xs font-bold">Retry</span>
-          </div>
-        )}
+        {status === 'error' && !!request?.error && <ErrorButton />}
+        {(!status || status === 'error') && <RetryButton />}
         {status === 'pending' && (
-          <div className="flex flex-row flex-grow-0 gap-2 self-end items-center justify-end px-2 py-1 bg-slate-100 text-slate-300 font-bold">
+          <button className="flex flex-row flex-grow-0 gap-2 self-end items-center justify-end px-2 py-1 bg-slate-100 text-slate-300 font-bold">
             <Icon className="animate-spin" fa="fa-solid fa-spinner" size={1} />
             <span className="text-xs font-bold">Pending</span>
-          </div>
+          </button>
         )}
-        <div
+        <button
           className="flex flex-row flex-grow-0 gap-2 self-end items-center justify-end px-2 py-1 bg-slate-100 text-slate-300 hover:bg-red-100 hover:text-red-500 hover:font-bold"
           onClick={onDelete}
         >
           <Icon className="" fa="fa-solid fa-trash" size={1} />
           <span className="text-xs font-bold">Delete</span>
-        </div>
+        </button>
       </div>
     </div>
   );

diff --git a/yarn.lock b/yarn.lock
@@ -6745,10 +6745,10 @@
   "resolved" "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz"
   "version" "3.0.0"
 
-"tlsn-js@^0.0.2":
-  "integrity" "sha512-/Tdv9B4nfUmwhhN7Qt66sWymmVeKVkAy1GXQcsCITyiacZdVgTYa1WKLyLRvcHQWVQThJJ1KDuPlT5yC+UKWVA=="
-  "resolved" "https://registry.npmjs.org/tlsn-js/-/tlsn-js-0.0.2.tgz"
-  "version" "0.0.2"
+"tlsn-js@0.1.0-alpha.3":
+  "integrity" "sha512-P26JOq50UOeQgjznH/M5E4B2lHBuSHd36jvHly/c2mNt5N3TsH0Dmhk16Ll7t/Dt62YdVcYOEvg/GVA3Xdkh0A=="
+  "resolved" "https://registry.npmjs.org/tlsn-js/-/tlsn-js-0.1.0-alpha.3.tgz"
+  "version" "0.1.0-alpha.3"
   dependencies:
     "comlink" "^4.4.1"
 
@@ -6812,9 +6812,6 @@
   dependencies:
     "tslib" "^1.8.1"
 
-"ttlcache@@types/@isaacs/ttlcache":
-  "resolved" "file:@types/@isaacs/ttlcache"
-
 "type-check@^0.4.0", "type-check@~0.4.0":
   "integrity" "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="
   "resolved" "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz"