Nuxt application broken after any error occurred if using cache configuration

Environment

---

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.2.0
• Nitro Version: 2.2.1
• Package Manager: [email protected]
• Builder: vite
• User Config: routeRules
• Runtime Modules: -
• Build Modules: -

---

Reproduction

Reproduction repository: https://stackblitz.com/edit/github-45sxb2?file=app.vue

To create the situation with a render error:

1. Start the application
2. See that the page loads correctly
3. Add Hello {{ broken.stuff }} as the content of the
   element in the app.vue file.
4. Press the refresh button of the stackblitz browser
5. See that the error page is shown (Expected)
6. Remove the error part in the
   content
7. Press the refresh button of the stackblitz browser
8. See that the error page is still being shown and the server is still logging the error (Not expected). You can also see that the console.log statements are not triggering, suggesting the page is not invalidated and the error is still being served from the cache

To create the situation with a createError call

1. Start the application
2. See that the page loads correctly
3. Adjust the url of the $fetch call to https://httpbin.org/status/500
4. See that the page adjusts itself to the error state (Expected)
5. Press the refresh button of the stackblitz browser (you may need to do this twice)
6. See that the working old version of the page is shown (Not expected)
7. Adjust the content in the
   element to be Hello 2
8. Refresh the browser
9. See that the content from the server is showing "Hello", while the Vue client replaces it with "Hello2" (Not expected, the page is even still broken due to the 500 being loaded in from the adjusted $fetch call url), the page isn't even invalidated on the server.
10. Adjust the url of the $fetch call to https://httpbin.org/status/200
11. Press the refresh button of the stackblitz browser
12. See that the state of step 9 still happens and the server still logs the error of the broken state

If you would remove the cache property from the nuxt.config.ts and repeat above steps, you would only see expected behavior.

Describe the bug

It seems that when using cache in a Nuxt application, invalidation of pages gets broken once an error has occurred. This results in mixed behavior, depending on what the error was (see reproduction steps for two scenario's, but there may be more situation that this applies to or result in different unexpected behavior).

This results in the entire Nuxt application being unusable if the application requires a cache strategy. The Nuxt application will also no longer execute the logic within the route, and only serve pages from the cache.

Additional context

No response

Logs

No response

[danielroe]

cc: @pi0

[tdekoning]

@danielroe (or @pi0 ) do you have any idea when to expect progression on this problem? To me it seems like quite a high priority issue, because basically using Nuxt with caching results in a broken application.

[tdekoning]

@danielroe and @pi0 i've created a pull request in Nitro that addresses this problem. See above mentioned pull request.