feat: improve functions error messages (#4486)

* feat: implement better error pages for functions in CLI

package.json

@@ -48,7 +48,7 @@
     "Gergely Nemeth (https://twitter.com/nthgergo)",
     "HonkingGoose",
     "Ian Martorell <[email protected]>",
-    "Ibrahima",
+    "Ibrahima G. Coulibaly",
     "Jackie Macharia (wangoimacharia.dev)",
     "Jacob Schatz",
     "Jake Jarvis <[email protected]> (https://twitter.com/jakejarvis)",

src/lib/functions/server.js

@@ -161,7 +161,7 @@ const createHandler = function (options) {
         return
       }
 
-      handleSynchronousFunction(error, result, response)
+      handleSynchronousFunction(error, result, request, response)
     }
   }
 }

src/lib/functions/synchronous.js

@@ -1,5 +1,7 @@
 // @ts-check
 const { Buffer } = require('buffer')
+const { readFile } = require('fs').promises
+const { join } = require('path')
 
 const { NETLIFYDEVERR } = require('../../utils')
 
@@ -15,15 +17,15 @@ const addHeaders = (headers, response) => {
   })
 }
 
-const handleSynchronousFunction = function (err, result, response) {
+const handleSynchronousFunction = function (err, result, request, response) {
   if (err) {
-    return handleErr(err, response)
+    return handleErr(err, request, response)
   }
 
   const { error } = validateLambdaResponse(result)
   if (error) {
     console.log(`${NETLIFYDEVERR} ${error}`)
-    return handleErr(error, response)
+    return handleErr(error, request, response)
   }
 
   response.statusCode = result.statusCode
@@ -36,14 +38,36 @@ const handleSynchronousFunction = function (err, result, response) {
   response.end()
 }
 
-const formatLambdaLocalError = (err) => `${err.errorType}: ${err.errorMessage}\n  ${err.stackTrace.join('\n  ')}`
+const formatLambdaLocalError = (err, acceptsHtml) =>
+  acceptsHtml
+    ? JSON.stringify({
+        errorType: err.errorType,
+        errorMessage: err.errorMessage,
+        trace: err.stackTrace,
+      })
+    : `${err.errorType}: ${err.errorMessage}\n ${err.stackTrace.join('\n ')}`
 
-const handleErr = function (err, response) {
+let errorTemplateFile
+
+const renderErrorTemplate = async (errString) => {
+  const regexPattern = /<!--@ERROR-DETAILS-->/g
+  errorTemplateFile = errorTemplateFile || (await readFile(join(__dirname, './templates/function-error.html'), 'utf-8'))
+
+  return errorTemplateFile.replace(regexPattern, errString)
+}
+
+const processRenderedResponse = async (err, request) => {
+  const acceptsHtml = request.headers && request.headers.accept && request.headers.accept.includes('text/html')
+  const errorString = typeof err === 'string' ? err : formatLambdaLocalError(err, acceptsHtml)
+
+  return acceptsHtml ? await renderErrorTemplate(errorString) : errorString
+}
+
+const handleErr = async (err, request, response) => {
   detectAwsSdkError({ err })
 
   response.statusCode = 500
-  const errorString = typeof err === 'string' ? err : formatLambdaLocalError(err)
-  response.end(errorString)
+  response.end(await processRenderedResponse(err, request))
 }
 
 const validateLambdaResponse = (lambdaResponse) => {