serverPrefetch rejection with no value creates broken response

[dsanders11]

Version

2.6.11

Reproduction link

[http://sorry-no-can-do.com](Sorry, I don't have time to setup a reproduction case for SSR, that's not a 5 minute thing).

Steps to reproduce

1. Use SSR
2. Add a serverPrefetch with return Promise.reject()

What is expected?

An error to occur due to the rejection in serverPrefetch

What is actually happening?

No error occurs, but the rendered result will not contain the component with the bad serverPrefetch.

---

Currently, rejecting a promise in serverPrefetch with no value will create a broken response from SSR. By broken I mean that no error will occur with renderToString, so it looks like it was successful, but the rendered DOM may be missing components, including the root component all together.

This is because the rejection value from serverPrefetch is wired straight through to the done callback on render, but that callback only considers an error to have occurred if a value is provided. Due to this straight wiring, any serverPrefetch which rejects without a value will allow rendering to continue, but will skip the rendering of the component on which the error occurs. If that's the root component, the rendered result has no element for hydration to use in the rendered result, which means there's no way for the client to recover. For a real-life example of this, see vuejs/apollo#901.

Here's the relevant code, the done callback for render:

vue/src/server/create-renderer.js

Lines 84 to 87 in 42fdf3f

	render(component, write, context, err => {
	if (err) {
	return cb(err)
	}

And where the rejection value from serverPrefetch is wired through:

vue/src/server/render.js

Line 65 in 42fdf3f

Promise.all(promises).then(resolve).catch(reject)

A fix could be as easy as expanding that catch to check for err and provide a default value if one is not provided. I'm punting on what that default would be, so I'm opening this as an issue rather than a PR.

[posva]

As a workaround, providing an error to Promise.reject should solve the problem. In practice, not providing a reason for a promise rejection is confusing for the developer themselves.
I think the fix you propose is good. We could use a new Error('Missing rejection reason in serverPrefetch')

[dsanders11]

As a workaround, providing an error to Promise.reject should solve the problem.

Yes, but any component library or plugin can provide a serverPrefetch, so it's often not in the developer's control to work around. See the vue-apollo example.

We could use a new Error('Missing rejection reason in serverPrefetch')

Seems reasonable to me.

[dsanders11]

@posva, is there anything more that needs to be done here? I can open a PR with that rejection reason if that's all that needs to be done.

[michhy]

@dsanders11 I am having the same bug and not sure how to fix it exactly, as it randomly breaks my blog page built by vue, when the promise returning might sometimes delayed. Can you please help?
Thanks in advance for your time!