Add a helper method for infallible API requests

Author: dtdesign

ts/WoltLabSuite/Core/Api/Messages/MentionSuggestions.ts

@@ -9,7 +9,7 @@
  */
 
 import { prepareRequest } from "WoltLabSuite/Core/Ajax/Backend";
-import { ApiResult, apiResultFromError, apiResultFromValue } from "../Result";
+import { fromInfallibleApiRequest } from "../Result";
 
 type Item =
   | {
@@ -25,16 +25,11 @@ type Item =
     };
 type Response = Item[];
 
-export async function mentionSuggestions(query: string): Promise<ApiResult<Response>> {
+export async function mentionSuggestions(query: string): Promise<Response> {
   const url = new URL(window.WSC_RPC_API_URL + "core/messages/mention-suggestions");
   url.searchParams.set("query", query);
 
-  let response: Response;
-  try {
-    response = (await prepareRequest(url).get().allowCaching().disableLoadingIndicator().fetchAsJson()) as Response;
-  } catch (e) {
-    return apiResultFromError(e);
-  }
-
-  return apiResultFromValue(response);
+  return fromInfallibleApiRequest<Response>(() => {
+    return prepareRequest(url).get().allowCaching().disableLoadingIndicator().fetchAsJson();
+  });
 }

ts/WoltLabSuite/Core/Api/Messages/RenderQuote.ts

@@ -9,7 +9,7 @@
  */
 
 import { prepareRequest } from "WoltLabSuite/Core/Ajax/Backend";
-import { ApiResult, apiResultFromError, apiResultFromValue } from "../Result";
+import { fromInfallibleApiRequest } from "../Result";
 
 type Response = {
   objectID: number;
@@ -20,22 +20,13 @@ type Response = {
   rawMessage: string | null;
 };
 
-export async function renderQuote(
-  objectType: string,
-  objectID: number,
-  isFullQuote: boolean,
-): Promise<ApiResult<Response>> {
+export async function renderQuote(objectType: string, objectID: number, isFullQuote: boolean): Promise<Response> {
   const url = new URL(window.WSC_RPC_API_URL + "core/messages/render-quote");
   url.searchParams.set("objectType", objectType);
   url.searchParams.set("isFullQuote", String(isFullQuote));
   url.searchParams.set("objectID", objectID.toString());
 
-  let response: Response;
-  try {
-    response = (await prepareRequest(url).get().fetchAsJson()) as Response;
-  } catch (e) {
-    return apiResultFromError(e);
-  }
-
-  return apiResultFromValue(response);
+  return fromInfallibleApiRequest(() => {
+    return prepareRequest(url).get().fetchAsJson();
+  });
 }

ts/WoltLabSuite/Core/Api/Result.ts

@@ -10,7 +10,10 @@
  */
 
 import { StatusNotOk } from "../Ajax/Error";
+import { dialogFactory } from "../Component/Dialog";
 import { isPlainObject } from "../Core";
+import { getPhrase } from "../Language";
+import { escapeHTML } from "../StringUtil";
 import { ApiError } from "./Error";
 
 export type ApiResult<T> =
@@ -58,7 +61,7 @@ export async function apiResultFromStatusNotOk(e: StatusNotOk): Promise<ApiResul
 
   let json: unknown;
   try {
-    json = await response.json();
+    json = await response.clone().json();
   } catch {
     throw e;
   }
@@ -77,10 +80,55 @@ export async function apiResultFromStatusNotOk(e: StatusNotOk): Promise<ApiResul
       ok: false,
       error: apiError,
       unwrap() {
+        showErrorDialog(apiError);
+
         throw new Error("Trying to unwrap an erroneous result.", { cause: apiError });
       },
     };
   }
 
   throw e;
 }
+
+/**
+ * Helper method for API requests that are expected to never fail. Infallible
+ * requests are those that should only fail if there is an unexpected server
+ * error or if the request was the result of a bug in the client.
+ */
+export async function fromInfallibleApiRequest<T = unknown>(request: () => Promise<unknown>): Promise<T> {
+  try {
+    return (await request()) as T;
+  } catch (e) {
+    const error = await apiResultFromError(e);
+    return error.unwrap();
+  }
+}
+
+function showErrorDialog(apiError: ApiError): void {
+  const code = escapeHTML(apiError.code);
+  const type = escapeHTML(apiError.type);
+  const message = apiError.message ? escapeHTML(apiError.message) : "(not set)";
+  const param = apiError.param ? "<kbd>" + escapeHTML(apiError.param) + "</kbd>" : "(not set)";
+
+  const html = `
+    <dl>
+      <dt>Unexpected server error</dt>
+      <dd><kbd>${type}</kbd></dd>
+    </dl>
+    <dl>
+      <dt>Error code</dt>
+      <dd><kbd>${code}</kbd></dd>
+    </dl>
+    <dl>
+      <dt>Parameter</dt>
+      <dd>${param}</dd>
+    </dl>
+    <dl>
+      <dt>Message</dt>
+      <dd>${message}</dd>
+    </dl>
+  `;
+
+  const dialog = dialogFactory().fromHtml(html).asAlert();
+  dialog.show(getPhrase("wcf.global.error.title"));
+}

ts/WoltLabSuite/Core/Component/Ckeditor/Mention.ts

@@ -25,7 +25,7 @@ async function getPossibleMentions(query: string): Promise<Mention[]> {
     return [];
   }
 
-  return (await mentionSuggestions(query)).unwrap().map((item) => {
+  return (await mentionSuggestions(query)).map((item) => {
     if (item.type === "user") {
       return {
         id: `@${item.username}`,

ts/WoltLabSuite/Core/Component/Quote/Storage.ts

@@ -60,12 +60,7 @@ export async function saveQuote(
       .dispatch()) as LegacyQuoteData;
     quote = result.renderedQuote;
   } else {
-    const result = await renderQuote(objectType, objectId, false);
-    if (!result.ok) {
-      throw new Error("Error fetching quote data");
-    }
-
-    quote = result.value;
+    quote = await renderQuote(objectType, objectId, false);
   }
 
   const uuid = storeQuote(objectType, quote, {
@@ -94,12 +89,7 @@ export async function saveFullQuote(
     const result = (await dboAction("saveFullQuote", className).objectIds([objectId]).dispatch()) as LegacyQuoteData;
     message = result.renderedQuote;
   } else {
-    const result = await renderQuote(objectType, objectId, true);
-    if (!result.ok) {
-      throw new Error("Error fetching quote data");
-    }
-
-    message = result.value;
+    message = await renderQuote(objectType, objectId, true);
   }
 
   const uuid = storeQuote(objectType, message, message);