Override This Function has crashed error Page

Support
1

image
Is there a way to display a more friendly page than this one?
We have an ecommerce site deployed and I don’t want the end users seeing this page.
Is there a solution that can be used to make this happen?
Regards,
Obed

2

@obedmhg See:

2 Likes
3

Thanks @nathanmartin,
This is pretty new, we were having this issues before March, at that time there was not an option great to know that now there is a solution!

This is happening on NextJS generated functions, not sure how to change those, I am researching and I’ll add more details here once I know how to do it.
thanks for the help!
Regards,
Obed

4

The solution above would not solve the issue presented. The post’s title is misleading. Not sure why it talks about Serverless Functions.

Currently, there’s no easy way to customise the page, but it’s possible. It would require some usage of Edge Functions and that would cost you for Edge Functions + Functions, so not really worth it in my opinion. Let me know if you’re still interested.

5

Hi @hrishikesh ,
I would love to explore the issue, this is for a commerce site, that requires to have a custom error page, not a generic one.
How can I get more details about the options we have?
Regards,
Obed

6

It goes something along the lines of having to write your own Edge Function that would look like as follows:

import type {
  Config,
  Context
} from '@netlify/edge-functions'

export default async function (req : Request, context : Context) {

  /* Continue the chain and get the response, accepting only JSON to simplify Netlify errors */
  const res = await context.next(new Request(new URL(req.url), {
    headers: new Headers({
      accept: 'application/json'
    })
  }))

  /* Ignore these status codes, send the response as-is */
  if (res.status < 500) {
    return res
  }

  /*
    This can likely be optimised to avoid loading the entire body in memory.
    We're calling `.text()` instead of `.json()` because if the response is not a Netlify error
    or if it doesn't serve a JSON, we would like to avoid the Edge Function to crash.
  */ 
  const body = await res.text()

  /* Check if response has the timeout text, send a response if yes */
  if (/Task timed out after \d{2}\.\d{2} seconds/.test(body)) {

    const timeoutErrPageRes = await context.next(
      new Request(
        new URL('/errors/timeout', req.url)
      )
    )

    /* Returning body and headers of the timeout page, but changing the status code to 504 */
    return new Response(timeoutErrPageRes.body, {
      headers: timeoutErrPageRes.headers,
      status: 504
    })

  }

  /* Fetch the generic error page */
  const errPageRes = await context.next(
    new Request(
      new URL('/errors/generic', req.url)
    )
  )

  /* Same as above, could be optimised */
  const errPageText = await errPageRes.text()

  /* Return the body and headers of the error page and status of original res. Body is modified to add the error. */
  return new Response(errPageText.trim().replace(/<\/body>\s?<\/html>$/, '') + '<script>window.err=' + body + '</script></body></html>', {
    headers: errPageRes.headers,
    status: res.status
  })

}
export const config : Config = {
  excludedPath: [
    '/errors/*',
    '/*.css',
    '/*.js',
    '/*.woff2'
  ],
  path: '/*'
}

The above example assumes:

  • You have your error pages that are static HTML in the /errors/* path (no Next.js output, or no SSR/ISR or any kind of dynamic routing)
  • For a generic error (non timeout error), I’m attaching the error message to window.err property. So when the error page loads, I do something like:
<script>
  window.addEventListener('load', () => {
    document.querySelector('pre').innerText = JSON.stringify(window.err, null, 2)
  }, {
    once: true
  })
</script>