本地化环境搭建

必备条件

  1. 闲暇内存大于 2G 的服务器环境，sentry 根本配置须要占用至多 2G 内存
  2. docker 环境，新版本须要 docker 版本大于 18+

装置 docker 环境

官网提供本地化装置，须要以 docker 启动
  1. 装置 docker
# 官网装置脚本curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun
  1. 运行环境须要反对 Python3，默认环境为 Python2.7
# 应用 yum 装置，默认 python3 会自带 pip3yum install -y python3
  1. 应用 pip3 装置 docker-compose
Compose 是用于定义和运行多容器 Docker 应用程序的工具。通过 Compose，您能够应用 YML 文件来配置应用程序须要的所有服务。而后，应用一个命令，就能够从 YML 文件配置中创立并启动所有服务。
# 装置 docker-compose 以后文档版本# 形式一：这种形式不太举荐，github目前下载切实是太慢了curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose# 形式二：通过 pip3 工具，方便快捷pip3 install -U docker-compose
  1. 在之后的 sentry 装置过程中发现依赖 docker 版本须要在18+版本以上
我的服务器默认 yum 装置 docker 版本为 13，这里附上 docker 降级踩坑指南
# docker 要求 centOS版本 3.10+# 1. 查看内核版本uname -a# 2. 移除旧版 dockeryum remove docker docker-common docker-selinux docker-engine# 3. 装置相干须要的依赖包，yum-utils 蕴含 yum-config-manager，用于设置镜像源yum install -y yum-utils device-mapper-persistent-data lvm2# 4. 设置镜像源yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo# 5. 装置 docker-ce 默认装置的是最新稳定版，这个下载比较慢，容易断，装置了好几次才装置实现yum install docker-ce

sentry 装置

  1. 拉取源码 onpremise
# 拉取源码git clone https://github.com/getsentry/onpremise.git
  1. 新版本装置比以前简略太多，只须要执行 ./install.sh 即可
# 此过程将初始化所有过程，数据库，集群等等./install.sh
  1. 启动
# 默认端口 9000docker-compose up -d# 重启所有内容docker-compose restart# 本地简略测试curl 127.0.0.1:9000
  1. 故障排除
docker-compose logs <service-name>
  1. nginx 代理 9000 端口，对外拜访
server {   listen       80;   server_name  sentry.example.com;    location / {            proxy_set_header       Host $host;            proxy_set_header       X-Real-IP remote_addr;            proxy_set_header       X-Forwarded-For $proxy_add_x_forwarded_for;            proxy_pass             http://127.0.0.1:9000;   }}

本地化小结

  1. sentry 整体继承了十分多的工具（memcached/redis/postgres/zookeeper/kafka/clickhouse...），十分宏大，这也是其须要至多2G内存反对的起因了，并且适宜集群部署；
  2. 本地化部署慎重考虑前期保护老本
  3. 根本应用其实间接应用线上的就足够了

前端接入 sentry.io

根本流程

这里采纳外网 github 账号形式登入
  1. sentry.io 登入，应用 github 形式登入；
  2. 新建组织
  3. 新建我的项目

  4. 前端代码引入

    在 sentry 中有范例，这里为了不影响主程序加载，改为异步引入形式
  • 主代码文件 a.js，这里放入 sentry 对应引入代码
// 这里以 react 我的项目为例// 官网采纳的是 *，这里改为 tree shaking 局部引入形式import { init } from "@sentry/react";import { Integrations } from "@sentry/tracing";const isDev = false; // 开发环境 or 测试环境const sdn = "新建我的项目中 dsn 配置";export default function initSentry() {  init({    // 版本号，这里的 release 须要与后续 webpack 上传的版本号统一    release: `${release}`,    // 这里能够定义 环境变量，用作辨别不同环境 比方 SIT/UAT/PROD，定义后再 sentry 中能够对应用作筛选    environment: `${environment}`,    dsn: `${dsn}`,    integrations: [new Integrations.BrowserTracing()],    // We recommend adjusting this value in production, or using tracesSampler    // for finer control    tracesSampleRate: 1.0,  });}
  • 异步引入代码
const isDev = false; // 开发环境 or 测试环境/** * 初始化平台 sentry */export const initAsyncSentry = () =>  // 生产环境引入  !isDev && import(/* webpackChunkName: "sentry" */ "./a").then(res => res.default());
  • 到这里前端的日志根本曾经能够进行采集，然而到这里还没有应用到 sentry 的弱小性能，谬误日志还没方法定位到源开发代码；
  1. 上传 sourceMap 到 sentry，借此定位到具体的开发错误代码

  • 我的项目 webpack 打包生产环境须要 sourceMap 模式

    这里须要留神不要把生成的 map 文件上传到生产环境服务器，相当于透露了代码的文件模块构造了
// 1. 生产配置中，设置 devtool 为 hidden-source-map// 这样打包产物中会对应生成 map 文件// 2 生成配置打包压缩的时候，设置 sourceMap 为 true// 压缩打包的文件new TerserWebpackPlugin({  cache: false,  parallel: true, // 启用并行化  // 这里设置 sourceMap 为 true 即可生成对应的配置文件  sourceMap: true,  terserOptions: {    ecma: 5,    warnings: false,    compress: {      drop_debugger: true,      drop_console: true,    },    output: {      comments: false,    },  },});
  • 上传 sourceMap 到 sentry
  1. authToken 举荐在 sentry 中本人新建，Settings -> Account -> API -> Auth Tokens（这里次要思考到多我的项目多环境多权限治理的问题，能够自定义）
  2. ${org} 对应在 settings -> General Settings 中的 Organization Slug 属性，能够自定义；
  3. ${project} 对应在 对应我的项目中 General Settings 中的姓名属性，能够自定义；
  4. ${release} 这里须要自定义版本号，用作辨别和定位每个版本的谬误；
// 应用 sentry 官网提供的 webpack 插件const SentryWebpackPlugin = require("@sentry/webpack-plugin");// 追加 plugins 配置到 webpack 配置中new SentryWebpackPlugin({  authToken: `${authToken}`,  org: `${org}`,  project: `${project}`,  release: `${release}`, // 每次公布的版本号  // 不显示日志  silent: true,  // webpack specific configuration  include: "dist",});
  • 代码托管到 sentry，目前 sentry 反对的仓库治理有 Github/GitLab/Bitbucket/Azure DevOps，对应装置插件，绑定好代码即可
到这一步胜利之后，sentry 即可帮您做到谬误定位到具体代码了

小结

  1. sentry 新建组织、我的项目（用作引入 sentry 谬误抓取代码）
  2. webpack 生产打包反对 sourceMap（用作谬误定位到具体源码）
  3. 上传 map 文件到 sentry 平台（@sentry/webpack-plugin）