Sentry部署过程记录

sentry官网： Sentry

优点：开源项目，提供性能监控，错误监控和会话重播。可以获知用户问题发生的设备及浏览器环境，代码堆栈和具体操作路径。目前Saas版1个账户免费，先安装试用之后再本地部署。

创建sentry项目

将 Sentry SDK 添加到你的项目

以VUE项目为例，先植入代码到项目看效果：

安装sentry

//安装sentry
npm install --save @sentry/vue

在应用程序的生命周期中尽早初始化 Sentry。

import { createApp } from "vue";
import { createRouter } from "vue-router";
import * as Sentry from "@sentry/vue";

const app = createApp({
  // ...
});
const router = createRouter({
  // ...
});

Sentry.init({
  app,
  dsn: "DSN地址",
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
  ],
  //配置环境
  environment: process.env.NODE_ENV,
  release: 'pro@1.0.2',
  // Performance Monitoring
  tracesSampleRate: 1.0, //  Capture 100% of the transactions
  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
  // Session Replay
  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");

开启源码映射

官网中关于源码映射的介绍 我们系统用的是webpack，

npm install @sentry/webpack-plugin --save-dev

const { defineConfig } = require('@vue/cli-service');
const { currentConfig } = require('./src/config.js');
const path = require('path');

const { sentryWebpackPlugin } = require('@sentry/webpack-plugin');

module.exports = defineConfig({
  //打开生产环境源码映射
  productionSourceMap: true,
  //配置webPack打包插件
  configureWebpack: {
    devtool: 'source-map', // 确保生成 Source Map
    plugins: [
        sentryWebpackPlugin({
          url: 'https://**.sentry.io/',
          include: './dist/js', //DIST的JS位置
          ignore: ['node_modules', 'webpack.config.js'],//排除项
          urlPrefix: '~/js',//这里是生产环境访问网址对应的JS文件夹 ~是根目录
          org: 'org',
          project: 'admin-vue',
          release: 'pro@1.0.2',//版本 这里要和入口文件的版本对上
          authToken: process.env.SENTRY_AUTH_TOKEN,
          cleanArtifacts: true // 先清理再上传
        })
    ]
  },
});

登录sentry

点击 账号->API keys，点击 Create New Token 生成完成 token 后可以进行下一步，进入项目的根目录，执行

sentry-cli --url http://xxx.xxx.xxx.xxx:9000 login

这里因为我们上面已经成功生成了 auth token，所以输入 n 后会提示你输入刚才那个token，这样就配置完成了

下一步我们在 sentry 要给你的项目先设置一个版本号，这样它才知道要对应去找哪里的 sourcemap 进行解析

sentry-cli releases -o 组织名 -p 项目名 new 版本号
sentry-cli releases -o sentry -p vue new pro@1.0.1
# Created release pro@1.0.1.

执行npm run build 进入dist目录

npm run http-server -g

http-server -p 6002

在package.json的脚本中构建命令修改 + && rimraf ./dist/js/*.map

"build": "vue-cli-service build --mode production  && rimraf ./dist/js/*.map",

删除构建后的MAP，保证生产环境安全。

报警参考这一篇文章： 使用 Sentry 做异常监控 - 借助飞书捷径，我快速完成了 Sentry 上报异常的自动推送，点赞！