How to execute the code in transformResponse at serverless tier?

Edgio Q&A
1

I added the following code using transformResponse method in routes.js.

.match("/example-react-progressive-web-apps-ecommerce/", ({ proxy }) => {
    proxy("origin", {
      path: "/company",
      transformResponse: (res, req) => {
        const $ = cheerio.load(res.body)
        // Remove everything but the header and footer
        $(".section").remove()
        // Insert our new div that will house our new content
        $(".navbar-wrapper").after('<div id="main-content-container"></div>')
        // Change page title
        $("title").text("Example eCommerce PWAs")
        // Rewrite links in original page
        $("a").each(function () {
          let old_href = $(this).attr("href")
          if (old_href[0] === "/") {
            let new_href = "https://www.moovweb.com" + old_href
            $(this).attr("href", new_href)
          }
        })

        // Inject 'content' where content comes from a dynamic call to an API
        $('#main-content-container').append(content)

        res.body = $.html()
        res.setHeader("content-length", res.body.length)
      },
    })
  })

It works well in local, but it doesn’t work when deployed.
If I enter the “/example-react-progressive-web-apps-ecommerce” URL after the deployment, the following error appears.

{"status":"error","message":"Should not get to serveStatic without onNotFound when running behind the edge."}

I know actions in transformResponse will be performed at the serverless tier and not the edge, but how can I deploy the urls that uses the transformResponse method like this?

2

Could you post your entire router? It is unclear what route is getting triggered - you are not even using serveStatic in the part of the router you posted. Also, I would remove the trailing backslash from the path matching and try again.

3

This is the whole code of routes.js.

module.exports = new Router()
  .match("/service-worker.js", ({ serviceWorker }) => {
    return serviceWorker(".next/static/service-worker.js")
  })
  .match("/example-react-progressive-web-apps-ecommerce", ({ proxy }) => {
    proxy("origin", {
      path: "/company",
      transformResponse: async (res, req) => {
        const $ = cheerio.load(res.body)

        //Remove everything but the header and footer
        $(".section").remove()

        //Insert our new div that will house our new content
        $(".navbar-wrapper").after('<div id="main-content-container"></div>')

        //Rewrite links in original page
        $("title").text("Example eCommerce PWAs")

        //Rewrite links in original page
        $("a").each(function () {
          let old_href = $(this).attr("href")
          if (old_href[0] === "/") {
            let new_href = "https://www.moovweb.com" + old_href
            $(this).attr("href", new_href)
          }
        })

        res.body = $.html()
        res.setHeader("content-length", res.body.length)
      },
    })
  })
  .use(nextRoutes) // automatically adds routes for all files under /pages
4

Looks like you found a bug! This has been fixed in 2.39.2.

The cause of the problem is using path and transformResponse together. This would result in the wrong route being run in the serverless compute layer, due to the request url being rewritten at the edge before the request is forwarded on to serverless.

1 Like
5

It is solved.
Thank you