Merge pull request #1964 from skaut/unknown-error-detail

Printing unknown error messages

Author: marekdedic

eslint.config.js

@@ -209,6 +209,9 @@ export default tseslint.config(
         parser: tseslint.parser,
       },
     },
+    rules: {
+      "@typescript-eslint/no-confusing-void-expression": "off",
+    },
   },
   {
     files: ["tests/backend/**/*.ts"],

src/backend/move.ts

@@ -63,7 +63,17 @@ export function move(
     }
     state.destroyState();
     return { response: { errors }, status: "success" };
-  } catch (e) {
-    return { status: "error", type: "DriveAPIError" };
+  } catch (e: unknown) {
+    return {
+      detail:
+        typeof e === "object" &&
+        e !== null &&
+        "message" in e &&
+        typeof e.message === "string"
+          ? e.message
+          : undefined,
+      status: "error",
+      type: "DriveAPIError",
+    };
   }
 }

src/frontend/App.svelte

@@ -16,6 +16,7 @@
   import BackButton from "./BackButton.svelte";
   import Confirmation from "./Confirmation.svelte";
   import ContinueButton from "./ContinueButton.svelte";
+  import Details from "./Details.svelte";
   import Done from "./Done.svelte";
   import FolderSelection from "./FolderSelection.svelte";
   import Introduction from "./Introduction.svelte";
@@ -44,7 +45,8 @@
   let moving = $state(false);
   let movingComponent: Moving | undefined = $state();
   let errorDialogOpen = $state(false);
-  let errorMessage = $state("");
+  let errorDialogMessage = $state("");
+  let errorDialogDetail: string | undefined = $state(undefined);
 
   let progress = $derived(
     currentTab === "introduction"
@@ -66,8 +68,9 @@
   let destination: NamedRecord | null = $state(null);
   let errors: Array<MoveError> | null = $state(null);
 
-  function showErrorDialog(message: string): void {
-    errorMessage = message;
+  function showErrorDialog(message: string, details?: string): void {
+    errorDialogMessage = message;
+    errorDialogDetail = details;
     errorDialogOpen = true;
   }
 
@@ -77,7 +80,7 @@
       switch (response.type) {
         case "DriveAPIError":
           currentTab = "confirmation";
-          showErrorDialog(m.errorDialog_DriveAPIError());
+          showErrorDialog(m.errorDialog_DriveAPIError(), response.detail);
           break;
         case "invalidParameter":
           currentTab = "confirmation";
@@ -244,7 +247,16 @@
       {m.errorDialog_title()}
     </DialogTitle>
     <Content id="errorDialogContent">
-      {errorMessage}
+      {errorDialogMessage}
+      {#if errorDialogDetail !== undefined}
+        <br />
+        <br />
+        <Details>
+          <span>
+            {errorDialogDetail}
+          </span>
+        </Details>
+      {/if}
     </Content>
     <Actions>
       <Button>
@@ -264,6 +276,10 @@
     --mdc-theme-secondary: #ff5252; /* Red A200 */
   }
 
+  span {
+    white-space: pre-line;
+  }
+
   .tab {
     margin: 50px;
   }

src/frontend/Details.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  import Button, { Icon, Label } from "@smui/button";
+
+  interface Props {
+    children: Snippet;
+  }
+  let { children }: Props = $props();
+
+  let open = $state(false);
+</script>
+
+<Button
+  onclick={(): void => {
+    open = !open;
+  }}
+>
+  <Icon class="material-icons">
+    {#if open}
+      expand_more
+    {:else}
+      chevron_right
+    {/if}
+  </Icon>
+  <Label>Details</Label>
+</Button>
+<br />
+{#if open}
+  {@render children()}
+{/if}

src/interfaces/Response.ts

@@ -1,9 +1,10 @@
 export type Response<RawResponse, ErrorType extends string> =
   | {
-      response: RawResponse;
-      status: "success";
-    }
-  | {
+      detail?: string;
       status: "error";
       type: ErrorType;
+    }
+  | {
+      response: RawResponse;
+      status: "success";
     };

tests/backend/move.test.ts

@@ -294,10 +294,11 @@ test("move detects and reports source matching destination", () => {
 
 test("move fails gracefully on error when checking folder emptiness", () => {
   vi.mocked(folderManagement).isFolderEmpty_.mockImplementationOnce(() => {
-    throw new Error();
+    throw new Error("ERROR_DETAIL");
   });
 
   expect(move("SRC_ID", "DEST_ID", false, false, false)).toStrictEqual({
+    detail: "ERROR_DETAIL",
     status: "error",
     type: "DriveAPIError",
   });

tests/frontend/move-api-error.spec.ts

@@ -47,3 +47,55 @@ test("works with an API error", async ({ page }) => {
     page.getByText("An error occurred in Google Drive"),
   ).toBeVisible();
 });
+
+test("works with an API error with detail", async ({ page }) => {
+  await page.goto("/");
+  await setup(page);
+
+  await page.evaluate(() => {
+    window._endpointStubs.listSharedDrives = [
+      {
+        status: "success",
+        value: { response: [], status: "success" },
+      },
+      {
+        status: "success",
+        value: { response: [], status: "success" },
+      },
+    ];
+    window._endpointStubs.move = [
+      {
+        status: "success",
+        value: {
+          detail: "Error detail\nSecond line",
+          status: "error",
+          type: "DriveAPIError",
+        },
+      },
+    ];
+  });
+
+  await expect(
+    page.getByText("Shared drive mover", { exact: true }),
+  ).toBeVisible();
+  await page.getByText("Continue").click();
+  await page.getByText("My Drive").click();
+  await page.getByText("Continue").click();
+  await page.getByText("My Drive").click();
+  await page.getByText("Continue").click();
+  await expect(
+    page.getByText(
+      'contents of the folder "My Drive" into the folder "My Drive"',
+    ),
+  ).toBeVisible();
+  await page.getByText("Move", { exact: true }).click();
+  await expect(page.getByText("Confirmation", { exact: true })).toBeVisible();
+  await expect(
+    page.getByText("An error occurred", { exact: true }),
+  ).toBeVisible();
+  await expect(
+    page.getByText("An error occurred in Google Drive"),
+  ).toBeVisible();
+  await page.getByText("Details").click();
+  await expect(page.getByText("Error detail")).toBeVisible();
+});