前端bug监控之sentry

如何进行私有化部署

• 首先，从 Sentry 的 GitHub 仓库（https://github.com/getsentry/onpremise）上下载最新版本的 Sentry 代码
• 根据 Sentry 的官方文档，安装 Docker 和 Docker Compose。Sentry 的部署是基于 Docker 容器的，因此需要 Docker 环境来运行
• 安装过程中选择私有化部署（免费版只有30天试用期)
• 然后 docker-compose up -d
• 当 Sentry 启动完成后，你可以通过浏览器访问 Sentry 的 Web 界面。默认情况下，Sentry 的 Web 服务运行在 http://localhost:9000 （ docker是真方便）
• 如果想用域名访问可以在nginx.conf配置反向代理或者使用官方文档上的 Caddy 替代方案 文档地址https://develop.sentry.dev/self-hosted/reverse-proxy

前端项目集成sentry

• 以react项目为例

• 首先 安装 Sentry SDK npm install @sentry/react @sentry/tracing

• 初始化 Sentry (在你的应用程序的入口文件（比如 index.js 或 App.js）中，初始化 Sentry 并配置 SDK：)

  import React from 'react';
  import ReactDOM from 'react-dom';
  import { Integrations } from '@sentry/tracing';
  import { BrowserRouter as Router } from 'react-router-dom';
  import { Integrations } from '@sentry/tracing';
  import * as Sentry from '@sentry/react';
  Sentry.init({
  dsn: 'YOUR_DSN',
  integrations: [new Integrations.BrowserTracing()],
  tracesSampleRate: 1.0,
  });
  ReactDOM.render(
  <React.StrictMode>
  <Router>
    <App />
  </Router>
  </React.StrictMode>,
  document.getElementById('root')
  );

  在上面的代码中，将 YOUR_DSN 替换为你在 Sentry 上创建项目后获得的 DSN。

• 捕获错误和异常：
  Sentry SDK 可以自动捕获 JavaScript 异常和 Promise 拒绝，并发送这些错误信息到 Sentry 服务。你也可以通过手动调用 Sentry.captureException(error) 来捕获特定的错误。

前端插件上传sourcemap文件到Sentry 并在生产环境上传完成后执行删除操作

• 安装插件
  npm install @sentry/webpack-plugin --save-dev
• 配置插件

  const SentryWebpackPlugin = require('@sentry/webpack-plugin');
  module.exports = {
  // ...其他配置项...
  plugins: [
  new SentryWebpackPlugin({
    authToken: 'YOUR_AUTH_TOKEN',
    org: 'YOUR_ORG',
    project: 'YOUR_PROJECT',
    include: './dist',
    ignore: ['node_modules', 'webpack.config.js'],
    afterCompile(compilation, callback) {
      // 删除sourcemap文件
      fs.unlink('./dist/main.js.map', (err) => {
        if (err) {
          console.error('Error deleting sourcemap file:', err);
        } else {
          console.log('Sourcemap file deleted successfully');
        }
        callback();
      });
    },
  }),
  // ...其他插件...
  ],
  };

  在上面的代码中，将 ‘YOUR_AUTH_TOKEN’ 替换为你的 Sentry 认证令牌，’YOUR_ORG’ 和 ‘YOUR_PROJECT’ 替换为你的组织和项目名称。同时，根据你的项目结构和需求，调整 include 和 ignore 配置。