Vue: Improve SSR debugging with SourceMap

[JiayangShen]

Vue.js version

2.x.x

Reproduction Link

Because it is a ssr issue and hard to provide a running demo online, please see Steps to reproduce

Steps to reproduce

• clone the https://github.com/vuejs/vue-hackernews-2.0.git repostory
• edit file src/\components/ItemList.vue to cause an error. For example:

// ...
import Spinner from './Spinner.vue'
import Item from './Item.vue'
import { watchList } from '../store/api'
// abc is a undeclared variable that can cause a ReferenceError
console.log(abc)
// ...

• then run npm run build, npm run start in command line
• open browser and navigate to http://localhost:8080
• the command line will report some error info as below:

error during render : /
ReferenceError: abc is not defined
    at Object.module.exports.exports.default.props (__vue_ssr_bundle__:388:13)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.module.exports.__vue_styles__ (__vue_ssr_bundle__:994:19)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.module.exports.module.exports (__vue_ssr_bundle__:866:83)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.<anonymous> (__vue_ssr_bundle__:650:80)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.module.exports.exports.default.name (__vue_ssr_bundle__:224:66)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)

What is Expected?

The error info in the command line should include the specific file path and line number, for example:

ReferenceError: abc is not defined
    at src/components/ItemList.vue (26:13)
    ...

What is actually happening?

Error info dose not include the file path and line number that cause the error to produce..

I know it is the bundle render that cause the error hard to locate. And is there any solution, like soucemap, that can solve this debug issuse with bundle render?

[simplesmiler]

Relevant threads: https://github.com/nodejs/node/issues/8042, https://github.com/nodejs/node/issues/6471

[yyx990803]

This is on the roadmap. I have some ideas on how to improve it, probably
for 2.2.

On Sat, Dec 3, 2016, 10:22 AM Denis Karabaza [e-mail]
wrote:

Relevant threads: nodejs/node#8042
https://github.com/nodejs/node/issues/8042, nodejs/node#6471
https://github.com/nodejs/node/issues/6471

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue/issues/4376#issuecomment-264628035, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAefXoSKQi-dWdo3aqm-913mvOt-6Celks5rETTfgaJpZM4LDPRI
.

[JiayangShen]

@yyx990803 Great! Waiting for Vue 2.2 . It will be more suitable to use SSR bundle render for production environment. And what is the release date for Vue 2.2 in the roadmap?

[yyx990803]

Implemented and will ship in 2.2.

[jazoom]

"stay tuned for a detailed writeup"

Are we still getting the writeup mentioned in the release notes? For some reason I couldn't get it working with the new bundle even though the old bundle works fine.

[simplesmiler]

@jazoom you need to use https://github.com/vuejs/vue-ssr-webpack-plugin to enable sourcemaps in the server bundle.

[jazoom]

@simplesmiler that is what I meant. I changed to using that and the build didn't work at all.

[thkdog]

First of all, devtool: 'sourcemap' has to be added to webpack.config to enable source map output, which is not documented clearly.
And I have maps:[] output in the bundle file, but I still get unclear error from node output.
It's not what I expected...

2017-04-21 16:08:32,168 GET /sample/ssr status 204 (rt: 25ms)
[Vue warn]: Error in data():
(found in <Root>)
Cannot read property 'text' of undefined
TypeError: Cannot read property 'text' of undefined
    at Vue$2.data (main.js:303:30)
    at Vue$2.mergedInstanceDataFn (/.../node_modules/.2.2.6@vue/dist/vue.runtime.common.js:1025:20)
    at getData (/.../node_modules/.2.2.6@vue/dist/vue.runtime.common.js:2751:17)
    at initData (/.../node_modules/.2.2.6@vue/dist/vue.runtime.common.js:2720:7)
    at initState (/.../node_modules/.2.2.6@vue/dist/vue.runtime.common.js:2661:5)
    at Vue$2.Vue._init (/.../node_modules/.2.2.6@vue/dist/vue.runtime.common.js:3752:5)
    at new Vue$2 (/.../node_modules/.2.2.6@vue/dist/vue.runtime.common.js:3845:8)
    at Object.<anonymous> (public/error/404/entry-ssr.js:5:12)
    at __webpack_require__ (webpack:/webpack/bootstrap 4db82d0f851ec15f529c:19:0)
    at main.js:67:18