【前端异常监控】Vue3项目中集成Sentry实现前端错误事件日志监控、记录和聚合

懒得写前言了，直接复制一波吧

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

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

---

直接正题，注册账号创建项目什么的就跳过不说了，Vue3中集成

1.安装vue版本的SDK yarn add @sentry/vue
2.main.ts中配置,注意填写自己的Sentry_dsn地址

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { siteKey, Sentry_dsn } from "./PrivateKey";
import * as Sentry from "@sentry/vue";
const app = createApp(App);
Sentry.init({
  app,
  dsn: Sentry_dsn,
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
  ],
  tracesSampleRate: 1.0, //  Capture 100% of the transactions
  tracePropagationTargets: ["localhost", 自己的线上域名],
  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
});
app.use(router);
app.mount("#app");

3.终端执行npx @sentry/wizard@latest -i sourcemaps

没截图了，反正就是按要求下载一个依赖，然后按着要求选择自己的项目打包配置之类的，一步一步往下走，如果是自动部署的环境记得添加SENTRY_AUTH_TOKEN到环境变量中，我的项目是vite的，会自动写入vite.config.ts，无需手动配置

4.其实到目前位置就集成完了，可以手动写一个错误看看能不能上传到平台上