improve non-user error messages

Author: neverRare

dist/index.html

@@ -93,7 +93,7 @@ <h1 lang="tok">ilo Token</h1>
         - <a href="https://github.com/ilo-token/ilo-token.github.io">GitHub</a>
       </p>
     </footer>
-    <dialog id="settings-box">
+    <dialog id="settings-box" class="flex">
       <h1>
         Settings
         <a
@@ -133,7 +133,7 @@ <h1>
         <button id="confirm-button">Confirm</button>
       </div>
     </dialog>
-    <dialog id="custom-dictionary-box">
+    <dialog id="custom-dictionary-box" class="flex">
       <h1>
         Custom Dictionary
         <a
@@ -155,5 +155,45 @@ <h1>
         <button id="save-button">Save and Close</button>
       </div>
     </dialog>
+    <dialog id="alert-box">
+      <p id="message"></p>
+      <button id="close-button">Close</button>
+    </dialog>
+    <dialog id="error-box">
+      <h1>An error has occurred</h1>
+      <p>
+        This is not supposed to happen. If you're using an outdated browser,
+        please consider updating it. Otherwise please consider reporting this.
+        We respect user's privacy and so we rely on user-submitted bug reports.
+        Here are the contact options:
+      </p>
+      <ul>
+        <li>
+          <a href="https://github.com/ilo-token/ilo-token.github.io/issues/new"
+          >GitHub</a>
+          (public)
+        </li>
+        <li>
+          <a
+            href="https://conlangsfrom.space/t/ilo-token-a-wip-rule-based-toki-pona-to-english-translator/452"
+          >Conlangs from Space</a>
+          (public)
+        </li>
+        <li>
+          <a
+            href="https://docs.google.com/forms/d/e/1FAIpQLSfdDEMbde9mieybZdbZr8haRzNzGsg0BVkuTIzuHaATCdcrlw/viewform?usp=sf_link"
+          >Google forms</a>
+          (private)
+        </li>
+        <li><a href="mailto:[email protected]">Email</a> (private)</li>
+      </ul>
+      <p>Please provide the following useful information:</p>
+      <ul>
+        <li>What did you do before this error occurred.</li>
+        <li>The following error message: <code id="error-code"></code></li>
+        <li>Your browser and its version (optional).</li>
+      </ul>
+      <button id="error-close-button">Close</button>
+    </dialog>
   </body>
 </html>

dist/style.css

@@ -6,6 +6,9 @@ body {
   margin: 10px;
   font-family: sans-serif, nasin-nanpa;
 }
+code {
+  font-family: monospace;
+}
 a {
   color: #0057af;
 }
@@ -42,49 +45,49 @@ dialog {
   padding: 0px;
   padding-top: 20px;
   padding-bottom: 20px;
-  flex-direction: column;
   resize: both;
 }
-dialog:modal {
+dialog.flex:modal {
   display: flex;
+  flex-direction: column;
 }
 #custom-dictionary-box {
   box-sizing: border-box;
   height: 100%;
 }
