Improve client side error messages (#1247)

Author: sarah-inkeep

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/agents/[agentId]/page.tsx

@@ -29,7 +29,7 @@ async function AgentPage({
   if (!agent.success) {
     return (
       <FullPageError
-        error={new Error(agent.error)}
+        errorCode={agent.code}
         context="agent"
         link={`/${tenantId}/projects/${projectId}/agents`}
         linkText="Back to agents"

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/agents/page.tsx

@@ -8,6 +8,7 @@ import { MainContent } from '@/components/layout/main-content';
 import { PageHeader } from '@/components/layout/page-header';
 import { agentDescription } from '@/constants/page-descriptions';
 import { fetchAgents } from '@/lib/api/agent-full-client';
+import { getErrorCode } from '@/lib/utils/error-serialization';
 
 export const dynamic = 'force-dynamic';
 
@@ -38,7 +39,7 @@ async function AgentsPage({ params }: PageProps<'/[tenantId]/projects/[projectId
       </BodyTemplate>
     );
   } catch (error) {
-    return <FullPageError error={error as Error} context="agents" />;
+    return <FullPageError errorCode={getErrorCode(error)} context="agents" />;
   }
 }
 

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/api-keys/page.tsx

@@ -10,6 +10,7 @@ import { fetchAgents } from '@/lib/api/agent-full-client';
 import { fetchApiKeys } from '@/lib/api/api-keys';
 import type { Agent } from '@/lib/types/agent-full';
 import { createLookup } from '@/lib/utils';
+import { getErrorCode } from '@/lib/utils/error-serialization';
 
 export const dynamic = 'force-dynamic';
 
@@ -32,7 +33,7 @@ async function ApiKeysPage({ params }: PageProps<'/[tenantId]/projects/[projectI
       fetchAgents(tenantId, projectId),
     ]);
   } catch (error) {
-    return <FullPageError error={error as Error} context="API keys" />;
+    return <FullPageError errorCode={getErrorCode(error)} context="API keys" />;
   }
 
   const agentLookup = createLookup(agent.data);

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/artifacts/[artifactComponentId]/page.tsx

@@ -3,6 +3,7 @@ import FullPageError from '@/components/errors/full-page-error';
 import { BodyTemplate } from '@/components/layout/body-template';
 import { MainContent } from '@/components/layout/main-content';
 import { fetchArtifactComponent } from '@/lib/api/artifact-components';
+import { getErrorCode } from '@/lib/utils/error-serialization';
 
 export const dynamic = 'force-dynamic';
 
@@ -44,7 +45,7 @@ export default async function ArtifactComponentPage({
   } catch (error) {
     return (
       <FullPageError
-        error={error as Error}
+        errorCode={getErrorCode(error)}
         link={`/${tenantId}/projects/${projectId}/artifacts`}
         linkText="Back to artifacts"
         context="artifact"

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/artifacts/page.tsx

@@ -9,6 +9,7 @@ import { PageHeader } from '@/components/layout/page-header';
 import { Button } from '@/components/ui/button';
 import { artifactDescription } from '@/constants/page-descriptions';
 import { fetchArtifactComponents } from '@/lib/api/artifact-components';
+import { getErrorCode } from '@/lib/utils/error-serialization';
 
 export const dynamic = 'force-dynamic';
 
@@ -55,7 +56,7 @@ async function ArtifactComponentsPage({
       </BodyTemplate>
     );
   } catch (error) {
-    return <FullPageError error={error as Error} context="artifacts" />;
+    return <FullPageError errorCode={getErrorCode(error)} context="artifacts" />;
   }
 }
 

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/components/[dataComponentId]/page.tsx

@@ -3,6 +3,7 @@ import FullPageError from '@/components/errors/full-page-error';
 import { BodyTemplate } from '@/components/layout/body-template';
 import { MainContent } from '@/components/layout/main-content';
 import { fetchDataComponent } from '@/lib/api/data-components';
+import { getErrorCode } from '@/lib/utils/error-serialization';
 
 export const dynamic = 'force-dynamic';
 
@@ -17,7 +18,7 @@ export default async function DataComponentPage({
   } catch (error) {
     return (
       <FullPageError
-        error={error as Error}
+        errorCode={getErrorCode(error)}
         link={`/${tenantId}/projects/${projectId}/components`}
         linkText="Back to components"
         context="component"

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/components/page.tsx

@@ -9,6 +9,7 @@ import { PageHeader } from '@/components/layout/page-header';
 import { Button } from '@/components/ui/button';
 import { dataComponentDescription } from '@/constants/page-descriptions';
 import { fetchDataComponents } from '@/lib/api/data-components';
+import { getErrorCode } from '@/lib/utils/error-serialization';
 
 export const dynamic = 'force-dynamic';
 
@@ -21,7 +22,7 @@ async function DataComponentsPage({
   try {
     dataComponents = await fetchDataComponents(tenantId, projectId);
   } catch (error) {
-    return <FullPageError error={error as Error} context="components" />;
+    return <FullPageError errorCode={getErrorCode(error)} context="components" />;
   }
   return (
     <BodyTemplate breadcrumbs={[{ label: 'Components' }]}>

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/credentials/[credentialId]/page.tsx

@@ -7,6 +7,7 @@ import { BodyTemplate } from '@/components/layout/body-template';
 import { MainContent } from '@/components/layout/main-content';
 import { type Credential, fetchCredential } from '@/lib/api/credentials';
 import { getNangoConnectionMetadata } from '@/lib/mcp-tools/nango';
+import { getErrorCode } from '@/lib/utils/error-serialization';
 
 async function credentialToFormData(credential: Credential): Promise<EditCredentialFormData> {
   let connectionMetadata: Record<string, string> = {};
@@ -38,7 +39,7 @@ async function EditCredentialsPage({
   } catch (error) {
     return (
       <FullPageError
-        error={error as Error}
+        errorCode={getErrorCode(error)}
         link={`/${tenantId}/projects/${projectId}/credentials`}
         linkText="Back to credentials"
         context="credential"

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/credentials/page.tsx

@@ -9,6 +9,7 @@ import { MainContent } from '@/components/layout/main-content';
 import { PageHeader } from '@/components/layout/page-header';
 import { Button } from '@/components/ui/button';
 import { fetchCredentials } from '@/lib/api/credentials';
+import { getErrorCode } from '@/lib/utils/error-serialization';
 
 export const dynamic = 'force-dynamic';
 
@@ -24,7 +25,7 @@ async function CredentialsPage({
   try {
     credentials = await fetchCredentials(tenantId, projectId);
   } catch (error) {
-    return <FullPageError error={error as Error} context="credentials" />;
+    return <FullPageError errorCode={getErrorCode(error)} context="credentials" />;
   }
 
   return (

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/external-agents/[externalAgentId]/edit/page.tsx

@@ -6,6 +6,7 @@ import { MainContent } from '@/components/layout/main-content';
 import { type Credential, fetchCredentials } from '@/lib/api/credentials';
 import { fetchExternalAgent } from '@/lib/api/external-agents';
 import type { ExternalAgent } from '@/lib/types/external-agents';
+import { getErrorCode } from '@/lib/utils/error-serialization';
 
 async function EditExternalAgentPage({
   params,
@@ -26,10 +27,10 @@ async function EditExternalAgentPage({
     console.error('Failed to load external agent:', externalAgentResult.reason);
     return (
       <FullPageError
-        error={externalAgentResult.reason as Error}
+        errorCode={getErrorCode(externalAgentResult.reason)}
         link={`/${tenantId}/projects/${projectId}/external-agents`}
         linkText="Back to external agents"
-        context="External agent"
+        context="external agent"
       />
     );
   }