Sentry没有使用vuejs项目的sourcemap

Question

我在 Vue.js SPA 中使用 Sentry 进行问题跟踪。我遵循了关于运行项目的哨兵指南，它捕获了事件，但它没有使用源映射来告诉我源文件中错误的堆栈跟踪。

我的错误是什么？我该如何解决？

这是我的配置：

vue.config.js

.sentrylirc

sentry.ts

package.json 脚本：

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

和我的tsconfig.json

最后是 npm 运行 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

更新：回答

Answer 1

为了在 Vuejs.+ts 中使用 Sentry，我们应该添加这些配置：

./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
  }
};

这是代表 https://github.com/SeyyedKhandon/reprex-vue-ts-sentry

Sentry没有使用vuejs项目的sourcemap

Sentry doesn't use the sourcemap of vuejs project

event-log

sentry

source-maps

typescript

vue.js