add rudimentary error reporting in a new tab

4 files changed, 71 insertions, 17 deletions

diff --git a/src/webex/messages.ts b/src/webex/messages.ts
index d7ecd06a1..397e8876e 100644
--- a/src/webex/messages.ts
+++ b/src/webex/messages.ts
@@ -176,6 +176,14 @@ export interface MessageMap {
     request: { };
     response: void;
   };
+  "log-and-display-error": {
+    request: any;
+    response: void;
+  };
+  "get-report": {
+    request: { reportUid: string };
+    response: void;
+  };
 }
 
 /**
diff --git a/src/webex/pages/error.tsx b/src/webex/pages/error.tsx
index e86b6cf4c..3f3940d72 100644
--- a/src/webex/pages/error.tsx
+++ b/src/webex/pages/error.tsx
@@ -22,40 +22,69 @@
  * @author Florian Dold
  */
 
+
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import URI = require("urijs");
 
+import * as wxApi from "../wxApi";
+
 interface ErrorProps {
-  message: string;
+  report: any;
 }
 
 class ErrorView extends React.Component<ErrorProps, { }> {
   render(): JSX.Element {
-    return (
-      <div>
-        An error occurred: {this.props.message}
-      </div>
-    );
+    const report = this.props.report;
+    if (!report) {
+      return (
+        <div>
+          <h1>Error Report Not Found</h1>
+          <p>This page is supposed to display an error reported by the GNU Taler wallet,
+              but the corresponding error report can't be found.</p>
+          <p>Maybe the error occured before the browser was restarted or the wallet was reloaded.</p>
+        </div>
+      );
+    }
+    switch (report.name) {
+      default:
+        return (
+          <div>
+            <h1>Unknown Error</h1>
+            The GNU Taler wallet reported an unknown error.  Here are the details:
+            <pre>
+              {JSON.stringify(report, null, " ")}
+            </pre>
+          </div>
+        );
+    }
   }
 }
 
 async function main() {
-  try {
-    const url = new URI(document.location.href);
-    const query: any = URI.parseQuery(url.query());
+  const url = new URI(document.location.href);
+  const query: any = URI.parseQuery(url.query());
 
-    const message: string = query.message || "unknown error";
+  const container = document.getElementById("container");
+  if (!container) {
+    console.error("fatal: can't mount component, countainer missing");
+    return;
+  }
 
-    ReactDOM.render(<ErrorView message={message} />, document.getElementById(
-      "container")!);
+  // report that we'll render, either looked up from the
+  // logging module or synthesized here for fixed/fatal errors
+  let report;
 
-  } catch (e) {
-    // TODO: provide more context information, maybe factor it out into a
-    // TODO:generic error reporting function or component.
-    document.body.innerText = `Fatal error: "${e.message}".`;
-    console.error(`got error "${e.message}"`, e);
+  const reportUid: string = query.reportUid;
+  if (!reportUid) {
+    report = {
+      name: "missing-error",
+    };
+  } else {
+    report = await wxApi.getReport(reportUid);
   }
+
+  ReactDOM.render(<ErrorView report={report} />, container);
 }
 
 document.addEventListener("DOMContentLoaded", () => main());
diff --git a/src/webex/wxApi.ts b/src/webex/wxApi.ts
index 1371e27e4..306406a1a 100644
--- a/src/webex/wxApi.ts
+++ b/src/webex/wxApi.ts
@@ -321,3 +321,11 @@ export function getSenderWireInfos(): Promise<SenderWireInfos> {
 export function returnCoins(args: { amount: AmountJson, exchange: string, senderWire: object }): Promise<void> {
   return callBackend("return-coins", args);
 }
+
+export function logAndDisplayError(args: any): Promise<void> {
+  return callBackend("log-and-display-error", args);
+}
+
+export function getReport(reportUid: string): Promise<void> {
+  return callBackend("get-report", { reportUid });
+}
diff --git a/src/webex/wxBackend.ts b/src/webex/wxBackend.ts
index 974bcb3c2..353961ff0 100644
--- a/src/webex/wxBackend.ts
+++ b/src/webex/wxBackend.ts
@@ -303,6 +303,15 @@ function handleMessage(sender: MessageSender,
       }
       return resp;
     }
+    case "log-and-display-error":
+      logging.storeReport(detail).then((reportUid) => {
+        chrome.tabs.create({
+          url: chrome.extension.getURL(`/src/webex/pages/error.html?reportUid=${reportUid}`),
+        });
+      });
+      return;
+    case "get-report":
+      return logging.getReport(detail.reportUid);
     default:
       // Exhaustiveness check.
       // See https://www.typescriptlang.org/docs/handbook/advanced-types.html