vue-sentry实现前端监控

1、登录官网 sentry.io，注册账号，建立组织（organization）和项目（project）

2、安装sentry sdk

yarn add @sentry/browser
yarn add @sentry/integrations

3、在.env.development和 .env.production和 .env.staging文件中定义sentry版本号的环境变量 VUE_APP_RELEASE_VERSION = 'vue-admin-template@1.0.0'

4、在main.js文件中初始化监控服务

import * as Sentry from "@sentry/vue";
import { BrowserTracing } from "@sentry/tracing";

Sentry.init({
  Vue,
  dsn: "https://xxxxxxxxxxxxxxxxxxxx@xxxxxx.ingest.sentry.io/xxxxxx",//根据自己的地址填写
  integrations: [
    new BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
    }),
  ],
  environment: process.env.NODE_ENV,//推送具体开发环境，后台端便可根据环境进行筛选
  release: process.env.VUE_APP_RELEASE_VERSION, //讲第3步骤定义的版本号上传
  tracesSampleRate: 1.0,
});

5、在App.vue中故意抛出错误，运行程序，然后到sentry中查看错误记录

<script>
export default {
  created() {
    console.log(uuu.a) //这个是错误的，会记录到后台中
  }
}
</script>

6、参考博客

vue+sentry实现前端监控