feat: generate pretty error message

Dup4 · Jun 2, 2022 · 74b720e · 74b720e
1 parent e36de45
commit 74b720e
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 20 deletions.
diff --git a/packages/mathjax-render/src/browser/Tex2SVG.ts b/packages/mathjax-render/src/browser/Tex2SVG.ts
@@ -6,6 +6,7 @@ import { HTMLHandler } from "mathjax-full/js/handlers/html/HTMLHandler";
 import { SafeHandler } from "mathjax-full/js/ui/safe/SafeHandler";
 
 import { AllPackages } from "../AllPackages";
+import { GenerateErrorMessage, GetErrorMessage } from "../utils";
 
 mathjax.handlers.register(SafeHandler(new HTMLHandler(browserAdaptor())));
 
@@ -32,20 +33,23 @@ export function Tex2SVG(math: string, display: boolean) {
     defsElement.parentNode.insertBefore(title, defsElement);
 
     return wrapper;
-  } catch (e) {
+  } catch (e: unknown) {
     console.log(e);
 
     const wrapper = document.createElement("mjx-container");
     wrapper.className = "MathJax";
     wrapper.setAttribute("jax", "SVG");
-    if (display) wrapper.setAttribute("display", "true");
+    if (display) {
+      wrapper.setAttribute("display", "true");
+    }
 
     const message = document.createElement("span");
-    message.innerText = `Failed to render math, ${String(e)}`;
+    message.innerText = GenerateErrorMessage(math, display, GetErrorMessage(e));
     message.style.fontWeight = "bold";
     message.style.display = "inline-block";
-    message.style.border = "2px solid var(--theme-foreground)";
+    message.style.border = "2px solid #000";
     message.style.padding = "0 4px";
+    message.style.textAlign = "left";
 
     wrapper.appendChild(message);
     return wrapper;

diff --git a/packages/mathjax-render/src/node/Tex2SVG.ts b/packages/mathjax-render/src/node/Tex2SVG.ts
@@ -14,9 +14,7 @@ import { RegisterHTMLHandler } from "mathjax-full/js/handlers/html.js";
 // official AllPackages are not comprehensive enough
 // import { AllPackages } from "mathjax-full/ts/input/tex/AllPackages";
 import { AllPackages } from "../AllPackages";
-
-import util from "util";
-import { FormatErrorMessage } from "../utils";
+import { GenerateErrorMessage, GetErrorMessage } from "../utils";
 
 // const adaptor = liteAdaptor();
 const adaptor = jsdomAdaptor(JSDOM);
@@ -46,13 +44,11 @@ function tex2SVG(mathContent: string, display: boolean) {
 export function Tex2SVG(mathContent: string, display: boolean) {
   try {
     return tex2SVG(mathContent, display);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  } catch (e: any) {
-    const errorMessage =
-      `Failed to render ${display ? "display" : "inline"} math: ` +
-      util.inspect(mathContent) +
-      "\n" +
-      e.toString();
-    return FormatErrorMessage(errorMessage);
+  } catch (e: unknown) {
+    return (
+      '<span class="mathjax-render-error-message">' +
+      GenerateErrorMessage(mathContent, display, GetErrorMessage(e)) +
+      "</span>"
+    );
   }
 }
diff --git a/packages/mathjax-render/src/utils.ts b/packages/mathjax-render/src/utils.ts
@@ -1,9 +1,29 @@
 import EscapeHTML from "escape-html";
+import util from "util";
 
-export function FormatErrorMessage(message: string): string {
-  const htmlContext = EscapeHTML(message.trim()).split("\n").join("<br>");
+export function GetErrorMessage(e: unknown) {
+  let errMessage = "";
 
-  return (
-    '<span class="mathjax-render-error-message">' + htmlContext + "</span>"
-  );
+  if (e instanceof Error) {
+    errMessage = e.message;
+  } else {
+    errMessage = String(e);
+  }
+
+  return errMessage;
+}
+
+export function GenerateErrorMessage(
+  mathContent: string,
+  display: boolean,
+  errMessage: string,
+): string {
+  const errorMessage =
+    `Failed to render ${display ? "display" : "inline"} math: ` +
+    util.inspect(mathContent) +
+    "\n" +
+    errMessage;
+
+  const htmlContext = EscapeHTML(errorMessage.trim()).split("\n").join("<br>");
+  return htmlContext;
 }