平台接入sentry自托管项目

一、安装 docker

1.Windows Docker 安装

https://www.runoob.com/docker/windows-docker-install.html

2.MacOS Docker 安装

https://www.runoob.com/docker/macos-docker-install.html

使用 Homebrew 安装
手动下载安装

安装好之后，启动终端，通过命令可以检查安装后的 Docker 版本

1 2	$ docker --version Docker version 17.09.1-ce, build 19e2cf6

个人建议 Mac 直接手动下载安装，因为 homebrew 当时安装的时候碰到了一系列问题难以解决

二、python3 环境安装

1.Window 平台安装 Python

打开 WEB 浏览器访问 https://www.python.org/downloads/windows/ ，一般就下载 executable installer，x86 表示是 32 位机子的，x86-64 表示 64 位机子的。

2.MAC 平台安装 Python

MAC 系统都自带有 Python2.7 环境，你可以在链接 https://www.python.org/downloads/mac-osx/ 上下载最新版安装 Python 3.x。
你也可以参考源码安装的方式来安装。

三、sentry 项目代码下载本地执行

代码下载地址： https://github.com/getsentry/self-hosted

项目代码打开后执行 ./install.sh 指令（时间较久）

在安装过程中，会提示您是否要创建用户帐户。如果您要求安装不被提示阻止，请运行./install.sh --skip-user-prompt. （第一次执行建议直接执行 ./install.sh 指令创建自己的账户）

安装成功后打开 docker 执行 docker compose up -d 指令（第一次执行时间较久）

执行成功后即可访问 http://127.0.0.1:9000/

访问 http://127.0.0.1:9000/ 如果出现这样的登录页面，表明 Sentry 部署完成

四、vue 项目 sentry 端配置

Sentry 部署完成之后，需要创建一个项目，这个项目就是对应你的 web 项目，我的项目是 vue 写的，对应语言选择 vue 即可，旁边的 team 表示访问权限组

获取 API Auth Tokens，这个 token 是将来 vue 项目上报程序异常信息到 Sentry 的通信凭证

五、本地项目接入 sentry

@sentry/vue (Sentry’s Vue SDK)
@sentry/tracing (instruments performance data)

# Using yarn
yarn add @sentry/vue @sentry/tracing

# Using npm
npm install --save @sentry/vue @sentry/tracing

Vue2

import Vue from "vue";
import Router from "vue-router";
import * as Sentry from "@sentry/vue";
import { BrowserTracing } from "@sentry/tracing";

Vue.use(Router);

const router = new Router({
  // ...
});

Sentry.init({
  Vue,
  dsn: "https://b1fe70b553f84880bad94839a0acd387@o1280003.ingest.sentry.io/6487277",
  integrations: [
    new BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
    }),
  ],
  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
});

// ...

new Vue({
  router,
  render: h => h(App),
}).$mount("#app");

Vue3

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

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

Sentry.init({
  app,
  dsn: "https://b1fe70b553f84880bad94839a0acd387@o1280003.ingest.sentry.io/6487277",
  integrations: [
    new BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
    }),
  ],
  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
  logErrors: true
});

app.use(router);
app.mount("#app");

此时，本地项目执行报错后，sentry 后台即可捕获到错误信息。

六、上传 sourceMap

到目前为止，vue 项目 sentry 配置已经完成，可以收集错误信息了，在 sentry web 端也能看到详细错误信息，但是 vue 项目经过打包之后，代码是经过压缩的，根据错误信息你是无法定位到源代码究竟是哪一行有问题，因此还需要上传 sourcemap 文件，就是将 vue 项目构建之后的源代码上传到 sentry 服务端，所以我们开始进行 sourceMap 上传

配置@sentry/webpack-plugin 插件构建完成自动上传 sourcemap

官方配置了 webpack 插件@sentry/webpack-plugin 用来在构建之后自动上传 map 文件

执行步骤

从您的 [Account] > API keys 创建一个新的身份验证令牌（步骤四已经创建）
确认您在“Scopes”下选择了 project:write

使用 npm 安装 @sentry/webpack-plugin
Using npm:

$ npm install @sentry/webpack-plugin --save-dev
b. Using yarn:
$ yarn add @sentry/webpack-plugin --dev

项目下创建 .sentryclirc 文件
配置.sentryclirc 文件
更新 vue.config.js 文件配置
更新 sentry.init() 配置

配置.sentryclirc 文件

含义解释：

url：上传的服务器根目录，我这边目前本地搭建，指向本地，等安慕希这边运维搭建好服务之后，即指向搭建好的服务器上。
org：这个可不是瞎写的，还记得注册的时候填的组织吗？不记得？没关系，看下图：
project: 看上图，就是你的项目名字。
token: 这个需要生成，点击下图右上角的 Creat New Token：

更新 vue.config.js 配置

const SentryCliPlugin = require("@sentry/webpack-plugin");

 plugins: [
    new SentryCliPlugin({
    	authToken: process.env.token,
      org: process.env.org,
      project: process.env.project,
      include: './dist', // 作用的文件夹
      release: 'sentry0.0.2', // 一致的版本号
      configFile: '.sentryclirc',
      ignoreFile: '.sentrycliignore',
      ignore: ['node_modules', 'vue.config.js'],
      urlPrefix: '~/static/js'
    })
]

更新 sentry.init() 配置

Sentry.init({
  Vue,
  dsn: 'http://90f19653173948f2b03b5b9fb5751cfa@127.0.0.1:9000/2',
  release: 'sentry0.0.2',   //  更新此处，要保持跟vue.config.js中的release版本号一致
  integrations: [
    new BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ['localhost', 'my-site-url.com', /^\//]
    })
  ],
  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
  logErrors: true
})

七、定位源代码

1.查看发布的版本,从对应版本进入项目

2.查看错误日志

随便找一个错误日志
没有错误,可以在构建前手动创建一个错误看看效果

3.切换配置,查看源码信息

上传sourceMap前只有 Full和Raw两个选项,而且错误日志不是很明确,不能定位到发生错误的地方
sourceMap上传并生效后,如图可以切换Original等选项,切换后可以看到报错的代码内容

Tips

在上传sourceMap的时候会遇到几个坑

安装插件前要先配置.sentryclirc文件,只有插件是无法上传到指定项目的
token为API令牌,需要自己创建,不是错以为是设置中的安全令牌或者其他key
插件方法SentryWebpackPlugin中要设置release参数指定版本,同时Sentry.init方法中也要release参数指定版本,两个版本号需要保持一致,sourceMap才会生效
即便上传了sourceMap和保持release版本号一致,还需要一个文件路径的配置,方便sourceMap定位到要访问的文件,需要指定urlPrefix参数
1. urlPrefix不设置的话,默认为~/,~代表网站的协议和域名
2. map文件一般被webpack打包在根目录/static/js/的文件夹下,如访问https://dsx2016.com,那么 map 文件就是https://dsx2016.com/static/js/xxx.map,所以要指定urlPrefix为"~/static/js"
3. 如果经过nginx等代理导致目录更深一级等,就加入到对应的前缀即可,如果nginx代理网站为https://dsx2016.com/home,那么 map 文件就是https://dsx2016.com/home/static/js/xxx.map,所以要指定urlPrefix为"~/home/static/js",具体的目录看具体的场景,直接看打包好部署的map在哪个文件即可

uniapp 小程序接入 sentry

梨逍遥

代码改变世界，程序员创造未来