Sentry - X项目 - 落地实战

时间  2019-12-06 标签 sentry 项目 落地 实战

项目背景

Sentry 照着官网搭建好之后，想要看到效果，须要业务接入。盘了一下手里项目，决定以X项目为切入点开刀。本想按照 官方API 接入便可，谁料道路之曲折有点出乎想象。
javascript

本文记录实战过程当中的思路，以及遇到的实际问题，拿出来跟你们分享。html

思路梳理

以上两张图描述的是sentry工做原理以及云上部署方案。前端

具体问题

多机器部署

  • Docker的确能够实现快速搭建sentry服务，可是忽略一个大前提，这一切都是在一台台机器部署一个sentry！vue

    • 实际项目中若是网站访问量很大，一台机器确定是不够的，万一挂了，没有备份机器会很尴尬；
    • 即便一台机器，若是只部署一个sentry实例，机器不能充分利用，资源浪费。

  • DSN 是sentry 的一个重要概念，能够理解是服务准入的标记java

    A value which we call a DSN ... it’s actually just a representation of the configuration required by the Sentry SDKsreact

  • AUTH TOKEN 是sentry的另外一个重要概念，能够理解是```sentry-cli``命令行调用的钥匙。webpack

  • 考虑到上面的顾虑，申请了两台机器，但随之问题就来了。nginx

    • 一台机器 复制多个 onpremise目录，不一样目录中启动service，达到单台机器多个实例的效果。
      • 现象：服务可运行，DSN 和 AUTH TOKEN 都一致，可是上传soucemap的时候失败。分析路径彻底一致
      • 分析：参数都同样，分不出要上传到哪一个实例。
    • 两台机器，分别运行一个sentry服务
      • 现象：服务可运行，DSN 和 AUTH TOKEN 两个值都不一致；
      • 分析：Docker不一样机器部署，都会生成新的参数

  • 从官网提供的sentry.io服务来看，只有一个，DSN 和 一个AUTH TOKEN ，因此推测应该还有别的方案。调研中...web

若是有相同经历的朋友，必定留言指导一下啊docker

Vue项目接入有点不一样

  • 想固然的认为前端都是JS项目，直接按照官网提供的CDN接入方式接入便可，这多是最经济实惠的接入方式。无需业务开发，编译过程当中在模板head里面找地方塞入这两行便可。
<script src="https://cdn.ravenjs.com/3.26.4/raven.min.js" crossorigin="anonymous"></script>
<script>Raven.config('https://3042a92815a94e15ae949b717464c470@sentry.io/1401863').install();</script>
复制代码
  • 按照这么作的结果是：VUE项目，语法异常控制台报错了，没有上报到sentry。点开报错看，控制台的错误是vue抛console.error，因此推断vue已经对项目中的错误进行了拦截。又对官网文档进行了查阅，发现vue项目须要借助vue插件来上报异常。这个算是接入时候的踩的一个坑，无奈只好改技术方案，抽离公共组件实现上报。

# 固然也能够CDN方式接入，具体可参见官方文档

import Vue from 'vue';
import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';

Raven
    .config('https://9128da56fafa4fd4bb7d3e38e3577395@sentry.io/sentry//1')
    .addPlugin(RavenVue, Vue)
    .install();

复制代码
  • VUE踩了坑，别的项目呢？写Demo调研了一下，react 和 san 项目都是控制台直接报错，可采用以前设定的技术方案。

webpack

  • 设计总体流程的时候，想借助webpack完成两个事情：

sourcemap上传到sentry系统

  • sourcemap上传，利用官方提供的插件 sentry-webpack-plugin 便可完成（只是能够上传单个机器，须要一个AUTH TOKEN , 多个机器还未解决）

产出HTML的head位置，打入JS引用及调用。

  • 但愿看到的效果
<html>
    <head>
        <title>TEST Page</title>
        <script src="https://cdn.ravenjs.com/3.26.4/raven.min.js" crossorigin="anonymous"></script>
        <script>Raven.config('https://3042a92815a94e15ae949b717464c470@sentry.io/1401863').install();</script>
    </head>
...
</html>
复制代码
  • 写了插入页面的插件，可是webpack3 却不支持：compiler.hooks.compilation.tap 报错：Cannot read property 'compilation' of undefined
// 页面插入元素插件
class HTMLinsertPlugin {
    constructor(options) {
        this.options = options.scripts;
    }
    apply(compiler) {
        compiler.hooks.compilation.tap('HTMLinsertPlugin', compilation => {
            // Hook into `htmlWebpackPluginAlterAssetTags`
            // !! Careful this will change in the upcoming html webpack plugin version !!
            compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync('HTMLinsertPlugin',
                // You can use either `head` or `body` and either `push` or `unshift`:
                (htmlPluginData, callback) => {
                    this.options.forEach(ele => {
                        htmlPluginData.head.push(ele);
                    });
                    // htmlPluginData.head.push();
                    callback(null, htmlPluginData);
                }
            );
        });
    }
}
复制代码

webpack3 用模板变量实现

  • 修改webapack
new HtmlWebpackPlugin({
    ...
    sentryCDN: 'https://cdn.ravenjs.com/3.26.4/raven.min.js',
    sentryScript:'Raven.config('https://3042a92815a94e15ae949b717464c470@sentry.io/1401863').install();'

})
复制代码
  • 修改html
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.sentryCDN %>"></script>
<script type="text/javascript">
    <%= htmlWebpackPlugin.options.sentryScript %>
</script>
复制代码

后续Todo

  • 升级webpack4

编译联网

就在欢呼官方提供的sentry-webpack-plugin强大的时候，再次遇到了问题。公司流程提交代码后，会指定公机器进行编译，而这台机器是没法访问外网的，致使编译后上传sentry服务的时候失败。好在找到一台能够访问外网的机器进行编译。

ngxin

基本配置说明

  • 域名须要经过nginx proxy_pass到本机

  • Root URL. sentry建立好以后有一件事是设置root_url，这个将会影响DSN

    • Root URL 设置为：https://sentry.io/sentry
    • DSN就会是：https://9128da56fafa412312312338e3577395@sentry.io/sentry/1，
    • 报警发送请求就会是：https://sentry.io/sentry/api/1/store/?sentry_version=7

  • .sentryclirc

    • sentry-webpack-plugin 插件的文件中须要设置url
    • 此时url只能设置成：https://sentry.io

  • 因而

# /sentry 上报接口
location ^~ /sentry/ {
    proxy_pass http://localhost:9000/;
}

# 非 /sentry uri 正常访问
location / {
    proxy_pass http://localhost:9000;
}
复制代码

额外配置

  • 跨域
  • 上传大小限制
  • 安全闲置
  • ... 就不单独列举了

机器稳定性

  1. 项目上线过程当中，单个机器能够抗住的QPS
  2. 机器挂了以后的降级方案
  3. 待补充

总结

Sentry虽然已经开源，可是X项目接入过程当中仍是遇到了不少问题，但愿你们能够交流，互相避免踩坑。让咱们的页面在线上更加稳定

联系我们 沪ICP备13005482号-10