@inkeep/agents-manage-ui 0.22.8 → 0.22.9

package/src/app/[tenantId]/projects/[projectId]/agents/page.tsx

@@ -1,4 +1,5 @@
 import { AgentList } from '@/components/agents/agents-list';
+import FullPageError from '@/components/errors/full-page-error';
 import { AgentsIcon } from '@/components/icons/empty-state/agents';
 import { BodyTemplate } from '@/components/layout/body-template';
 import EmptyState from '@/components/layout/empty-state';
@@ -6,7 +7,6 @@ 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 type { Agent } from '@/lib/types/agent-full';
 
 export const dynamic = 'force-dynamic';
 
@@ -16,22 +16,22 @@ interface AgentsPageProps {
 
 async function AgentsPage({ params }: AgentsPageProps) {
   const { tenantId, projectId } = await params;
-  let agent: { data: Agent[] } = { data: [] };
+
+  let agents: Awaited<ReturnType<typeof fetchAgents>>;
   try {
-    const response = await fetchAgents(tenantId, projectId);
-    agent = response;
-  } catch (_error) {
-    throw new Error('Failed to fetch agent');
+    agents = await fetchAgents(tenantId, projectId);
+  } catch (error) {
+    return <FullPageError error={error as Error} context="agents" />;
   }
   return (
     <BodyTemplate
       breadcrumbs={[{ label: 'Agent', href: `/${tenantId}/projects/${projectId}/agents` }]}
     >
       <MainContent className="min-h-full">
-        {agent.data.length > 0 ? (
+        {agents.data.length > 0 ? (
           <>
             <PageHeader title="Agent" description={agentDescription} />
-            <AgentList tenantId={tenantId} projectId={projectId} agent={agent.data} />
+            <AgentList tenantId={tenantId} projectId={projectId} agent={agents.data} />
           </>
         ) : (
           <EmptyState

package/src/app/[tenantId]/projects/[projectId]/api-keys/page.tsx

@@ -1,12 +1,13 @@
 import { ApiKeysTable } from '@/components/api-keys/api-keys-table';
 import { NewApiKeyDialog } from '@/components/api-keys/new-api-key-dialog';
+import FullPageError from '@/components/errors/full-page-error';
 import type { SelectOption } from '@/components/form/generic-select';
 import { BodyTemplate } from '@/components/layout/body-template';
 import { MainContent } from '@/components/layout/main-content';
 import { PageHeader } from '@/components/layout/page-header';
 import { apiKeyDescription } from '@/constants/page-descriptions';
-import { fetchApiKeys } from '@/lib/api/api-keys';
 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';
 
@@ -25,10 +26,18 @@ interface ApiKeysPageProps {
 
 async function ApiKeysPage({ params }: ApiKeysPageProps) {
   const { tenantId, projectId } = await params;
-  const [apiKeys, agent] = await Promise.all([
-    fetchApiKeys(tenantId, projectId),
-    fetchAgents(tenantId, projectId),
-  ]);
+
+  let apiKeys: Awaited<ReturnType<typeof fetchApiKeys>>;
+  let agent: Awaited<ReturnType<typeof fetchAgents>>;
+
+  try {
+    [apiKeys, agent] = await Promise.all([
+      fetchApiKeys(tenantId, projectId),
+      fetchAgents(tenantId, projectId),
+    ]);
+  } catch (error) {
+    return <FullPageError error={error as Error} context="API keys" />;
+  }
 
   const agentLookup = createLookup(agent.data);
   const agentOptions = createAgentOptions(agent.data);

package/src/app/[tenantId]/projects/[projectId]/artifacts/[artifactComponentId]/page.tsx

@@ -1,4 +1,5 @@
 import { ArtifactComponentForm } from '@/components/artifact-components/form/artifact-component-form';
+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';
@@ -15,7 +16,21 @@ interface ArtifactComponentPageProps {
 
 export default async function ArtifactComponentPage({ params }: ArtifactComponentPageProps) {
   const { artifactComponentId, tenantId, projectId } = await params;
-  const artifactComponent = await fetchArtifactComponent(tenantId, projectId, artifactComponentId);
+
+  let artifactComponent: Awaited<ReturnType<typeof fetchArtifactComponent>>;
+  try {
+    artifactComponent = await fetchArtifactComponent(tenantId, projectId, artifactComponentId);
+  } catch (error) {
+    return (
+      <FullPageError
+        error={error as Error}
+        link={`/${tenantId}/projects/${projectId}/artifacts`}
+        linkText="Back to artifacts"
+        context="artifact"
+      />
+    );
+  }
+
   const { name, description, props } = artifactComponent;
   return (
     <BodyTemplate

package/src/app/[tenantId]/projects/[projectId]/artifacts/page.tsx

@@ -1,13 +1,14 @@
 import { Plus } from 'lucide-react';
 import Link from 'next/link';
 import { ArtifactComponentsList } from '@/components/artifact-components/artifact-component-list';
+import FullPageError from '@/components/errors/full-page-error';
 import { BodyTemplate } from '@/components/layout/body-template';
 import EmptyState from '@/components/layout/empty-state';
 import { MainContent } from '@/components/layout/main-content';
 import { PageHeader } from '@/components/layout/page-header';
 import { Button } from '@/components/ui/button';
 import { artifactDescription } from '@/constants/page-descriptions';
-import { type ArtifactComponent, fetchArtifactComponents } from '@/lib/api/artifact-components';
+import { fetchArtifactComponents } from '@/lib/api/artifact-components';
 
 export const dynamic = 'force-dynamic';
 
@@ -17,12 +18,12 @@ interface ArtifactComponentsPageProps {
 
 async function ArtifactComponentsPage({ params }: ArtifactComponentsPageProps) {
   const { tenantId, projectId } = await params;
-  let artifacts: { data: ArtifactComponent[] } = { data: [] };
+
+  let artifacts: Awaited<ReturnType<typeof fetchArtifactComponents>>;
   try {
-    const response = await fetchArtifactComponents(tenantId, projectId);
-    artifacts = response;
-  } catch (_error) {
-    throw new Error('Failed to fetch artifacts.');
+    artifacts = await fetchArtifactComponents(tenantId, projectId);
+  } catch (error) {
+    return <FullPageError error={error as Error} context="artifacts" />;
   }
   return (
     <BodyTemplate

package/src/app/[tenantId]/projects/[projectId]/components/[dataComponentId]/page.tsx

@@ -1,4 +1,5 @@
 import { DataComponentForm } from '@/components/data-components/form/data-component-form';
+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';
@@ -15,7 +16,21 @@ interface DataComponentPageProps {
 
 export default async function DataComponentPage({ params }: DataComponentPageProps) {
   const { tenantId, projectId, dataComponentId } = await params;
-  const dataComponent = await fetchDataComponent(tenantId, projectId, dataComponentId);
+
+  let dataComponent: Awaited<ReturnType<typeof fetchDataComponent>>;
+  try {
+    dataComponent = await fetchDataComponent(tenantId, projectId, dataComponentId);
+  } catch (error) {
+    return (
+      <FullPageError
+        error={error as Error}
+        link={`/${tenantId}/projects/${projectId}/components`}
+        linkText="Back to components"
+        context="component"
+      />
+    );
+  }
+
   const { name, description, props } = dataComponent;
   return (
     <BodyTemplate

package/src/app/[tenantId]/projects/[projectId]/components/page.tsx

@@ -1,13 +1,14 @@
 import { Plus } from 'lucide-react';
 import Link from 'next/link';
 import { DataComponentsList } from '@/components/data-components/data-components-list';
+import FullPageError from '@/components/errors/full-page-error';
 import { BodyTemplate } from '@/components/layout/body-template';
 import EmptyState from '@/components/layout/empty-state';
 import { MainContent } from '@/components/layout/main-content';
 import { PageHeader } from '@/components/layout/page-header';
 import { Button } from '@/components/ui/button';
 import { dataComponentDescription } from '@/constants/page-descriptions';
-import { type DataComponent, fetchDataComponents } from '@/lib/api/data-components';
+import { fetchDataComponents } from '@/lib/api/data-components';
 
 export const dynamic = 'force-dynamic';
 
@@ -17,12 +18,12 @@ interface DataComponentsPageProps {
 
 async function DataComponentsPage({ params }: DataComponentsPageProps) {
   const { tenantId, projectId } = await params;
-  let dataComponents: { data: DataComponent[] } = { data: [] };
+
+  let dataComponents: Awaited<ReturnType<typeof fetchDataComponents>>;
   try {
-    const response = await fetchDataComponents(tenantId, projectId);
-    dataComponents = response;
-  } catch (_error) {
-    throw new Error('Failed to fetch components');
+    dataComponents = await fetchDataComponents(tenantId, projectId);
+  } catch (error) {
+    return <FullPageError error={error as Error} context="components" />;
   }
   return (
     <BodyTemplate breadcrumbs={[{ label: 'Components' }]}>

package/src/app/[tenantId]/projects/[projectId]/credentials/[credentialId]/page.tsx

@@ -1,8 +1,8 @@
-import { notFound } from 'next/navigation';
 import {
   EditCredentialForm,
   type EditCredentialFormData,
 } from '@/components/credentials/views/edit-credential-form';
+import FullPageError from '@/components/errors/full-page-error';
 import { BodyTemplate } from '@/components/layout/body-template';
 import { MainContent } from '@/components/layout/main-content';
 import { type Credential, fetchCredential } from '@/lib/api/credentials';
@@ -35,37 +35,45 @@ async function EditCredentialsPage({
 }) {
   const { tenantId, projectId, credentialId } = await params;
 
-  try {
-    // Fetch credential data on the server
-    const credential = await fetchCredential(tenantId, projectId, credentialId);
-    const initialFormData = await credentialToFormData(credential);
+  let credential: Credential;
+  let initialFormData: EditCredentialFormData;
 
+  try {
+    credential = await fetchCredential(tenantId, projectId, credentialId);
+    initialFormData = await credentialToFormData(credential);
+  } catch (error) {
     return (
-      <BodyTemplate
-        breadcrumbs={[
-          {
-            label: 'Credentials',
-            href: `/${tenantId}/projects/${projectId}/credentials`,
-          },
-          { label: 'Edit' },
-        ]}
-      >
-        <MainContent>
-          <div className="max-w-2xl mx-auto py-4">
-            <EditCredentialForm
-              tenantId={tenantId}
-              projectId={projectId}
-              credential={credential}
-              initialFormData={initialFormData}
-            />
-          </div>
-        </MainContent>
-      </BodyTemplate>
+      <FullPageError
+        error={error as Error}
+        link={`/${tenantId}/projects/${projectId}/credentials`}
+        linkText="Back to credentials"
+        context="credential"
+      />
     );
-  } catch (error) {
-    console.error('Failed to fetch credential:', error);
-    notFound();
   }
+
+  return (
+    <BodyTemplate
+      breadcrumbs={[
+        {
+          label: 'Credentials',
+          href: `/${tenantId}/projects/${projectId}/credentials`,
+        },
+        { label: 'Edit' },
+      ]}
+    >
+      <MainContent>
+        <div className="max-w-2xl mx-auto py-4">
+          <EditCredentialForm
+            tenantId={tenantId}
+            projectId={projectId}
+            credential={credential}
+            initialFormData={initialFormData}
+          />
+        </div>
+      </MainContent>
+    </BodyTemplate>
+  );
 }
 
 export default EditCredentialsPage;

package/src/app/[tenantId]/projects/[projectId]/credentials/page.tsx

@@ -1,13 +1,13 @@
 import { Plus } from 'lucide-react';
 import Link from 'next/link';
 import { CredentialsList } from '@/components/credentials/credentials-list';
+import FullPageError from '@/components/errors/full-page-error';
 import { CredentialsIcon } from '@/components/icons/empty-state/credentials';
 import { BodyTemplate } from '@/components/layout/body-template';
 import EmptyState from '@/components/layout/empty-state';
 import { MainContent } from '@/components/layout/main-content';
 import { PageHeader } from '@/components/layout/page-header';
 import { Button } from '@/components/ui/button';
-import type { Credential } from '@/lib/api/credentials';
 import { fetchCredentials } from '@/lib/api/credentials';
 
 export const dynamic = 'force-dynamic';
@@ -21,11 +21,12 @@ async function CredentialsPage({
   params: Promise<{ tenantId: string; projectId: string }>;
 }) {
   const { tenantId, projectId } = await params;
-  let credentials: Credential[] = [];
+
+  let credentials: Awaited<ReturnType<typeof fetchCredentials>>;
   try {
     credentials = await fetchCredentials(tenantId, projectId);
-  } catch (_error) {
-    throw new Error('Failed to fetch credentials');
+  } catch (error) {
+    return <FullPageError error={error as Error} context="credentials" />;
   }
 
   return (

package/src/app/[tenantId]/projects/[projectId]/layout.tsx

@@ -1,5 +1,5 @@
-import { notFound } from 'next/navigation';
 import type { ReactNode } from 'react';
+import FullPageError from '@/components/errors/full-page-error';
 import { fetchProject } from '@/lib/api/projects';
 
 export const dynamic = 'force-dynamic';
@@ -16,8 +16,7 @@ export default async function ProjectLayout({ children, params }: ProjectLayoutP
     // Verify project exists
     await fetchProject(tenantId, projectId);
   } catch (_error) {
-    // If project doesn't exist, show 404 page
-    notFound();
+    return <FullPageError error={_error as Error} context="project" />;
   }
 
   return <>{children}</>;

package/src/app/[tenantId]/projects/[projectId]/mcp-servers/[mcpServerId]/edit/page.tsx

@@ -1,41 +1,48 @@
-import { MCPTransportType } from '@inkeep/agents-core/client-exports'
-import { notFound } from 'next/navigation'
-import { BodyTemplate } from '@/components/layout/body-template'
-import { MainContent } from '@/components/layout/main-content'
-import { MCPServerForm } from '@/components/mcp-servers/form/mcp-server-form'
-import type { MCPToolFormData } from '@/components/mcp-servers/form/validation'
-import { type Credential, fetchCredentials } from '@/lib/api/credentials'
-import { fetchMCPTool } from '@/lib/api/tools'
-import type { MCPTool } from '@/lib/types/tools'
+import { MCPTransportType } from '@inkeep/agents-core/client-exports';
+import FullPageError from '@/components/errors/full-page-error';
+import { BodyTemplate } from '@/components/layout/body-template';
+import { MainContent } from '@/components/layout/main-content';
+import { MCPServerForm } from '@/components/mcp-servers/form/mcp-server-form';
+import type { MCPToolFormData } from '@/components/mcp-servers/form/validation';
+import { type Credential, fetchCredentials } from '@/lib/api/credentials';
+import { fetchMCPTool } from '@/lib/api/tools';
+import type { MCPTool } from '@/lib/types/tools';
 
 interface EditMCPPageProps {
-  params: Promise<{ mcpServerId: string; tenantId: string; projectId: string }>
+  params: Promise<{ mcpServerId: string; tenantId: string; projectId: string }>;
 }
 
 async function EditMCPPage({ params }: EditMCPPageProps) {
-  const { mcpServerId, tenantId, projectId } = await params
+  const { mcpServerId, tenantId, projectId } = await params;
 
   // Fetch both in parallel with individual error handling
   const [mcpToolResult, credentialsResult] = await Promise.allSettled([
     fetchMCPTool(tenantId, projectId, mcpServerId),
     fetchCredentials(tenantId, projectId),
-  ])
+  ]);
 
   // Handle MCP tool result (required)
-  let mcpTool: MCPTool
+  let mcpTool: MCPTool;
   if (mcpToolResult.status === 'fulfilled') {
-    mcpTool = mcpToolResult.value
+    mcpTool = mcpToolResult.value;
   } else {
-    console.error('Failed to load MCP tool:', mcpToolResult.reason)
-    notFound()
+    console.error('Failed to load MCP tool:', mcpToolResult.reason);
+    return (
+      <FullPageError
+        error={mcpToolResult.reason as Error}
+        link={`/${tenantId}/projects/${projectId}/mcp-servers`}
+        linkText="Back to MCP servers"
+        context="MCP server"
+      />
+    );
   }
 
   // Handle credentials result (optional - fallback to empty array)
-  let credentials: Credential[] = []
+  let credentials: Credential[] = [];
   if (credentialsResult.status === 'fulfilled') {
-    credentials = credentialsResult.value
+    credentials = credentialsResult.value;
   } else {
-    console.error('Failed to load credentials:', credentialsResult.reason)
+    console.error('Failed to load credentials:', credentialsResult.reason);
     // Continue without credentials
   }
 
@@ -67,7 +74,7 @@ async function EditMCPPage({ params }: EditMCPPageProps) {
     },
     credentialReferenceId: mcpTool.credentialReferenceId || 'none',
     imageUrl: mcpTool.imageUrl?.trim() || undefined,
-  }
+  };
 
   // MCPServerForm handles all the form logic
 
@@ -98,7 +105,7 @@ async function EditMCPPage({ params }: EditMCPPageProps) {
         </div>
       </MainContent>
     </BodyTemplate>
-  )
+  );
 }
 
-export default EditMCPPage
+export default EditMCPPage;

package/src/app/[tenantId]/projects/[projectId]/mcp-servers/[mcpServerId]/page.tsx

@@ -1,4 +1,4 @@
-import { notFound } from 'next/navigation';
+import FullPageError from '@/components/errors/full-page-error';
 import { BodyTemplate } from '@/components/layout/body-template';
 import { MainContent } from '@/components/layout/main-content';
 import { ViewMCPServerDetails } from '@/components/mcp-servers/view-mcp-server-details';
@@ -11,31 +11,38 @@ interface MCPPageProps {
 async function MCPPage({ params }: MCPPageProps) {
   const { mcpServerId, tenantId, projectId } = await params;
 
+  let tool: Awaited<ReturnType<typeof fetchMCPTool>>;
   try {
-    const tool = await fetchMCPTool(tenantId, projectId, mcpServerId);
-
+    tool = await fetchMCPTool(tenantId, projectId, mcpServerId);
+  } catch (error) {
     return (
-      <BodyTemplate
-        breadcrumbs={[
-          {
-            label: 'MCP servers',
-            href: `/${tenantId}/projects/${projectId}/mcp-servers`,
-          },
-          {
-            label: tool.name,
-            href: `/${tenantId}/projects/${projectId}/mcp-servers/${mcpServerId}`,
-          },
-        ]}
-      >
-        <MainContent>
-          <ViewMCPServerDetails tool={tool} tenantId={tenantId} projectId={projectId} />
-        </MainContent>
-      </BodyTemplate>
+      <FullPageError
+        error={error as Error}
+        link={`/${tenantId}/projects/${projectId}/mcp-servers`}
+        linkText="Back to MCP servers"
+        context="MCP server"
+      />
     );
-  } catch (error) {
-    console.error('Failed to load MCP server:', error);
-    notFound();
   }
+
+  return (
+    <BodyTemplate
+      breadcrumbs={[
+        {
+          label: 'MCP servers',
+          href: `/${tenantId}/projects/${projectId}/mcp-servers`,
+        },
+        {
+          label: tool.name,
+          href: `/${tenantId}/projects/${projectId}/mcp-servers/${mcpServerId}`,
+        },
+      ]}
+    >
+      <MainContent>
+        <ViewMCPServerDetails tool={tool} tenantId={tenantId} projectId={projectId} />
+      </MainContent>
+    </BodyTemplate>
+  );
 }
 
 export default MCPPage;

package/src/app/[tenantId]/projects/[projectId]/mcp-servers/page.tsx

@@ -1,27 +1,28 @@
-import { Plus } from 'lucide-react'
-import Link from 'next/link'
-import { BodyTemplate } from '@/components/layout/body-template'
-import EmptyState from '@/components/layout/empty-state'
-import { MainContent } from '@/components/layout/main-content'
-import { PageHeader } from '@/components/layout/page-header'
-import { MCPToolsList } from '@/components/mcp-servers/mcp-tools-list'
-import { Button } from '@/components/ui/button'
-import { fetchMCPTools } from '@/lib/api/tools'
-import type { MCPTool } from '@/lib/types/tools'
+import { Plus } from 'lucide-react';
+import Link from 'next/link';
+import FullPageError from '@/components/errors/full-page-error';
+import { BodyTemplate } from '@/components/layout/body-template';
+import EmptyState from '@/components/layout/empty-state';
+import { MainContent } from '@/components/layout/main-content';
+import { PageHeader } from '@/components/layout/page-header';
+import { MCPToolsList } from '@/components/mcp-servers/mcp-tools-list';
+import { Button } from '@/components/ui/button';
+import { fetchMCPTools } from '@/lib/api/tools';
 
-const mcpServerDescription = 'Create MCP servers that agents can use to access external services.'
+const mcpServerDescription = 'Create MCP servers that agents can use to access external services.';
 
 async function MCPServersPage({
   params,
 }: {
-  params: Promise<{ tenantId: string; projectId: string }>
+  params: Promise<{ tenantId: string; projectId: string }>;
 }) {
-  const { tenantId, projectId } = await params
-  let tools: MCPTool[] = []
+  const { tenantId, projectId } = await params;
+
+  let tools: Awaited<ReturnType<typeof fetchMCPTools>>;
   try {
-    tools = await fetchMCPTools(tenantId, projectId)
+    tools = await fetchMCPTools(tenantId, projectId);
   } catch (error) {
-    console.error('Failed to load MCP tools:', error)
+    return <FullPageError error={error as Error} context="MCP servers" />;
   }
 
   return (
@@ -56,7 +57,7 @@ async function MCPServersPage({
         )}
       </MainContent>
     </BodyTemplate>
-  )
+  );
 }
 
-export default MCPServersPage
+export default MCPServersPage;

package/src/app/[tenantId]/projects/[projectId]/settings/page.tsx

@@ -1,3 +1,4 @@
+import FullPageError from '@/components/errors/full-page-error';
 import { BodyTemplate } from '@/components/layout/body-template';
 import { MainContent } from '@/components/layout/main-content';
 import { ProjectForm } from '@/components/projects/form/project-form';
@@ -15,7 +16,20 @@ interface SettingsPageProps {
 
 export default async function SettingsPage({ params }: SettingsPageProps) {
   const { tenantId, projectId } = await params;
-  const projectData = await fetchProject(tenantId, projectId);
+
+  let projectData: Awaited<ReturnType<typeof fetchProject>>;
+  try {
+    projectData = await fetchProject(tenantId, projectId);
+  } catch (error) {
+    return (
+      <FullPageError
+        error={error as Error}
+        link={`/${tenantId}/projects`}
+        linkText="Back to projects"
+        context="project"
+      />
+    );
+  }
   return (
     <BodyTemplate
       breadcrumbs={[

package/src/app/[tenantId]/projects/error.tsx

@@ -2,6 +2,19 @@
 
 import FullPageError from '@/components/errors/full-page-error';
 
-export default function ProjectsError() {
-  return <FullPageError description="Something went wrong." />;
+export default function ProjectsErrorBoundary({
+  error,
+  reset,
+}: {
+  error: Error & { cause?: { code: string; status: number } & { message: string } };
+  reset: () => void;
+}) {
+  return (
+    <FullPageError
+      error={error}
+      title="Something went wrong."
+      description="An unexpected error occurred. Please try again."
+      reset={reset}
+    />
+  );
 }

package/src/app/[tenantId]/projects/page.tsx

@@ -1,4 +1,5 @@
 import { Plus } from 'lucide-react';
+import FullPageError from '@/components/errors/full-page-error';
 import { BodyTemplate } from '@/components/layout/body-template';
 import EmptyState from '@/components/layout/empty-state';
 import { MainContent } from '@/components/layout/main-content';
@@ -8,16 +9,15 @@ import { ProjectList } from '@/components/projects/project-list';
 import { Button } from '@/components/ui/button';
 import { emptyStateProjectDescription, projectDescription } from '@/constants/page-descriptions';
 import { fetchProjects } from '@/lib/api/projects';
-import type { Project } from '@/lib/types/project';
 
 async function ProjectsPage({ params }: { params: Promise<{ tenantId: string }> }) {
   const { tenantId } = await params;
-  let projects: { data: Project[] } = { data: [] };
+
+  let projects: Awaited<ReturnType<typeof fetchProjects>>;
   try {
-    const response = await fetchProjects(tenantId);
-    projects = response;
-  } catch (_error) {
-    // throw new Error('Failed to fetch projects');
+    projects = await fetchProjects(tenantId);
+  } catch (error) {
+    return <FullPageError error={error as Error} context="projects" />;
   }
 
   return (

package/src/app/not-found.tsx

@@ -0,0 +1,12 @@
+import FullPageError from '@/components/errors/full-page-error';
+
+export default function NotFound() {
+  return (
+    <FullPageError
+      title="Page not found"
+      description="The page you are looking for does not exist or has been moved."
+      statusCode={404}
+      showRetry={false}
+    />
+  );
+}