fix: unify how we handle error

apps/console/src/app/login/render.tsx

@@ -8,8 +8,8 @@ import * as z from "zod";
 import { useToast } from "@instill-ai/design-system";
 import {
   changePasswordMutation,
-  getInstillApiErrorMessage,
   Nullable,
+  toastInstillError,
   useAuthenticatedUser,
 } from "@instill-ai/toolkit";
 import { authLoginAction } from "@instill-ai/toolkit/server";
@@ -62,21 +62,11 @@ export const LoginPageRender = () => {
         setChangePasswordIsComplete(true);
       }
     } catch (error) {
-      if (axios.isAxiosError(error)) {
-        toast({
-          title: "Something went wrong when login",
-          variant: "alert-error",
-          size: "large",
-          description: getInstillApiErrorMessage(error),
-        });
-      } else {
-        toast({
-          title: "Something went wrong when login",
-          variant: "alert-error",
-          size: "large",
-          description: "Please try again later",
-        });
-      }
+      toastInstillError({
+        title: "Something went wrong when login",
+        error,
+        toast,
+      });
     }
   }
 
@@ -98,21 +88,11 @@ export const LoginPageRender = () => {
 
       setChangePasswordIsComplete(true);
     } catch (error) {
-      if (axios.isAxiosError(error)) {
-        toast({
-          title: "Something went wrong when login",
-          variant: "alert-error",
-          size: "large",
-          description: getInstillApiErrorMessage(error),
-        });
-      } else {
-        toast({
-          title: "Something went wrong when login",
-          variant: "alert-error",
-          size: "large",
-          description: "Please try again later",
-        });
-      }
+      toastInstillError({
+        title: "Something went wrong when change password",
+        error,
+        toast,
+      });
     }
   }
 

packages/sdk/src/index.ts

@@ -2,3 +2,4 @@ export { InstillAPIClient } from "./main";
 export type * from "./core";
 export type * from "./model";
 export type * from "./vdp";
+export * from "./types";

packages/sdk/src/main/index.ts

@@ -11,7 +11,7 @@ import {
   UtilsClient,
 } from "../core";
 import { ModelClient } from "../model";
