fix: handle 404 on cloud functions

[mirestrepo]

This one was a bit tricky to figure out so I want to write out what I learned. The solution may not be perfect or the best, but it's the one way I got it to work. The issue arise from the combination of the way Nuxt handles 404, and the fact that our website is not fully static

Options for handling 404 page

If our site was fully static

We would need Firebase to redirect to a 404.html. To accomplish this one, would need to tell Nuxt to generate the 404.html page in the config (we do that) by adding to the nuxt config file:

  generate: {
    fallback: "404.html"
  },

and to add "destination": "/404.html" to the firebase config. We tried the following

      "rewrites": [
         {
           "source": "**",
           "function": "ssrapp",
           "destination": "/404.html"
         }
       ],

At first we thought that worked, but then realized that adding "destination": "/404.html" overshadows the function and the dynamic routes never get hit

Links

• Nuxt issue thread
• Firebase custom 404 page

Final solution.

The solution is a bit inspired by this post. More specifically by these comments:

Breakdown of the problem

• Nuxt doesn’t give middlewares an easy way to see if a route is valid or not
• Nuxt runs its own 404 handler that can’t be intercepted in the middleware chain
• Nuxt doesn’t have a clearly documented way of overriding the 404 handler on the server side

What we need to do

• Intercept all traffic and check if the requests are renderable by Nuxt
• Proxy all other requests

To make things more explicit.

• All static pages (the ones that come from Nuxt Contex) are hit right away. This is handled by firebase.
• When a route is not found in the static content (/dist) folder, then the cloud function is called. This is handled by firebase (config - "function": "ssrapp",)
• In the cloud function I am keeping a list of the dynamic routes that the Nuxt app should handle, every other route is redirected to the static 404.html

If we don't do this and let Nuxt handle the non existing route, we get a 500 instead of 404, and the website becomes unresponsive unless refreshed. I think this is because Nuxt my not treat 404 as an error and therefore our try/catch doesn't handle it appropriately

[github-actions]

Visit the preview URL for this PR (updated for commit 6942379):

https://qa-ccv-brown-edu--pr105-debug-404-4x87pxyy.web.app

_{(expires Tue, 05 Jul 2022 04:47:16 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[broarr]

This looks good to me! Couple of style comments, but nothing that should prevent a merge!

[broarr]

I'd stick this on one line, not that it matters though...

[broarr]

I'd consider renaming this to whitelistedRoutes, that way we know that these routes are allowed by the cloud function. It's the normal language used for this sort of thing in networking. Obviously this doesn't matter either ;-)

[mirestrepo]

I don’t love the whitel/black list terminology, but I could use allowedRoutes or something more clear

[broarr]

I think y'all might need a style enforcer like prettier or standard I'm seeing ; sometimes, but not others

[mirestrepo]

Probably… we have it in the parent dir… may just need to add it to the functions dir..

[broarr]

You can probably delete this now

[broarr]

Do you need this log still?

[mirestrepo]

Probably not

[eldu]

Thanks you for tackling this weird problem! I didn't realize how weirdly nuxt handles 404! Great learnings in here and thank you for documenting them as well as instructions for updates.

I made comments on some typos. And then Brad also mentioned changes as well. Looking very good Isabel! Thanks again!

[mirestrepo]

Thanks @broarr and @eldu for reviewing! I’ve merged the docs changes since I can do it from my ipad and made #107 to address Brad’s suggestions. I’m gonna merge so this bug doesn’t stay around longer