如何在前端项目里接入Sentry监控系统并通过企业微信通知

能不能让用户录个屏过来呀？
用户使用的是什么机型的手机？
用户使用的什么浏览器呀？
用户的网络是什么情况？
…
…
线上出现问题时，技术部和业务部同学之间的对话诸如此类…业务同学也很栓Q呀，硬着头皮去问客户信息
客户配合还算好的，如果遇到不配合的客户，还真的是一个头两个大！

那么，这时候，接入一套监控系统，真真是有必要极了！！

Sentry 横空出世

Sentry 是一款软件监控工具，可帮助开发人员识别和修复与代码相关的问题。从错误跟踪到性能监控，Sentry 提供代码级可观察性，可以轻松诊断问题并持续了解应用程序代码的运行状况。

Sentry 可以为我们提供的帮助有什么？

错误监控（自动捕获错误，重播用户操作行为等等）
性能监控
发布健康监控
…

功能多多，其他不多说了，我们直接开整！

写在前边

sentry 分为 sass 版 和 私有化部署。

sass版
是最方便的使用方式， 只需进入 官方注册 激活邮箱并创建项目就可以使用了，但是会有使用数量限制等

私有化部署
需要开发者自己使用Python或者Docker进行安装，但胜在数据更加安全，限制少

最终选择哪种方式，可以根据实际的应用场景进行选择，基于我司业务，最终选择了“私有化部署”这种方式，求助了运维同学帮我们搭建了自己的sentry监控平台，然后登录上去，随后有关前端方面的真正的配置就开始了！

一：基础搭建

创建项目

成功之后会生成一个搭建指南

根据指南，执行以下操作，具体如下：

安装依赖

yarn add @sentry/vue

SDK配置

import * as Sentry from '@sentry/vue'

Sentry.init({
   
  Vue,
  debug: false, // 调试模式
  environment: 'development', // 可以调整为一个变量
  dsn: 'https://xxxx',
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration({
   
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
 tracePropagationTargets: [], // 设置哪些url应该被“分布式跟踪”错误请求
 tracesSampleRate: 1.0, // 错误上报率-每次用户加载页面或在您的应用中导航时，都会发送一次请求
 replaysSessionSampleRate: 0.1, // 立即开始录制并持续整个用户会话的回放的采样率。
 replaysOnErrorSampleRate: 1.0, // 发生错误时记录的回放的采样率。这种类型的重播将在错误发生之前记录长达一分钟的事件，并继续记录直到会话结束。
  release: import.meta.env.VITE_SOURCEMAP_RELEASE,   // 建议从env环境变量中读取
})

下边详细说下重要的几个参数：

environment：实践的时候可以根据具体项目情况将该参数置为变量，这样子的话在sentry后台监控系统里边就能根据这个参数去区分具体是哪个环境发生的错误，也可以进行快速定位和分析

dsn：即项目向哪个url发送通知，那么就来源于此<