【问题标题】:Sentry doesn't use the sourcemap of vuejs projectSentry 不使用 vuejs 项目的 sourcemap
【发布时间】:2020-08-13 08:11:18
【问题描述】:

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

我的错误是什么?我该如何解决这个问题?

这是我的配置:

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 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

更新:答案 https://stackoverflow.com/a/63645027/12666332

【问题讨论】:

    标签: typescript vue.js event-log source-maps sentry


    【解决方案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

    【讨论】:

      猜你喜欢
      • 2020-09-17
      • 2023-03-18
      • 2018-03-04
      • 2020-06-15
      • 2019-12-03
      • 2015-08-14
      • 1970-01-01
      • 2018-04-27
      • 2019-04-04
      相关资源
      最近更新 更多