defineAsyncComponent onError

[nestle49]

Vue version

3.2.45

Link to minimal reproduction

https://github.com/nestle49/FoodSoul

Steps to reproduce

For reproduction:

1. Install packages yarn && yarn dev
2. Inside src/pages/MainPage.vue change params inside in this line on non-exist, for example 'Test2'
   const { dynamicLoadComponent } = useDynamicLoadComponent('Test');
3. Refresh page -> infinity loading

If remove onError, SPA working fine

For any projects:

1. Create SPA with vue & vite ssr;
2. Create dynamically component with defineAsyncComponent;
3. Use onError callback inside defineAsyncComponent on ssr;

Crash application with error on server side:
Error: [[email protected]] Hook timeout: the render() hook of /renderer/_default.page.server.ts didn't finish after 40 seconds

On client side everything is fine

What is expected?

SPA works with ssr

What is actually happening?

Error: [[email protected]] Hook timeout: the render() hook of /renderer/_default.page.server.ts didn't finish after 40 seconds

System Info

System:
    OS: macOS 13.0.1
    CPU: (8) arm64 Apple M1
    Memory: 327.75 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.0/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
Browsers:
    Chrome: 109.0.5414.119
    Firefox: 106.0.1
    Safari: 16.1
npmPackages:
    vue: ^3.2.45 => 3.2.45

Any additional comments?

No response

[nestle49]

@yyx990803 Can u comment, please?

[nestle49]

@yyx990803 still relevant

[DaniilIsupov]

I confirm problem and also waiting for solution

[nestle49]

@yyx990803
Can we expect to fix at least critical problems of core in the near future?

[LinusBorg]

I understand you are waiting for a resolution. But if you keep this up you will be banned from the vuejs org. This is your fierst and final warning.

[LinusBorg]

This user has now been blocked for 7 days.

We will still investigate and fix this issue once we have the capacity for it.

As a workaround for other people, consider conditionally adding this callback on on the client.

If you need it on the server, please describe the specific use case.

[GandjaFuzz]

have same issue @LinusBorg

[LinusBorg]

Can you provide any more info about your use case?

[LinusBorg]

So, here's what can halfway solve the issue in my quick experiment so far:

1. make sure you provide an errorComponent and
2. call fail() in the onError callback:

errorComponent: () => h('div', {}, 'Error!'),
onError: async (error, retry, fail) => {
    console.error(error);
	fail();
}

1. if the error component is missing, the server will send an error response because of an now unhandled error. This can be avoided by adding a global error handler or an error boundary in a parent component.
2. if you don't call fail(), it will hang forever

it's the second part I am not sure how it should behave right now, if fail()would be mandatory to call on the server. We lack documentation for that feature.