Sentry doesn't use the sourcemap of vuejs project

Question

I'm using Sentry for issue tracking in Vue.js SPA. i followed the Sentry'es guide about running the project and it captures the events, but it doesnt use sourcemaps to telling me the stack trace of the error in the source file.

What is my mistake? how should i fix this?

here is my configs:

vue.config.js

.sentrylirc

sentry.ts

package.json scripts:

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build  && pwd && ls && rm ./dist/js/*.js.map",
  },

and my tsconfig.json

and finally here is the output of npm run build:

C:\Projects\next (sentry_source_map -> origin)
λ npm run build

> next@0.1 build C:\Projects\next
> vue-cli-service build  && pwd && ls && rm ./dist/js/*.js.map    

 WARN  A new version of sass-loader is available. Please upgrade for best experience.
\  Building for production...
Starting type checking service...
Using 1 worker with 2048MB memory limit
-  Building for production...> Analyzing 40 sources
>| ~/js/chunk-44bcbbb3.2a255268.js
> Rewriting sources                                                                                          █
> Adding source map references
> Uploaded release files to Sentry
> File upload complete
\  Building for production...
Source Map Upload Report
  Minified Scripts
    ~/js/app.011d2c40.js (sourcemap at app.011d2c40.js.map)
      ....
    ~/js/chunk-vendors.eaf015b4.js (sourcemap at chunk-vendors.eaf015b4.js.map)

  Source Maps

    ~/js/app.011d2c40.js.map
    ~/js/chunk-00c426a2.4372386c.js.map
    ...
    ~/js/chunk-vendors.eaf015b4.js.map
-  Building for production...

 WARNING  Compiled with 3 warnings                                                                  1:40:28 PM

 warning  in ./node_modules/moment/src/lib/locale/locales.js

Module not found: Error: Can't resolve './locale' in 'C:\Projects\next\node_modules\moment\src\lib\locale'

 warning

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  js/chunk-65ccd58e.6993f21a.js (373 KiB)
  js/chunk-vendors.eaf015b4.js (884 KiB)

 warning

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (1.2 MiB)
      css/chunk-vendors.e7c7c7d8.css
      js/chunk-vendors.eaf015b4.js
      css/app.45a74e7d.css
      js/app.011d2c40.js


  File                                    Size              Gzipped

  dist\js\chunk-vendors.eaf015b4.js       883.69 KiB        271.83 KiB
  ....
  dist\css\chunk-7d397faf.bd31fb6c.css    0.08 KiB          0.09 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

UPDATE:answer https://stackoverflow.com/a/63645027/12666332

Answer 1

For using Sentry with Vuejs.+ts, we should add these configuration:

./sentry.properties

defaults.url=your-sentry-server-address
defaults.org=your-org-name
defaults.project=your-project-name-in-sentry
auth.token=your-auth-token

./src/sentry.ts

import Vue from 'vue';
import * as Sentry from '@sentry/browser';
import { Vue as VueIntegration } from '@sentry/integrations';

if (process.env.NODE_ENV !== 'development')
    Sentry.init({
        dsn: 'https://b65f59d0f7e14953362491e32bc8341c@sentry.io/14',
        integrations: [ new VueIntegration({ Vue, attachProps: true }) ]
    });

./src/main.ts

import Vue from "vue";
import "./sentry";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

./vue.config.js

const SentryWebpackPlugin = require("@sentry/webpack-plugin");
const plugins =
  process.env.NODE_ENV !== "development"
    ? [
        new SentryWebpackPlugin({
          include: "./dist",
          ignoreFile: ".sentrycliignore",
          ignore: ["node_modules", "vue.config.js"],
          configFile: "sentry.properties"
        })
      ]
    : [];
module.exports = {
  // other configuration
  configureWebpack: {
    plugins
  }
};

Here is the reprex https://github.com/SeyyedKhandon/reprex-vue-ts-sentry