fix(vue-app): skip page render early on error or navigation

[rchl]

🔗 Linked issue

#20691

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This change attempts to interrupt page "rendering" early if the route is navigated away from while middleware or asyncData is in progress. Additionally, also interrupts as early as possible when error() is called so that the error page is not shown after user has navigated to another page already.

Fixed by creating a plain renderState object that has an aborted property set to false initially, and passing that object to the internal render function and then also down to function that executes middlewares. If a new render is triggered (through the router.beforeEach hook) while the original one is in progress, the aborted property is set to true so that the original render pass can abort as soon as possible (once currently executing async function is done).

I realize that this is not 100% proof solution as the user could do many weird things that would affect the state of the app from the middlewares or the asyncData handlers, but I think this should cover most common cases.

Added tests that verify that the error page is not shown after navigating away from the page when the page triggers error() call or throws an exception. Unfortunately those have to rely on arbitrary 2s delay but I haven't found a better way to test that.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[rchl]

I have not put too much thought into that part of the code (the SPA case). I could look more if needed but it could be just left like that, without supporting early abort.

[rchl]

@manniL I see you've been assigned. Could you have a look at this?

[manniL]

Looks like a good solution to me for covering basic use cases 👍