feat: support error pages (#330)

* feat: support error pages

* fix: missing test snapshot

Author: eliaSchenker

docs/content/0.getting-started/1.installation.md

@@ -9,7 +9,7 @@ navigation:
 
 Want to know why you might need this module? Check out the [introduction](/docs/og-image/getting-started/introduction).
 
-To get started with Nuxt OG IMage, you need to install the dependency and add it to your Nuxt config.
+To get started with Nuxt OG Image, you need to install the dependency and add it to your Nuxt config.
 
 :ModuleInstall{name="og-image"}
 

docs/content/0.getting-started/5.getting-familar-with-nuxt-og-image.md

@@ -199,7 +199,7 @@ Within the playground, you should now see the background color change to green.
 
 ## Conclusion
 
-Thanks for following along! You know have a basic understanding of how to use the module.
+Thanks for following along! You now have a basic understanding of how to use the module.
 
 It's recommended to look through the rest of the documentation to get a full understanding of what's possible.
 

docs/content/3.guides/9.error-pages.md

@@ -0,0 +1,37 @@
+---
+title: Error pages
+description: How to display og images for error pages
+---
+
+Nuxt OG Image supports displaying images for pages with a non-200 status code (for example a 404 page). It supports both errors thrown by Nuxt, as well as custom errors created using `setResponseStatus`.
+
+To define an og image for an error page, call `defineOgImageComponent` in the setup script of your `error.vue` file:
+
+```vue [error.vue]
+<script lang="ts" setup>
+defineOgImageComponent('NuxtSeo')
+</script>
+```
+
+You can use this, for example, to display a generic OG Image containing the status code and status message by
+accessing the error provided by Nuxt:
+
+```vue [error.vue]
+<script lang="ts" setup>
+import type { NuxtError } from '#app'
+
+const props = defineProps<{
+  error: NuxtError
+}>()
+
+defineOgImageComponent('NuxtSeo', {
+  title: error.statusCode.toString(),
+  description: error.statusText
+})
+</script>
+```
+
+## Limitations
+
+Note that displaying OG Images for error pages is only supported for status codes ranging 400 to 499. Pages with status codes >= 500 won't generate an OG Image.
+

playground/error.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { defineOgImageComponent } from '#imports'
+import type { NuxtError } from '#app'
+
+const props = defineProps<{
+  error: NuxtError
+}>()
+
+defineOgImageComponent('NuxtSeo', {
+  title: props.error.statusCode.toString(),
+  description: props.error.statusMessage,
+  theme: '#fcfcfc',
+  colorMode: 'dark',
+})
+</script>
+<template>
+  <p>{{ error.statusCode }} - {{ error.statusMessage }}</p>
+</template>

playground/pages/not-found.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { createError } from '#imports'
+
+throw createError({
+  statusCode: 404,
+  statusMessage: 'Not found'
+})
+</script>
+<template>
+  <p>not found page</p>
+</template>

src/runtime/server/og-image/context.ts

@@ -220,7 +220,7 @@ async function doFetchWithErrorHandling(fetch: any, path: string) {
     .catch((err: any) => {
       return err
     })
-  let errorDescription
+  let errorDescription: string
   // if its a redirect let's get the redirect path
   if (res.status >= 300 && res.status < 400) {
     // follow valid redirects
@@ -229,17 +229,28 @@ async function doFetchWithErrorHandling(fetch: any, path: string) {
     }
     errorDescription = `${res.status} redirected to ${res.headers.get('location') || 'unknown'}`
   }
-  else if (res.status >= 400) {
+  // if its an internal error, return the error
+  else if (res.status >= 500) {
     // try get the error message from the response
     errorDescription = `${res.status} error: ${res.statusText}`
   }
+  // status codes 400-499 are not handled here to allow displaying og images for error pages
+
   if (errorDescription) {
     return [null, createError({
       statusCode: 500,
       statusMessage: `[Nuxt OG Image] Failed to parse \`${path}\` for og-image extraction. ${errorDescription}`,
     })]
   }
-  return [res._data || await res.text(), null]
+
+  if (res._data) {
+    return [res._data, null]
+  }
+  else if (res.text) {
+    return [await res.text(), null]
+  }
+
+  return ['', null]
 }
 
 // TODO caching
@@ -279,7 +290,7 @@ async function fetchPathHtmlAndExtractOptions(e: H3Event, path: string, key: str
   if (!_payload) {
     return createError({
       statusCode: 500,
-      statusMessage: `[Nuxt OG Image] HTML response from ${path} is missing the #nuxt-og-image-options script tag. Check you have used defined an og image for this page.`,
+      statusMessage: `[Nuxt OG Image] HTML response from ${path} is missing the #nuxt-og-image-options script tag. Make sure you have defined an og image for this page.`,
     })
   }
 

test/fixtures/basic/error.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+defineOgImage({
+  renderer: 'satori',
+  props: {
+    title: 'Hello World',
+  },
+})
+</script>
+
+<template>
+  <p>Error page</p>
+</template>

test/integration/__image_snapshots__/base-test-ts-build-static-images-4-snap.png

@@ -44,6 +44,12 @@ describe('build', () => {
     })
 
     expect(Buffer.from(defaults)).toMatchImageSnapshot()
+
+    const errorPageImage: ArrayBuffer = await $fetch('/prefix/__og-image__/image/not-found/og.png', {
+      responseType: 'arrayBuffer',
+    })
+
+    expect(Buffer.from(errorPageImage)).toMatchImageSnapshot()
   }, 60000)
 
   it('dynamic images', async () => {