fix(web): show custom 500 page on CMS errors instead of blank page (#44)

Author: jhb-dev

web/src/layout/collections/CollectionLayout.astro

@@ -1,5 +1,4 @@
 ---
-import { getPageData } from '@/cms/getPageData'
 import type { Locale } from '@/cms/types'
 import LivePreviewRefreshPageScript from '@/components/LivePreviewRefreshPageScript.astro'
 import PreviewAdminToolbar from '@/components/PreviewAdminToolbar.astro'
@@ -13,19 +12,20 @@ import ProjectLayout from './ProjectLayout.astro'
 
 type Props = {
   pageProps: PageProps
+  // The page data is fetched in the page route's frontmatter (not here) so that a CMS error is
+  // thrown before the SSR response starts streaming. Otherwise Astro can no longer switch to the
+  // custom 500 page and the visitor gets a blank page with HTTP 200.
+  pageData: Page | Project | Article | Author
   locale: Locale
   preview?: boolean
 }
 
 const {
-  pageProps: { collection, id },
+  pageProps: { collection },
+  pageData,
   locale,
   preview,
 } = Astro.props
-
-const pageData = await getPageData<Page | Project | Article | Author>(collection, id, locale, {
-  preview,
-})
 ---
 
 <Layout lang={locale!} meta={pageData.meta}>

web/src/pages/[lang]/[...path].astro

@@ -1,5 +1,7 @@
 ---
+import { getPageData } from '@/cms/getPageData'
 import CollectionLayout from '@/layout/collections/CollectionLayout.astro'
+import type { Article, Author, Page, Project } from 'cms/src/payload-types'
 import { getStaticPaths as getStaticPathsCms } from '../../cms/getStaticPaths'
 import { locales } from '../../cms/locales'
 import type { Locale } from '../../cms/types'
@@ -15,6 +17,13 @@ if (!locales.includes(lang!)) {
   return Astro.redirect(Astro.url.pathname, 404)
 }
 const locale = lang as Locale
+
+const pageData = await getPageData<Page | Project | Article | Author>(
+  props.collection,
+  props.id,
+  locale,
+  { preview: false },
+)
 ---
 
-<CollectionLayout pageProps={props} preview={false} locale={locale} />
+<CollectionLayout pageProps={props} pageData={pageData} preview={false} locale={locale} />

web/src/pages/preview/[lang]/[...path].astro

@@ -1,8 +1,10 @@
 ---
+import { getPageData } from '@/cms/getPageData'
 import { getPageProps } from '@/cms/getPageProps'
 import { locales } from '@/cms/locales'
 import type { Locale } from '@/cms/types'
 import CollectionLayout from '@/layout/collections/CollectionLayout.astro'
+import type { Article, Author, Page, Project } from 'cms/src/payload-types'
 
 // Preview mode, dont prerender these routes at build time
 export const prerender = false
@@ -15,7 +17,15 @@ if (!locales.includes(lang!)) {
 const locale = lang as Locale
 const fullPath = `/${locale}${path ? '/' : ''}${path ?? ''}`
 
+// Fetch the page data here in the frontmatter (before the response starts streaming) so that a CMS
+// error surfaces as the custom 500 page instead of a blank page with HTTP 200.
 const pageProps = await getPageProps(fullPath)
+const pageData = await getPageData<Page | Project | Article | Author>(
+  pageProps.collection,
+  pageProps.id,
+  locale,
+  { preview: true },
+)
 ---
 
-<CollectionLayout pageProps={pageProps} preview={true} locale={locale} />
+<CollectionLayout pageProps={pageProps} pageData={pageData} preview={true} locale={locale} />