fix(web): fetch error reporting (#7391)

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;
+}

open-api/typescript-sdk/fetch.ts

@@ -1 +1,2 @@
 export * from './fetch-client';
+export * from './fetch-errors';

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 httpError = isHttpError(error) ? error : undefined;
-  const request = httpError?.request as Request & { path: string };
+  const statusCode = httpError?.status || httpError?.data?.statusCode || 500;
-  const response = httpError?.response as AxiosResponse<{
+  const message = httpError?.data?.message || (httpError?.data && String(httpError.data)) || httpError?.message;
-    message: string;
-    statusCode: number;
-    error: string;
-  }>;
 
-  let code = response?.data?.statusCode || response?.status || httpError.code || '500';
+  console.log({
-  if (response) {
+    status: statusCode,
-    code += ` - ${response.data?.error || response.statusText}`;
+    response: httpError?.data || 'No data',
-  }
+  });
-
-  if (request && response) {
-    console.log({
-      status: response.status,
-      url: `${request.method} ${request.path}`,
-      response: response.data || 'No data',
-    });
-  }
 
   return {
-    message: response?.data?.message || httpError?.message || DEFAULT_MESSAGE,
+    message: message || DEFAULT_MESSAGE,
-    code,
+    code: statusCode,
     stack: httpError?.stack,
   };
 };

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 (isHttpError(error)) {
-  if (data instanceof Blob) {
+    return error.data?.message || error.data;
-    const response = await data.text();
-    try {
-      data = JSON.parse(response);
-    } catch {
-      data = { message: response };
-    }
   }
 
-  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) {