DH-5347 error handling

* added error codes to enterprise

* DH-5233 added naming enforcement for finetuning, db connection, and key

* DH-5443 removed engine error code from enterprise

* Error handling exceptions approach (#452)

* DH-5437 add error handling exceptions

---------

Co-authored-by: dishenwang2023 <[email protected]>

* DH-5443 fixed created for organizations and added org_id for engine exceptions

* DH-5443 moved exclude id to repo

* DH-5443 removed org_id from error constructor

* DH-5469 use new error response on all snackbars -- update error codes flows for payment and user

* DH-5443 removed remaining org param from exception error constructors

* DH-5347 add error response model to page api hooks -- fix build

* DH-5443 replaced all http exception

* DH-5503 add page error details

---------

Co-authored-by: Juan Valacco <[email protected]>

apps/ai/clients/admin-console/src/components/api-keys/api-keys-list.tsx

@@ -1,5 +1,4 @@
 import { getApiKeysColumns } from '@/components/api-keys/columns'
-import ApiKeysError from '@/components/api-keys/error'
 import GenerateApiKeyDialog from '@/components/api-keys/generate-api-key-dialog'
 import { DataTable } from '@/components/data-table'
 import { LoadingTable } from '@/components/data-table/loading-table'
@@ -8,6 +7,7 @@ import useApiKeys from '@/hooks/api/api-keys/useApiKeys'
 import { useDeleteApiKey } from '@/hooks/api/api-keys/useDeleteApiKey'
 import { KeyRound, RefreshCcw } from 'lucide-react'
 import { useCallback, useMemo } from 'react'
+import PageErrorMessage from '../error/page-error-message'
 
 const ApiKeysList = () => {
   const { isLoading, isValidating, error, apiKeys, mutate } = useApiKeys()
@@ -42,7 +42,13 @@ const ApiKeysList = () => {
       <LoadingTable columnLength={4} rowLength={4} className="rounded-none" />
     )
   } else if (error) {
-    pageContent = <ApiKeysError />
+    pageContent = (
+      <PageErrorMessage
+        message="Something went wrong while fetching your API keys. Please try
+        again later."
+        error={error}
+      />
+    )
   } else if (apiKeys?.length === 0) {
     pageContent = (
       <div className="text-slate-500">No API keys generated yet.</div>

apps/ai/clients/admin-console/src/components/api-keys/delete-api-key-dialog.tsx

@@ -9,6 +9,7 @@ import {
 import { Button } from '@/components/ui/button'
 import { ToastAction } from '@/components/ui/toast'
 import { toast } from '@/components/ui/use-toast'
+import { ErrorResponse } from '@/models/api'
 import { Loader, Trash2 } from 'lucide-react'
 import { FC, useState } from 'react'
 
@@ -31,10 +32,11 @@ const DeleteApiKeyDialog: FC<DeleteApiKeyDialogProps> = ({ deleteFnc }) => {
       setOpen(false)
     } catch (e) {
       console.error(e)
+      const { message: title, trace_id: description } = e as ErrorResponse
       toast({
         variant: 'destructive',
-        title: 'Oops! Something went wrong',
-        description: 'There was a problem with revoking your API Key.',
+        title,
+        description,
         action: (
           <ToastAction altText="Try again" onClick={handleDeleteConfirm}>
             Try again

apps/ai/clients/admin-console/src/components/api-keys/generate-api-key-dialog.tsx

@@ -19,6 +19,7 @@ import { Toaster } from '@/components/ui/toaster'
 import { toast } from '@/components/ui/use-toast'
 import { usePostApiKey } from '@/hooks/api/api-keys/usePostApiKey'
 import { copyToClipboard } from '@/lib/utils'
+import { ErrorResponse } from '@/models/api'
 import { yupResolver } from '@hookform/resolvers/yup'
 import { Copy, Loader, Plus } from 'lucide-react'
 import { FC, useState } from 'react'
@@ -89,12 +90,13 @@ const GenerateApiKeyDialog: FC<AddApiKeyDialogProps> = ({ onGeneratedKey }) => {
         title: 'Secret API key generated',
         description: `Your secret key was generated successfully.`,
       })
-    } catch (error) {
-      console.error(`Error generating the API key: ${error}`)
+    } catch (e) {
+      console.error(e)
+      const { message: title, trace_id: description } = e as ErrorResponse
       toast({
         variant: 'destructive',
-        title: 'Oops! Something went wrong',
-        description: 'There was a problem generating your secret key.',
+        title,
+        description,
         action: (
           <ToastAction
             altText="Try again"

apps/ai/clients/admin-console/src/components/billing/add-payment-method-dialog.tsx

@@ -11,7 +11,7 @@ import {
 import { toast } from '@/components/ui/use-toast'
 import { useAppContext } from '@/contexts/app-context'
 import { usePostPaymentMethod } from '@/hooks/api/billing/usePostPaymentMethod'
-import { PaymentMethods } from '@/models/api'
+import { ErrorResponse, PaymentMethods } from '@/models/api'
 import { CardElement, useElements } from '@stripe/react-stripe-js'
 import { Loader, Plus } from 'lucide-react'
 import { ComponentType, FC, FormEvent, useState } from 'react'
@@ -66,19 +66,20 @@ const AddPaymentMethodDialog: FC<AddPaymentMethodDialogProps> = ({
           })
           await onPaymentMethodAdded()
           reset()
-        } catch (error) {
-          console.error(error)
+        } catch (e) {
+          console.error(e)
+          const { message: title, trace_id: description } = e as ErrorResponse
           toast({
             variant: 'destructive',
-            title: 'Oops! Something went wrong',
-            description: 'The payment method could not be added.',
+            title,
+            description,
           })
         }
       }
     } catch (error) {
       toast({
         variant: 'destructive',
-        title: 'Oops! Something went wrong',
+        title: 'An error occurred',
         description:
           'The payment method could not be added due to service provider error.',
       })

apps/ai/clients/admin-console/src/components/databases/database-connection-form-dialog.tsx

@@ -20,7 +20,7 @@ import { Toaster } from '@/components/ui/toaster'
 import { toast } from '@/components/ui/use-toast'
 import usePostDatabaseConnection from '@/hooks/api/usePostDatabaseConnection'
 import { formatDriver } from '@/lib/domain/database'
-import { DatabaseConnection, Databases } from '@/models/api'
+import { DatabaseConnection, Databases, ErrorResponse } from '@/models/api'
 import { yupResolver } from '@hookform/resolvers/yup'
 import {
   AlertCircle,
@@ -99,10 +99,12 @@ const DatabaseConnectionFormDialog: FC<DatabaseConnectionFormDialogProps> = ({
       setDatabaseConnected(true)
       onConnected(undefined, false)
     } catch (e) {
+      console.error(e)
+      const { message: title, trace_id: description } = e as ErrorResponse
       toast({
         variant: 'destructive',
-        title: 'Oops! Something went wrong',
-        description: 'There was a problem connecting your Database.',
+        title,
+        description,
         action: (
           <ToastAction
             altText="Try again"

apps/ai/clients/admin-console/src/components/databases/database-details.tsx

@@ -19,7 +19,7 @@ import useSynchronizeSchemas, {
   ScanRequest,
 } from '@/hooks/api/useSynchronizeSchemas'
 import { cn } from '@/lib/utils'
-import { Databases, ETableSyncStatus } from '@/models/api'
+import { Databases, ETableSyncStatus, ErrorResponse } from '@/models/api'
 import { Loader, RefreshCw, ScanText } from 'lucide-react'
 import { FC, useState } from 'react'
 
@@ -97,10 +97,11 @@ const DatabaseDetails: FC<DatabaseDetailsProps> = ({
         await onRefresh(optimisticDatabasesUpdate)
       } catch (e) {
         console.error(e)
+        const { message: title, trace_id: description } = e as ErrorResponse
         toast({
           variant: 'destructive',
-          title: 'Oops! Something went wrong',
-          description: 'There was a problem refreshing your Databases.',
+          title,
+          description,
           action: (
             <ToastAction
               altText="Try again"
@@ -113,18 +114,18 @@ const DatabaseDetails: FC<DatabaseDetailsProps> = ({
       }
     } catch (e) {
       console.error(e)
-      onUpdateDatabasesData(databases)
+      const { message: title, trace_id: description } = e as ErrorResponse
       toast({
         variant: 'destructive',
-        title: 'Oops! Something went wrong',
-        description:
-          'There was a problem scanning your Databases table schemas.',
+        title,
+        description,
         action: (
           <ToastAction altText="Try again" onClick={handleSynchronization}>
             Try again
           </ToastAction>
         ),
       })
+      onUpdateDatabasesData(databases)
     } finally {
       setIsSynchronizing(false)
     }

apps/ai/clients/admin-console/src/components/error/error-details.tsx

@@ -0,0 +1,69 @@
+import { cn, copyToClipboard } from '@/lib/utils'
+import { ErrorResponse } from '@/models/api'
+import { Copy } from 'lucide-react'
+import { FC, HTMLAttributes } from 'react'
+import { Button } from '../ui/button'
+import { toast } from '../ui/use-toast'
+
+type ErrorDetailsProps = HTMLAttributes<HTMLDivElement> & {
+  error: ErrorResponse
+  size?: 'default' | 'small'
+  displayTitle?: boolean
+}
+
+const ErrorDetails: FC<ErrorDetailsProps> = ({
+  error,
+  displayTitle = true,
+  size = 'default',
+  className,
+  ...props
+}) => {
+  const handleCopyErrorTraceId = async () => {
+    try {
+      await copyToClipboard(error?.trace_id)
+      toast({
+        variant: 'success',
+        title: 'Error Trace ID copied!',
+      })
+    } catch (error) {
+      console.error('Could not copy text: ', error)
+      toast({
+        variant: 'destructive',
+        title: 'Could not copy the Error Trace ID',
+      })
+    }
+  }
+
+  const isSmall = size === 'small'
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col gap-2 max-w-fit',
+        isSmall ? 'text-xs' : 'text-sm',
+        className,
+      )}
+      {...props}
+    >
+      {displayTitle && <span className="font-semibold">Error details</span>}
+      <div className="flex items-center gap-2">
+        <span className="font-semibold">Trace ID:</span>
+        <span>{error.trace_id}</span>
+        <Button
+          type="button"
+          variant="icon"
+          className="p-0 h-fit text-slate-500"
+          onClick={handleCopyErrorTraceId}
+        >
+          <Copy size={isSmall ? 12 : 14} strokeWidth={2} />
+        </Button>
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="font-semibold">Description:</span>
+        <span>{error.message}</span>
+      </div>
+    </div>
+  )
+}
+
+export default ErrorDetails

apps/ai/clients/admin-console/src/components/error/page-error-message.tsx

@@ -0,0 +1,27 @@
+import { Toaster } from '@/components/ui/toaster'
+import { ErrorResponse } from '@/models/api'
+import { AlertOctagon } from 'lucide-react'
+import { FC, HTMLAttributes } from 'react'
+import ErrorDetails from './error-details'
+
+export type PageErrorMessageProps = HTMLAttributes<HTMLDivElement> & {
+  message: string
+  error?: ErrorResponse
+}
+
+const PageErrorMessage: FC<PageErrorMessageProps> = ({
+  message,
+  error,
+  ...props
+}) => (
+  <div className="flex flex-col gap-5 text-sm text-slate-500" {...props}>
+    <div className="flex items-center gap-2">
+      <AlertOctagon size={18} strokeWidth={2.5} />
+      <span className="font-semibold">{message}</span>
+    </div>
+    {error && <ErrorDetails error={error} />}
+    <Toaster />
+  </div>
+)
+
+export default PageErrorMessage

apps/ai/clients/admin-console/src/components/hoc/WithApiFetcher.tsx

@@ -0,0 +1,19 @@
+import useApiFetcher from '@/hooks/api/generics/useApiFetcher'
+import { FC, ReactNode } from 'react'
+import { SWRConfig } from 'swr'
+
+const WithApiFetcher: FC<{ children: ReactNode }> = ({ children }) => {
+  const { apiFetcher } = useApiFetcher()
+  return (
+    <SWRConfig
+      value={{
+        fetcher: apiFetcher,
+        errorRetryCount: 0,
+      }}
+    >
+      {children}
+    </SWRConfig>
+  )
+}
+
+export default WithApiFetcher

apps/ai/clients/admin-console/src/components/organization/edit-organization-dialog.tsx

@@ -21,6 +21,7 @@ import { Toaster } from '@/components/ui/toaster'
 import { toast } from '@/components/ui/use-toast'
 import { useAppContext } from '@/contexts/app-context'
 import { usePutOrganization } from '@/hooks/api/organization/usePutOrganization'
+import { ErrorResponse } from '@/models/api'
 import { yupResolver } from '@hookform/resolvers/yup'
 import { Edit, Loader } from 'lucide-react'
 import { FC, useEffect, useState } from 'react'
@@ -70,11 +71,13 @@ const EditOrganizationDialog: FC = () => {
         title: 'Organization name updated',
         description: `The organization name has been updated.`,
       })
-    } catch (error) {
+    } catch (e) {
+      console.error(e)
+      const { message: title, trace_id: description } = e as ErrorResponse
       toast({
         variant: 'destructive',
-        title: 'Oops! Something went wrong',
-        description: 'The organization name could not be updated.',
+        title,
+        description,
         action: (
           <ToastAction
             altText="Try again"