emit an event when there are errors loading/preloading chunks

[danielroe]

Description

I would love to be able to catch errors when preloading chunks (which often occurs when a new deployment has taken place) so that I can handle thiings appropriately.

Suggested solution

This is how we've implemented within Nuxt:

https://github.com/nuxt/nuxt/pull/19038/files#diff-7860a08e52b47fe432d19a402b062801774cefbb935172e30ce1e83a1ec6a962

Alternative

No response

Additional context

I would be very happy to implement this within Vite. It's a relatively small (and non-breaking) change

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.

[patak-dev]

I think it would be better to move this upstream, so you don't need to rely on __vitePreload and other frameworks could benefit. If you have already an idea for the PR, maybe it is easier to discuss it there. I don't know if you are thinking of a standard way to handle these errors in Vite or if you would like to propose a way to configure this.

[danielroe]

I'll submit a PR. I would suggest solely emitting the event and leaving it up to frameworks/users to handle the reload (or not) as they would like.

[doutatsu]

This would be amazing, looking into Nuxt change. I got a ton of errors like these, which with end-user results in a blank screen, making them think the app is broken / down. Would love to see this released

[patak-dev]

Thanks for the heads up @doutatsu 👍🏼

[victorlmneves]

will it also solve "regular" failed dynamic imports? Because in my case, probably 99% are related to this and not chunks that no longer exists after a deploy :/

[edwh]

I imagine it would then be possible to trigger a retry. Though it would be useful to have a suggestion as to how.

…

On Tue, 6 Jun 2023, 21:11 Victor Neves, ***@***.***> wrote: will it also solve "regular" failed dynamic imports? Because in my case, probably 99% are related to this and not chunks that no longer exists after a deploy :/ — Reply to this email directly, view it on GitHub <#12080 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAN26FVPUC7JBALARRGCVLXJ6FFVANCNFSM6AAAAAAU6JV4YY> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[danielroe]

The PR adds an error event - it's up to you to handle it. You can see how we handle the chunk loading errors in Nuxt on route change.

Note that regular failed imports (ie. not chunk loading errors) will not trigger this error.

[victorlmneves]

Well for me the strange is that Vue has functionality that when working with dynamic imports allows you to set a number of retries automatically but nevertheless even doing the retries it always fails when executing the import.
Meanwhile, we also have a person working on the migration of the project to Nuxt, then we will see how it will behave

e.g:

import { defineAsyncComponent } from 'vue';
import LoadingComponent from '../components/LoadingComponent/LoadingComponent.vue';
import ErrorComponent from '../components/ErrorComponent/ErrorComponent.vue';

 export const useComponent = (name: string) => {
    return defineAsyncComponent({
        loader: () => import(`../components/${name}/${name}.vue`),
        loadingComponent: LoadingComponent,
        errorComponent: ErrorComponent,
        delay: 2000,
        timeout: 3000,
        onError(error, retry, fail, attempts) {
            if (error.message.match(/fetch/) && attempts <= 3) {
                retry()
            } else {
                fail()
            }
        }
      })
};