The vendor detail page and layout called api.vendors.getById without a try/catch. The API client throws ApiError on any non-2xx, so a 404 (missing vendor), 401, or 5xx during SSR threw out of the server component and white-screened the whole route with a generic "server-side exception" — the existing `if (!vendor)` fallback was never reached. Guard both fetches: log the error and degrade gracefully (page shows "Vendor not found", layout renders chrome with a fallback title). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
45 lines
1.8 KiB
TypeScript
45 lines
1.8 KiB
TypeScript
import { DashboardDetailsPage } from "@/base/components/layout/dashboard"
|
|
import { getServerApi } from "@garage/api/server"
|
|
import { VendorActions } from "@/modules/vendors/vendor-actions"
|
|
import { VendorProvider } from "@/modules/vendors/vendor-context"
|
|
import React from "react"
|
|
|
|
export default async function layout(props: {
|
|
params: Promise<{ id: string }>
|
|
children: React.ReactNode
|
|
}) {
|
|
const { id } = await props.params
|
|
const api = await getServerApi()
|
|
// Guard the fetch: a failed request (404/401/5xx) must not throw and crash
|
|
// the whole route — render the chrome with a fallback title instead.
|
|
let vendor: Record<string, any> | undefined
|
|
try {
|
|
const response = (await api.vendors.getById(id)) as { data?: Record<string, any> }
|
|
vendor = response?.data
|
|
} catch (err) {
|
|
console.error(`Failed to load vendor ${id} (layout):`, err)
|
|
}
|
|
|
|
const company = vendor?.company_name as string | undefined
|
|
const fullName = [vendor?.first_name, vendor?.last_name].filter(Boolean).join(" ").trim()
|
|
const title = company || fullName || "Vendor Details"
|
|
const isActive = vendor?.is_active ?? vendor?.status === "active"
|
|
|
|
return (
|
|
<VendorProvider vendor={{ id, label: title }}>
|
|
<DashboardDetailsPage
|
|
className="p-0 lg:p-0"
|
|
title={title}
|
|
description={vendor?.email ?? vendor?.phone ?? undefined}
|
|
backHref="/purchase/vendor"
|
|
actions={<VendorActions vendorId={id} isActive={Boolean(isActive)} />}
|
|
tabs={[
|
|
{ href: `/purchase/vendor/${id}`, label: "Details" },
|
|
]}
|
|
>
|
|
{props.children}
|
|
</DashboardDetailsPage>
|
|
</VendorProvider>
|
|
)
|
|
}
|