-import { GeneralRecord, HttpMethod } from "../types";
+import { GeneralRecord, HttpMethod, InstillError } from "../types";
 import {
   ComponentClient,
   PipelineClient,
@@ -89,7 +89,15 @@ export class InstillAPIClient {
         if (this.debug) {
           console.error(response);
         }
-        throw new Error(`Failed to fetch ${path}`);
+
+        if (response.status === 404) {
+          return Promise.reject(new InstillError("Not Found", 404));
+        }
+
+        const error = await response.json();
+        return Promise.reject(
+          new InstillError(error.message, response.status, error),
+        );
       }
 
       if (method === "DELETE") {

packages/sdk/src/types.ts

@@ -32,28 +32,6 @@ export const PermissionSchema = z.object({
   canTrigger: z.boolean(),
 });
 
-export type StripeSubscriptionDetail = {
-  productName: string;
-  id: string;
-  itemId: string;
-  price: number;
-  canceledAt?: number;
-  trialEnd?: number;
-  status: StripeSubscriptionStatus;
-  description: string;
-};
-
-export type StripeSubscriptionStatus =
-  | "STATUS_UNSPECIFIED"
-  | "STATUS_INCOMPLETE"
-  | "STATUS_INCOMPLETE_EXPIRED"
-  | "STATUS_TRIALING"
-  | "STATUS_ACTIVE"
-  | "STATUS_PAST_DUE"
-  | "STATUS_CANCELED"
-  | "STATUS_UNPAID"
-  | "STATUS_PAUSED";
-
 export type UserOwner = {
   user: User;
 };
@@ -180,3 +158,24 @@ export const SpecSchema = z.object({
     )
     .nullable(),
 });
+
+export class InstillError extends Error {
+  response?: InstillErrorResponse;
+  status: number;
+
+  constructor(
+    message: string,
+    status: number,
+    response?: InstillErrorResponse,
+  ) {
+    super(message);
+    this.status = status;
+    this.response = response;
+  }
+}
+
+export type InstillErrorResponse = {
+  code: number;
+  message: string;
+  details: ErrorDetails[];
+};

packages/toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instill-ai/toolkit",
-  "version": "0.97.0-rc.0",
+  "version": "0.97.0-rc.21",
   "description": "Instill AI's frontend toolkit",
   "repository": "https://github.com/instill-ai/design-system.git",
   "bugs": "https://github.com/instill-ai/design-system/issues",

packages/toolkit/src/lib/toastInstillError.ts

@@ -1,5 +1,3 @@
-import { isAxiosError } from "axios";
-
 import { UseToastReturn } from "@instill-ai/design-system";
 
 import { getInstillApiErrorMessage } from "./vdp-sdk";
@@ -13,20 +11,11 @@ export function toastInstillError({
   toast: UseToastReturn["toast"];
   error: unknown;
 }) {
-  if (isAxiosError(error)) {
-    toast({
-      title,
-      variant: "alert-error",
-      size: "large",
-      description: getInstillApiErrorMessage(error),
-      duration: 15000,
-    });
-  } else {
-    toast({
-      title,
-      variant: "alert-error",
-      size: "large",
-      duration: 15000,
-    });
-  }
+  toast({
+    title,
+    variant: "alert-error",
+    size: "large",
+    description: getInstillApiErrorMessage(error),
+    duration: 15000,
+  });
 }

packages/toolkit/src/lib/vdp-sdk/helper/getInstillApiErrorMessage.tsx

@@ -1,19 +1,30 @@
-import { AxiosError } from "axios";
+import { AxiosError, isAxiosError } from "axios";
+import { InstillError } from "instill-sdk";
 
 /* eslint-disable  @typescript-eslint/no-explicit-any */
 
-export function getInstillApiErrorMessage(error: AxiosError<any, any>) {
-  if (!error.response) {
-    return null;
-  }
+export function getInstillApiErrorMessage(
+  error: AxiosError<any, any> | unknown,
+) {
+  if (isAxiosError(error)) {
+    if (!error.response) {
+      return null;
+    }
+
+    if (!error.response.data.details && !error.response.data.message) {
+      return null;
+    }
+
+    if (error.response.data.details.length === 0) {
+      return error.response.data.message;
+    }
 
-  if (!error.response.data.details && !error.response.data.message) {
-    return null;
+    return JSON.stringify(error.response?.data.details, null, "\t");
   }
 
-  if (error.response.data.details.length === 0) {
-    return error.response.data.message;
+  if (error instanceof InstillError) {
+    return error.response?.message ?? error.message;
   }
 
-  return JSON.stringify(error.response?.data.details, null, "\t");
+  return null;
 }

packages/toolkit/src/view/model/CreateModelForm.tsx

@@ -182,8 +182,6 @@ export const CreateModelForm = () => {
 
     setCreating(true);
 
-    console.log(data);
-
     const payload: CreateUserModelPayload = {
       id: data.id,
       description: data.description,

packages/toolkit/src/view/pipeline-builder/components/dialogs/share-pipeline-dialog/TabShare.tsx

@@ -1,19 +1,18 @@
 "use client";
 
 import * as React from "react";
-import { isAxiosError } from "axios";
 import { UpdateNamespacePipelineRequest } from "instill-sdk";
 
 import { Button, Icons, Separator, useToast } from "@instill-ai/design-system";
 
 import { LoadingSpin } from "../../../../../components";
 import { NamespaceAvatarWithFallback } from "../../../../../components/NamespaceAvatarWithFallback";
 import {
-  getInstillApiErrorMessage,
   InstillStore,
   Nullable,
   OrganizationOwner,
   sendAmplitudeData,
+  toastInstillError,
   useAmplitudeCtx,
   useInstillStore,
   useNamespacePipeline,
@@ -128,21 +127,12 @@ export const TabShare = ({
         setIsUpdatingShareCodePermission(false);
       } catch (error) {
         setIsUpdatingShareCodePermission(false);
-        if (isAxiosError(error)) {
-          toast({
-            title: "Something went wrong when update pipeline permission",
-            variant: "alert-error",
-            size: "large",
-            description: getInstillApiErrorMessage(error),
-          });
-        } else {
-          toast({
-            title: "Something went wrong when update pipeline permission",
-            variant: "alert-error",
-            size: "large",
-            description: "Please try again later",
-          });
-        }
+
+        toastInstillError({
+          title: "Something went wrong when update pipeline permission",
+          error,
+          toast,
+        });
       }
     } else {
       link = `${env(

packages/toolkit/src/view/pipeline-builder/lib/hooks/useRenamePipeline.tsx

@@ -2,7 +2,6 @@
 
 import * as React from "react";
 import { useRouter } from "next/navigation";
-import { isAxiosError } from "axios";
 import {
   CreateNamespacePipelineRequest,
   RenameNamespacePipelineRequest,
@@ -12,9 +11,9 @@ import {
 import { useToast } from "@instill-ai/design-system";
 
 import {
-  getInstillApiErrorMessage,
   InstillStore,
   sendAmplitudeData,
+  toastInstillError,
   useAmplitudeCtx,
   useCreateNamespacePipeline,
   useInstillStore,
@@ -105,20 +104,11 @@ export function useRenamePipeline() {
             size: "small",
           });
         } catch (error) {
-          if (isAxiosError(error)) {
-            toast({
-              title: "Something went wrong when save the pipeline",
-              description: getInstillApiErrorMessage(error),
-              variant: "alert-error",
-              size: "large",
-            });
-          } else {
-            toast({
-              title: "Something went wrong when save the pipeline",
-              variant: "alert-error",
-              size: "large",
-            });
-          }
+          toastInstillError({
+            title: "Something went wrong when save the pipeline",
+            error,
+            toast,
+          });
 
           return Promise.reject(error);
         }
@@ -148,20 +138,12 @@ export function useRenamePipeline() {
 
           updatePipelineRecipeIsDirty(() => false);
         } catch (error) {
-          if (isAxiosError(error)) {
-            toast({
-              title: "Something went wrong when save the pipeline",
-              description: getInstillApiErrorMessage(error),
-              variant: "alert-error",
-              size: "large",
-            });
-          } else {
-            toast({
-              title: "Something went wrong when save the pipeline",
-              variant: "alert-error",
-              size: "large",
-            });
-          }
+          toastInstillError({
+            title: "Something went wrong when save the pipeline",
+            error,
+            toast,
+          });
+
           return Promise.reject(error);
         }
       }
@@ -190,22 +172,11 @@ export function useRenamePipeline() {
           () => `${routeInfo.data.namespaceName}/pipelines/${newId}`,
         );
       } catch (error) {
-        if (isAxiosError(error)) {
-          toast({
-            title: "Something went wrong when rename the pipeline",
-            description: getInstillApiErrorMessage(error),
-            variant: "alert-error",
-            size: "large",
-          });
-        } else {
-          toast({
-            title: "Something went wrong when rename the pipeline",
-            variant: "alert-error",
-            description: "Please try again later",
-            size: "large",
-          });
-        }
-
+        toastInstillError({
+          title: "Something went wrong when rename the pipeline",
+          error,
+          toast,
+        });
         return Promise.reject(error);
       }
     },