From c8bdeb8fec3fd0dd1fff841ee5c6499898a6dfe3 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Tue, 27 Feb 2024 03:48:47 +0100
Subject: [PATCH] fix(web): fetch error reporting (#7391)

---
 open-api/typescript-sdk/fetch-errors.ts | 15 ++++++++++++
 open-api/typescript-sdk/fetch.ts        |  1 +
 web/src/hooks.client.ts                 | 32 ++++++++-----------------
 web/src/lib/utils/handle-error.ts       | 27 +++++++++++++--------
 4 files changed, 43 insertions(+), 32 deletions(-)
 create mode 100644 open-api/typescript-sdk/fetch-errors.ts

diff --git a/open-api/typescript-sdk/fetch-errors.ts b/open-api/typescript-sdk/fetch-errors.ts
new file mode 100644
index 0000000000000..f21f0ed1c4290
--- /dev/null
+++ b/open-api/typescript-sdk/fetch-errors.ts
@@ -0,0 +1,15 @@
+import { HttpError } from '@oazapfts/runtime';
+
+export interface ApiExceptionResponse {
+  message: string;
+  error?: string;
+  statusCode: number;
+}
+
+export interface ApiHttpError extends HttpError {
+  data: ApiExceptionResponse;
+}
+
+export function isHttpError(error: unknown): error is ApiHttpError {
+  return error instanceof HttpError;
+}
diff --git a/open-api/typescript-sdk/fetch.ts b/open-api/typescript-sdk/fetch.ts
index 5441cd826885e..5759e66ad99aa 100644
--- a/open-api/typescript-sdk/fetch.ts
+++ b/open-api/typescript-sdk/fetch.ts
@@ -1 +1,2 @@
 export * from './fetch-client';
+export * from './fetch-errors';
diff --git a/web/src/hooks.client.ts b/web/src/hooks.client.ts
index 1e29371fa9df6..802e9a712240f 100644
--- a/web/src/hooks.client.ts
+++ b/web/src/hooks.client.ts
@@ -1,34 +1,22 @@
+import { isHttpError } from '@immich/sdk';
 import type { HandleClientError } from '@sveltejs/kit';
-import type { AxiosError, AxiosResponse } from 'axios';
 
 const LOG_PREFIX = '[hooks.client.ts]';
 const DEFAULT_MESSAGE = 'Hmm, not sure about that. Check the logs or open a ticket?';
 
 const parseError = (error: unknown) => {
-  const httpError = error as AxiosError;
-  const request = httpError?.request as Request & { path: string };
-  const response = httpError?.response as AxiosResponse<{
-    message: string;
-    statusCode: number;
-    error: string;
-  }>;
+  const httpError = isHttpError(error) ? error : undefined;
+  const statusCode = httpError?.status || httpError?.data?.statusCode || 500;
+  const message = httpError?.data?.message || (httpError?.data && String(httpError.data)) || httpError?.message;
 
-  let code = response?.data?.statusCode || response?.status || httpError.code || '500';
-  if (response) {
-    code += ` - ${response.data?.error || response.statusText}`;
-  }
-
-  if (request && response) {
-    console.log({
-      status: response.status,
-      url: `${request.method} ${request.path}`,
-      response: response.data || 'No data',
-    });
-  }
+  console.log({
+    status: statusCode,
+    response: httpError?.data || 'No data',
+  });
 
   return {
-    message: response?.data?.message || httpError?.message || DEFAULT_MESSAGE,
-    code,
+    message: message || DEFAULT_MESSAGE,
+    code: statusCode,
     stack: httpError?.stack,
   };
 };
diff --git a/web/src/lib/utils/handle-error.ts b/web/src/lib/utils/handle-error.ts
index 3337dbb475e1c..23727e4118489 100644
--- a/web/src/lib/utils/handle-error.ts
+++ b/web/src/lib/utils/handle-error.ts
@@ -1,18 +1,25 @@
-import type { HttpError } from '@sveltejs/kit';
+import { isHttpError } from '@immich/sdk';
+import { isAxiosError } from 'axios';
 import { notificationController, NotificationType } from '../components/shared-components/notification/notification';
 
 export async function getServerErrorMessage(error: unknown) {
-  let data = (error as HttpError)?.body;
-  if (data instanceof Blob) {
-    const response = await data.text();
-    try {
-      data = JSON.parse(response);
-    } catch {
-      data = { message: response };
-    }
+  if (isHttpError(error)) {
+    return error.data?.message || error.data;
   }
 
-  return data?.message || null;
+  if (isAxiosError(error)) {
+    let data = error.response?.data;
+    if (data instanceof Blob) {
+      const response = await data.text();
+      try {
+        data = JSON.parse(response);
+      } catch {
+        data = { message: response };
+      }
+    }
+
+    return data?.message;
+  }
 }
 
 export async function handleError(error: unknown, message: string) {