Site name: popthegrid
Site ID: c107594c-eeb5-4824-8236-505580ffe54d
Repository: GitHub - tmaxmax/popthegrid: Pop all the squares in the grid! Will you make it?
Hello there!
I can’t manage to return a 404 response from Netlify Edge. For context, my website hosts a simple game in which you can achieve various records; you can share these records with others by generating some unique URLs, which are stored in a database, accessed through a Netlify serverless function. The URLs are of the format https://popthegrid.com/:code, where :code is a server-side randomly generated string of 6 characters, [a-zA-Z0-9].
Anyway, to serve these unique URLs I use an Edge function as follows (implementation here:
- get the code from the request URL, if it exists; if not, skip the function
- call the serverless function with the code, to retrieve the required information about the record
- if the code doesn’t exist, redirect the client to the home page, with status code 307
- if the code does exist and is fetched successfully, call
context.nextwith a request for the index page, then modify the HTML to add some specific meta tags and other data - return the new response
What I would like to do instead is to return a proper status code and keep the initial URL (not redirect to another page). Here was my implementation idea (the following code would be included in the implementation linked above):
// This is the request to the serverless function; not sure if I need `sendConditionalRequest` here,
// I must confess I didn't thoroughly understand this part – it seemed to fix some weird
// "Could not process your request for the document because it would cause an HTTP proxy cycle" error
const res = await context.next(new Request(`${baseURL}/.netlify/functions/share?code=${code}`), { sendConditionalRequest: false })
if (res.status !== 200) {
// baseURL is the index page – basically `/`
const homepage = await context.next(new Request(baseURL))
// This cookie is used on FE to modify the so it shows there was an error
context.cookies.set({ /* value */ }
return new Response(homepage.body, { ...homepage, status: res.status })
}
This works for status 500 – and I assume other statuses aswell – but not 404. On 500 I get the homepage, and in Devtools I see that the server responded correctly with 500 and that the cookie is set; on 404 I get nothing. I can see, through a log I have at the beginning of the edge function, that on 404 a request is sent for the following files: :code.html, :code.htm, :code/index.html, :code/index.htm; as if 404 is handled in some special manner and my returned response from the function is just ignored.
Not returning any response in the res.status !== 200 branch (basically just return) gives the same result as described above; I tried this because I thought that I could have a 404 redirect in netlify.toml to take care of it, and redirects are not considered if the edge function returns a response, but it’s still ignored. For a working example, see implementation and a deploy preview link which should be broken (non-existing code).
What can I do? It appears as if my code would be correct, but 404 seems to be handled differently by the Edge runtime. Should I approach this differently? Thank you.
EDIT: This apparently works in deploy preview but does not work in dev (using Netlify CLI). What should I do?