为何选择Sentry

1. 市场已有的成熟的监控平台

• • Fundebug
  • Bugsnag
  • Badjs
  • Sentry

1. Sentry的优势

• • 开源，有免费版
  • 可以部署自己的服务器，安全
  • 错误信息及告警机制完善
  • 简单易上手，开发成本低
  • 错误追踪及状态流转及时，方便
  • 丰富的SDK
  • 社区活跃

综合对比，Sentry的这些优势既能及时抓取生产环境的前端报错发出通知，又能够提供丰富的错误信息及路径方便开发人员定位解决，满足了前端项目错误监控的基本需求；又是开源免费的，可以搭建自己的服务器，不用担心数据及敏感信息泄露等风险，同时支持各种开发语言及框架。所以，最终选择了Sentry做为得物前端平台的错误监控方案。

sentry 简介

• 中文哨兵的意思，一个错误监控和收集的开源工具
• 通过在要监控的项目中注入sdk，上报错误给服务端。
• 服务端是数据管理平台，可企业自己搭建，也可直接使用官网平台。

接入步骤

• 在平台创建项目(这里的平台考虑到数据私密性，需要私有化部署）私有化部署可以参考官方文档

• 注入sdk以vue3为例子

  • import * as Sentry from '@sentry/vue';
    import { BrowserTracing } from '@sentry/tracing';
    const app = createApp(App);
     Sentry.init({
        app,
        dsn: 你创建的项目的dsn,
        integrations: [
          new BrowserTracing({
            routingInstrumentation: Sentry.vueRouterInstrumentation(router),
            tracingOrigins: ['localhost', '10.5.1.230/biubiu', /^\//],
          }),
        ],
        // Set tracesSampleRate to 1.0 to capture 100%
        // of transactions for performance monitoring.
        // We recommend adjusting this value in production
        tracesSampleRate: 1.0,
      });
    

  • 上传sourcemap：用的是vite-plugin-sentry

    • import viteSentry from 'vite-plugin-sentry';
      /*
          Configure sentry plugin
      */
      const sentryConfig = {
        url: 'http://sentry.52mobileweb.com',
        authToken: '14310eefd86e4db992e2f5cadcb4081f2a54ee9f281b402bacde7e1878293bd8',
        org: 'biubiu',
        project: 'biubiu-frontend',
        release: '1.1',
        deploy: {
          env: 'production',
        },
        setCommits: {
          auto: true,
        },
        sourceMaps: {
          include: ['./dist/assets'],
          ignore: ['node_modules'],
          urlPrefix: '~/assets',
        },
      };
      
        return defineConfig({
          plugins: [viteSentry(sentryConfig]

总结

详细参考：

https://juejin.cn/post/6954303116783124487

https://juejin.cn/post/7009565622883319844