Question

我有一个使用VueJs2（2.1.10）的Laravel（5.4）应用程序。我使用Sentry.io作为我们后端的错误报告，工作正常。当VueJs发生错误时，我无法捕获它，也不会将其发送给Sentry。

以下是我根据Raven设置通过NPM安装Sentry的文档：https://docs.sentry.io/clients/javascript/integrations/vue/

我在app.js中的配置如下：

import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';
Raven
    .config('https://[filtered]@sentry.io/[filtered]')
    .addPlugin(RavenVue, Vue)
    .install();

通过webpack构建代码可以正常工作。我希望得到一些帮助的问题是为什么Vuejs没有向Sentry报告任何错误？

我试图强制出现一些错误，包括非现有模板变量，http错误响应，错误的组件声明，语法错误。所有这些错误都会导致控制台错误，但非发送到Sentry。

有关何处开始或如何处理Sentry和Vuejs2的错误报告的任何建议？提前谢谢！

Answer 1

我也刚开始使用Sentry，也遇到同样的问题。到目前为止，我发现的唯一解决方法是将Raven包含在每个组件中，并在发生错误时显式调用Raven（加上app / main.js的代码）：

MyComponent.vue

<template>
  <a href="#" @click="createError">Click me</a>
</template>

<script>
import Raven from 'raven-js'

export default {
  name: 'MyComponent',
  data () {
    return {
      loggedIn: false
    }
  }
  methods: {
    createError () {
      try {
        if (!this.loggedIn) throw new Error('User not logged in')
        console.log('User is logged in')
      } catch (error) {
        Raven.captureException(error)
      }
    }
  }
}
</script>

<style scoped>
</style>

Answer 2

这可能是由于您的javascript文件与html文件的来源不同。在这种情况下，所有的JavaScript错误都被捕获为“脚本错误”，“脚本错误”有时也称为跨域错误。哨兵丢弃JavaScript错误/^Script error\.?$/和/^Javascript error: Script error\.? on line 0$/。

下面是哨兵的相关代码

// "Script error." is hard coded into browsers for errors that it can't read. // this is the result of a script being pulled in from an external domain and CORS. globalOptions.ignoreErrors.push(/^Script error\.?$/); globalOptions.ignoreErrors.push(/^Javascript error: Script error\.? on line 0$/);

另一个条件：

您可以使用vue-cli-service，默认情况下使用webpack devtool：eval配置，这会导致Chrome错误：https://bugs.chromium.org/p/chromium/issues/detail?id=765909

Answer 3

尝试一下

main.js

Import VueRaven, { Raven } from 'vue-raven'
Vue.use(VueRaven, {
  dsn:'yourdsn'
}

VueJS 2不报告任何错误（Sentry.io）

3 个答案: