.vue file SourceMap report is wrong

Feedback
1

First, I want to capture .vue file errors from source code in production environment. So i used the vuePlugin like this

// main,js
import Vue from 'vue'
import Raven from 'raven-js'
import RavenVue from 'raven-js/plugins/vue'

Raven
  .config('my client DSN')
  .addPlugin(RavenVue, Vue)
  .install()

and it works but the reports aren’t my expectation

My source code in .vue file which i throw test error is at line 36

34 |    methods: {
35 |      error() {
36 |        throw new Error('test throw error from .vue file')
37 |      }
38 |    }

However，i got my report at my own server look like this

99  |  methods: {
100 |    error: function error() {
101 |      throw new Error('test throw error from .vue file');
102 |    }
103 |  }

It is a wrong line.

My webpack config devtool option is ‘source-map’

I guess the source-map is the source code after converted by vue-loader and some babel-loaders, now i want the source code report is before converted, how do i fix this? thanks a lot!

2

This is hard to answer without knowing how you are generating these sourcemaps. Can you share a bit of your setup and the commands you are using to generate this?

3

@mitsuhiko

Here is my webpack’s configuration

...
devtool: 'source-map',
plugins: [
    ....
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_console: true
      },
      output: {
        comments: true
      },
      sourceMap: true
    })
]

After generation

4

UglifyJS is known to produce weird sourcemaps in combination with webpack. In particular there is this open issue which describes your problem: https://github.com/webpack/webpack/issues/4084

Sadly there is nothing we can do on our side to resolve this :frowning:

5

There is also this: https://github.com/mishoo/UglifyJS2/issues/493

6

Thanks a lot ! I will try to figure it out !

1 Like