Vite Async Module window onerror triggering capability

[ediaos]

Description

1. Background: We have a scenario where we need to retry resource loading when there are exceptions, such as when changing domain names, based on Vite packaging.

2. Problem: In Vite ESM packaging, dynamic imports cannot trigger window.onerror, making it impossible to listen for errors. For example, dynamic imports in router or code (dynamic imports under ESM can only go through the catch process).

However, in webpack packaging, it will be loaded in the form of a script tag, and I will get onerror, thereby achieving the ability to retry.

Suggested solution

The solution should be globally supported during construction to reduce the complexity of modifying the business side.

When Vite is built under ESM, it converts dynamic imports into script module loading and callback processing, which will not affect the original logic.

function loadAsyncModule(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.type = 'module'
    script.src = url
    script.onload = (event) => {
      import(event.target.src)
        .then((module) => {
          resolve(module)
        })
        .catch((err) => {
          reject(err)
        })
    }
    script.onerror = (err) => {
      reject(err)
    }
    document.head.appendChild(script)
  })
}

loadAsyncModule('/demo/scripts/module/add-async.js').then(({ default: add }) => {
  console.log('iresult', add(1, 3))
})

Alternative

No response

Additional context

If there are any unclear points, please let me know and I will supplement them.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sapphi-red]

I feel this is similar to #12080. Would window.addEventListener('vite:preloadError', e => console.log(e)) work for you? It's added in 4.4 (#12084).

[ediaos]

I feel this is similar to #12080. Would window.addEventListener('vite:preloadError', e => console.log(e)) work for you? It's added in 4.4 (#12084).

Thank you very much for your reply. I carefully read the code submission you provided. From the source code, it seems that vite:preloadError only works for CSS file loading. Based on the element's hook, I was able to intercept addEventListener's error and load events to achieve retry capability.

For asynchronously loaded module modules (non-preload), it is currently not possible to trigger exceptions and retries globally. One solution I can think of is to change the way Vite packages modules by replacing the asynchronous loading of import with a custom loadAsyncModule.

My idea is to see if it is feasible to use the script method instead of asynchronous import. If it is feasible, it could be a common solution for Vite configuration.

[SwatiMaheshwari]

is there any update on this issue?

[sapphi-red]

From the source code, it seems that vite:preloadError only works for CSS file loading. Based on the element's hook, I was able to intercept addEventListener's error and load events to achieve retry capability.

No, it does work for JS as well (it had a bug though #15203).
https://stackblitz.com/edit/vitejs-vite-eubg1i?file=main.js,counter.js

I'll close this issue as this is already implemented by #12084