-dialog details {
+dialog.flex details {
   margin: 0;
   padding: 0;
   flex-direction: column;
   resize: both;
   display: flex;
 }
-dialog label,
-dialog summary,
-dialog > h1 {
+dialog.flex label,
+dialog.flex summary,
+dialog.flex > h1 {
   padding: 10px;
   margin: 0;
 }
-dialog > label[for] {
+dialog.flex > label[for] {
   padding-bottom: 5px;
 }
-dialog > select {
+dialog.flex > select {
   margin: 10px;
   margin-top: 0px;
 }
-dialog > textarea {
+dialog.flex > textarea {
   font-family: monospace;
   margin: 10px;
   resize: none;
   overflow: auto;
   flex-grow: 1;
 }
-dialog > div {
+dialog.flex > div {
   margin: 10px;
   display: flex;
 }
-dialog > div > div,
-dialog > div > input[type="text"] {
+dialog.flex > div > div,
+dialog.flex > div > input[type="text"] {
   flex-grow: 1;
 }
 @media (min-width: 800px) {

src/array_result.ts

@@ -169,7 +169,3 @@ export function extractArrayResultError(
       throw new AggregateError(aggregate.errors);
   }
 }
-export function isArrayResult(errors: ReadonlyArray<unknown>): boolean {
-  return errors.length > 0 &&
-    errors.every((error) => error instanceof ArrayResultError);
-}

src/dictionary.ts

@@ -2,6 +2,7 @@ import { dictionary as globalDictionary } from "../dictionary/dictionary.ts";
 import { dictionaryParser } from "../dictionary/parser.ts";
 import { Definition, Dictionary } from "../dictionary/type.ts";
 import { load } from "../telo_misikeke/telo_misikeke.js";
+import { ArrayResultError } from "./array_result.ts";
 
 // All of these global constants are mutable
 
@@ -17,13 +18,20 @@ export const tokiPonaWordSet: Set<string> = new Set();
 
 update();
 
-export function loadCustomDictionary(dictionaryText: string): void {
-  const dictionary = dictionaryParser.parse(dictionaryText).unwrap()[0];
+export function loadCustomDictionary(
+  dictionaryText: string,
+): null | ReadonlyArray<ArrayResultError> {
+  const result = dictionaryParser.parse(dictionaryText);
+  if (result.isError()) {
+    return result.errors;
+  }
+  const dictionary = result.array[0];
   customDictionary.clear();
   for (const [key, value] of dictionary) {
     customDictionary.set(key, value);
   }
   update();
+  return null;
 }
 function update(): void {
   dictionary.clear();

src/main.ts

@@ -9,9 +9,7 @@ if (LIVE_RELOAD) {
     .addEventListener("change", () => location.reload());
 }
 import { dictionary } from "../dictionary/dictionary.ts";
-import { flattenError } from "../misc/misc.ts";
 import PROJECT_DATA from "../project_data.json" with { type: "json" };
-import { ArrayResultError, isArrayResult } from "./array_result.ts";
 import { loadCustomDictionary } from "./dictionary.ts";
 import { checkLocalStorage, setIgnoreError } from "./local_storage.ts";
 import { translate } from "./mod.ts";
@@ -46,19 +44,15 @@ custom dictionary comes with
 limitations. Press Help above to get
 started.`;
 
-const DICTIONARY_LOADING_FAILED_FIXABLE_MESSAGE =
+const DICTIONARY_LOADING_FAILED_MESSAGE =
   "Failed to load custom dictionary. This is mostly likely because the " +
   "syntax has been updated and your custom dictionary still uses the old " +
   "syntax. Please fix it. Apologies for the inconvenience.";
-const DICTIONARY_LOADING_FAILED_UNFIXABLE_MESSAGE =
-  "Failed to load custom dictionary. Please report this.";
-const WORD_NOT_FOUND_MESSAGE = "Error: Word not found.";
-const INVALID_WORD_ERROR =
-  "Error: Invalid word to add (You may remove this line).";
-const DICTIONARY_ERROR_FIXABLE_MESSAGE =
+const NO_WORD_MESSAGE = "Please provide a word";
+const WORD_NOT_FOUND_MESSAGE = "Word not found";
+
+const DICTIONARY_ERROR_MESSAGE =
   "Please fix these errors before saving.\n(You may remove these when fixed)";
-const DICTIONARY_ERROR_UNFIXABLE_MESSAGE =
-  "Unable to save dictionary due to error. Please report this.";
 
 // never change this
 const DICTIONARY_KEY = "dictionary";
@@ -119,10 +113,34 @@ function main(): void {
     "save-button",
   ) as HTMLButtonElement;
 
+  const alertBox = document.getElementById("alert-box") as HTMLDialogElement;
+  const message = document.getElementById("message") as HTMLParagraphElement;
+  const closeButton = document.getElementById(
+    "close-button",
+  ) as HTMLButtonElement;
+
+  const errorBox = document.getElementById("error-box") as HTMLDialogElement;
+  const errorCode = document.getElementById("error-code") as HTMLElement;
+  const errorCloseButton = document.getElementById(
+    "error-close-button",
+  ) as HTMLButtonElement;
+
   const versionDisplay = document.getElementById(
     "version",
   ) as HTMLAnchorElement;
 
+  // emulates `window.alert`
+  function showMessage(useMessage: string): void {
+    message.innerText = useMessage;
+    alertBox.showModal();
+  }
+
+  // handle error
+  addEventListener("error", (event) => {
+    errorCode.innerText = event.message;
+    errorBox.showModal();
+  });
+
   // set version
   const displayDate = PROJECT_DATA.onDevelopment
     ? "(on development)"
@@ -138,14 +156,8 @@ function main(): void {
     ? localStorage.getItem(DICTIONARY_KEY) ?? ""
     : customDictionaryTextBox.value;
   if (customDictionary.trim() !== "") {
-    try {
-      loadCustomDictionary(customDictionary);
-    } catch (error) {
-      errorDisplay.innerText = isArrayResult(flattenError(error))
-        ? DICTIONARY_LOADING_FAILED_FIXABLE_MESSAGE
-        : DICTIONARY_LOADING_FAILED_UNFIXABLE_MESSAGE;
-      // deno-lint-ignore no-console
-      console.error(error);
+    if (loadCustomDictionary(customDictionary) != null) {
+      showMessage(DICTIONARY_LOADING_FAILED_MESSAGE);
     }
   }
 
@@ -180,14 +192,15 @@ function main(): void {
     outputList.innerHTML = "";
     errorList.innerHTML = "";
     errorDisplay.innerText = "";
-    try {
-      for (const translation of translate(inputTextBox.value)) {
+    const result = translate(inputTextBox.value);
+    if (!result.isError()) {
+      for (const translation of result.array) {
         const list = document.createElement("li");
         list.innerHTML = translation;
         outputList.appendChild(list);
       }
-    } catch (error) {
-      const errors = flattenError(error);
+    } else {
+      const errors = result.errors;
       switch (errors.length) {
         case 0:
           errorDisplay.innerText = UNKNOWN_ERROR_MESSAGE;
@@ -200,15 +213,11 @@ function main(): void {
           break;
       }
       for (const item of errors) {
-        const property = item instanceof ArrayResultError && item.isHtml
-          ? "innerHTML"
-          : "innerText";
+        const property = item.isHtml ? "innerHTML" : "innerText";
         const list = document.createElement("li");
-        list[property] = extractErrorMessage(item);
+        list[property] = item.message;
         errorList.appendChild(list);
       }
-      // deno-lint-ignore no-console
-      console.error(error);
     }
   }
   settingsButton.addEventListener("click", () => {
@@ -249,39 +258,40 @@ function main(): void {
   }
   function importWord(): void {
     const word = importWordTextBox.value.trim();
-    if (/^[a-z][a-zA-Z]*$/.test(word)) {
+    if (word === "") {
+      showMessage(NO_WORD_MESSAGE);
+    } else {
       const definitions = dictionary.get(word)?.source;
       if (definitions != null) {
         displayToCustomDictionary(`${word}:${definitions}`);
       } else {
-        displayToCustomDictionary(asComment(WORD_NOT_FOUND_MESSAGE));
+        showMessage(WORD_NOT_FOUND_MESSAGE);
       }
-    } else {
-      displayToCustomDictionary(asComment(INVALID_WORD_ERROR));
     }
   }
   discardButton.addEventListener("click", () => {
     customDictionaryDialogBox.close();
   });
   saveButton.addEventListener("click", () => {
     const { value } = customDictionaryTextBox;
-    try {
-      loadCustomDictionary(value);
+    const errors = loadCustomDictionary(value);
+    if (errors == null) {
       setIgnoreError(DICTIONARY_KEY, value);
       customDictionaryDialogBox.close();
-    } catch (error) {
-      const errors = flattenError(error);
-      const message = isArrayResult(errors)
-        ? DICTIONARY_ERROR_FIXABLE_MESSAGE
-        : DICTIONARY_ERROR_UNFIXABLE_MESSAGE;
+    } else {
       const errorListMessage = errors
-        .map(extractErrorMessage)
-        .map((message) => `\n- ${message.replaceAll(/\r?\n/g, "$&  ")}`);
-      displayToCustomDictionary(asComment(`${message}${errorListMessage}`));
-      // deno-lint-ignore no-console
-      console.error(error);
+        .map((error) => `\n- ${error.message.replaceAll(/\r?\n/g, "$&  ")}`);
+      displayToCustomDictionary(
+        asComment(`${DICTIONARY_ERROR_MESSAGE}${errorListMessage}`),
+      );
     }
   });
+  closeButton.addEventListener("click", () => {
+    alertBox.close();
+  });
+  errorCloseButton.addEventListener("click", () => {
+    errorBox.close();
+  });
   addEventListener("beforeunload", (event) => {
     if (customDictionaryDialogBox.open) {
       event.preventDefault();
@@ -301,13 +311,6 @@ const unused = [...new Array(localStorage.length).keys()]
 for (const key of unused) {
   localStorage.removeItem(key);
 }
-function extractErrorMessage(error: unknown): string {
-  if (error instanceof Error) {
-    return error.message;
-  } else {
-    return `${error}`;
-  }
-}
 export function asComment(text: string): string {
   return text
     .replaceAll(/^/mg, "# ")