使用Sentry对前端进行实时js错误监控

1 简介

Sentry 为一套开源的应用监控和错误追踪的解决方案。这套解决方案由对应各种语言的 SDK 和一套庞大的数据后台服务组成。应用需要通过与之绑定的 token 接入 Sentry SDK 完成数据上报的配置。通过 Sentry SDK 的配置，还可以上报错误关联的版本信息、发布环境。同时 Sentry SDK 会自动捕捉异常发生前的相关操作，便于后续异常追踪。异常数据上报到数据服务之后，会通过过滤、关键信息提取、归纳展示在数据后台的 Web 界面中。

在完成接入后我们就可以从管理系统中实时查看应用的异常，从而主动监控应用在客户端的运行情况。通过配置报警、分析异常发生趋势更主动的将异常扼杀在萌芽状态，影响更少的用户。通过异常详情分析、异常操作追踪，避免对客户端应用异常两眼一抹黑的状态，更高效的解决问题。

部署安装请看我之前写的文档,附带springboot集成sentry;

https://cloud.tencent.com/developer/article/1838156

2 为什么要有前端监控

用户访问您的业务时，整个访问过程大致可以分为三个阶段：页面生产时（服务器端状态）、页面加载时和页面运行时。

为了保证线上业务稳定运行，我们会在服务器端对业务的运行状态进行各种监控。现有的服务器端监控系统相对已经很成熟，而页面加载和页面运行时的状态监控一直比较欠缺。例如:

无法第一时间获知用户访问您的站点时遇到的错误。
各个国家、各个地区的用户访问您的站点的真实速度未知。
每个应用内有大量的异步数据调用，而它们的性能、成功率都是未知的。

3 Sentry原理图

4 . Vue集成

大佬跳过,引包就行

4.1 创建一个新项目

4.2 修改项目代码

下面案例代码为vue勾选默认创建的项目

版本

代码语言：javascript复制

"vue": "^2.6.14"
"@vue/cli-service": "^4.5.13",

HelloWorld.vue

代码语言：javascript复制

<template>
  <div class="hello">
    <h1 @click="hello">error</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods:{
    hello(){
      console.log(window.a.b)
    }
  }
}
</script>

main.js

代码语言：javascript复制

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

Sentry.init({
  // 此处的dsn为sentry创建完项目提示里面的信息
  dsn: "http://e65cb16cb71e45a4b895fc5afbb8064e@118.31.52.159:9000/2",
  integrations: [new VueIntegration({Vue, attachProps: true})],
  logErrors: true,
  release: 'pro@1.0.1'
});

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

4.3 启动项目验证

4.4 查看sentry错误信息

详细信息

5 报错信息显示错误组件位置

5.1 Token生成

5.2 修改项目代码

在项目的目录下面

.sentryclirc

代码语言：javascript复制

[defaults]
url=http://118.31.52.159:9000/
org=1234.com
project=vue_demo1

[auth]
token=1974de7c5fba4cb8968d401d307ef09f15890180c29f41a5b6ddb4d9b085b18e

修改下上传版本

5.3 重新构建项目

代码语言：javascript复制

➜  dist git:(master) ✗ npm run build
➜  sentry_demo1 git:(master) ✗ cd dist
➜  dist git:(master) ✗ npm install anywhere -g

➜  dist git:(master) ✗ anywhere -p 8888
Running at http://192.168.0.111:8888/
Also running at https://192.168.0.111:8889/