1 files changed, 80 insertions, 17 deletions

diff --git a/src/webex/pages/error.tsx b/src/webex/pages/error.tsx
index e86b6cf4c..2edef5e5b 100644
--- a/src/webex/pages/error.tsx
+++ b/src/webex/pages/error.tsx
@@ -22,40 +22,103 @@
  * @author Florian Dold
  */
 
+
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import URI = require("urijs");
 
+import * as wxApi from "../wxApi";
+
+import { Collapsible } from "../renderHtml";
+
 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 id="main">
+          <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>
+      );
+    }
+    try {
+      switch (report.name) {
+        case "pay-post-failed": {
+          const summary = report.contractTerms.summary || report.contractTerms.order_id;
+          return (
+            <div id="main">
+              <h1>Failed to send payment</h1>
+              <p>Failed to send payment for <strong>{summary}</strong> to merchant <strong>{report.contractTerms.merchant.name}</strong>.</p>
+              <p>You can <a href={report.contractTerms.fulfillment_url}>retry</a> the payment.  If this problem persists,
+                please contact the mechant with the error details below.</p>
+              <Collapsible initiallyCollapsed={true} title="Error Details">
+                <pre>
+                  {JSON.stringify(report, null, " ")}
+                </pre>
+              </Collapsible>
+            </div>
+          );
+        }
+        default:
+          return (
+            <div id="main">
+              <h1>Unknown Error</h1>
+              The GNU Taler wallet reported an unknown error.  Here are the details:
+              <pre>
+                {JSON.stringify(report, null, " ")}
+              </pre>
+            </div>
+          );
+      }
+    } catch (e) {
+        return (
+          <div id="main">
+            <h1>Error</h1>
+            The GNU Taler wallet reported an error.  Here are the details:
+            <pre>
+              {JSON.stringify(report, null, " ")}
+            </pre>
+            A detailed error report could not be generated:
+            <pre>
+              {e.toString()}
+            </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());