SSR: renderToString is called without an err & source-maps not used in stack traces of lazy-loaded components

[nemtsov]

Version

2.5.2 (and 2.4.4)

Reproduction link

https://github.com/nemtsov/repro-vue-ssr-nomaps

Steps to reproduce

First, thank you for the amazing work you do on Vue, especially SSR!

This issue is about rendering a component on the server (SSR) and using asynchronous / lazy-loaded components. When there's an error in a lazy-loaded component, renderToString is not called with an error, but instead, the error gets logged to the console and (most importantly) source-maps are not used, making the error very difficult to debug.

Repro:

1. Clone the repo above and npm install
2. npm start
3. curl -i http://localhost:3000

If you look at the src/entry-server.js, you'll notice:

import App from './App.vue';
// const App = () => import('./App.vue');

What is expected?

Importing App synchronously, and then running npm start and the curl, we see the following output:

SYNCHRONOUS:

# STDOUT/STDERR
[Vue warn]: Error in data(): "ReferenceError: a is not defined"

found in

---> <App> at src/App.vue
       <Root>

# HTTP OUTPUT
HTTP/1.1 500 Internal Server Error
X-Powered-By: Express
Date: Fri, 13 Oct 2017 13:46:55 GMT
Connection: keep-alive
Content-Length: 797

ReferenceError: a is not defined
    at module.exports.__webpack_exports__.a (src/bad.js:5:0)
    at module.exports.__webpack_exports__.a (src/first.js:4:0)
    at VueComponent.data (src/App.vue:14:0)
    at getData (node_modules/vue/dist/vue.runtime.esm.js:3301:0)
    at initData (node_modules/vue/dist/vue.runtime.esm.js:3260:0)
    at initState (node_modules/vue/dist/vue.runtime.esm.js:3199:0)
    at VueComponent.Vue._init (node_modules/vue/dist/vue.runtime.esm.js:4437:0)
    at new VueComponent (node_modules/vue/dist/vue.runtime.esm.js:4609:0)
    at createComponentInstanceForVnode (/repro-vue-ssr-nomaps/node_modules/vue-server-renderer/build.js:7330:10)
    at renderComponentInner (/repro-vue-ssr-nomaps/node_modules/vue-server-renderer/build.js:7515:40)

This is what I expect. Notice that:

1. The status code is 500 (meaning renderToString was called with an err)
2. The stack trace uses source maps to clearly show where the error is coming from

What is actually happening?

On the other hand, importing App asynchronously (uncommenting import('./App.vue')), and then running npm start and the curl, we see the following output:

ASYNC:

# STDOUT/STDERR
[Vue warn]: Error in data(): "ReferenceError: a is not defined"

found in

---> <App> at src/App.vue
       <Root>
[vue-server-renderer] error when rendering async component:

ReferenceError: a is not defined
    at exports.modules.__webpack_exports__.a (0.server-bundle.js:195:3)
    at exports.modules.__webpack_exports__.a (0.server-bundle.js:182:71)
    at VueComponent.data (0.server-bundle.js:167:73)
    at getData (server-bundle.js:3422:17)
    at initData (server-bundle.js:3381:7)
    at initState (server-bundle.js:3320:5)
    at VueComponent.Vue._init (server-bundle.js:4558:5)
    at new VueComponent (server-bundle.js:4730:12)
    at createComponentInstanceForVnode (/repro-vue-ssr-nomaps/node_modules/vue-server-renderer/build.js:7330:10)
    at renderComponentInner (/repro-vue-ssr-nomaps/node_modules/vue-server-renderer/build.js:7515:40)


# HTTP OUTPUT
HTTP/1.1 200 OK
X-Powered-By: Express
Date: Fri, 13 Oct 2017 13:45:41 GMT
Connection: keep-alive
Content-Length: 7

<!---->

Notice that:

1. The status code is 200 (meaning renderToString was called without an err)
2. The stack trace does not use source maps and is very difficult to debug

[nemtsov]

Just tested it with 2.5.2 and I'm still seeing this issue there.

I understand that you're very busy especially after a release but just want to make sure that this issue doesn't get lost since not handling errors is a serious issue for anyone doing SSR with async components.

Thanks!