0

I've got a Vue3 Frontend build with Vite and hosted by Netlify. Now I have the following problem:

  1. User opens the site
  2. Developer pushes code and a new version is deployed
  3. User tries to navigate to a new view that is dynamically imported and gets the following error:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

The error makes sense as the user has the old router destination files and they are gone because of the deployment. I would like to catch the error and just reload the page.

How can I catch the error?

I've tried (but nothing is logged):

window.addEventListener("error", (event: ErrorEvent) => {
  console.log(event);
});

I've also tried on my router (but error is still logged to Sentry):

router.onError((error, to) => {
  if (error.message.includes("Failed to fetch dynamically imported module")) {
    window.location.assign(to.fullPath);
  }
});

EDIT: This question was marked to be the same question as this question: How to tell if a <script> tag failed to load. However, this does not answer my question as I do not import scripts. The vue-router loads files dynamically and I have no control over how the router loads these files. All I see is the error that is thrown when the file is not there anymore.

danielmoessner
  • 339
  • 3
  • 18

0 Answers0