Sentry - X项目 - 落地实战

最新推荐文章于 2024-05-29 09:38:58 发布

weixin_34168880

最新推荐文章于 2024-05-29 09:38:58 发布

阅读量376

点赞数 1

原文链接：https://juejin.im/post/5cc7c2f2f265da039f0f1dc2

版权

项目背景

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

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

思路梳理

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

具体问题

多机器部署

Docker的确可以实现快速搭建sentry服务，但是忽略一个大前提，这一切都是在一台台机器部署一个sentry！
- 实际项目中如果网站访问量很大，一台机器肯定是不够的，万一挂了，没有备份机器会很尴尬；
- 即使一台机器，如果只部署一个sentry实例，机器不能充分利用，资源浪费。
DSN 是sentry 的一个重要概念，可以理解是服务准入的标记

A value which we call a DSN ... it’s actually just a representation of the configuration required by the Sentry SDKs
AUTH TOKEN 是sentry的另一个重要概念，可以理解是```sentry-cli``命令行调用的钥匙。
考虑到上面的顾虑，申请了两台机器，但随之问题就来了。
- 一台机器复制多个 onpremise目录，不同目录中启动service，达到单台机器多个实例的效果。
  - 现象：服务可运行，DSN 和 AUTH TOKEN 都一致，但是上传soucemap的时候失败。分析路径完全一致
  - 分析：参数都一样，分不出要上传到哪个实例。
- 两台机器，分别运行一个sentry服务
  - 现象：服务可运行，DSN 和 AUTH TOKEN 两个值都不一致；
  - 分析：Docker不同机器部署，都会生成新的参数
从官网提供的sentry.io服务来看，只有一个，DSN 和一个AUTH TOKEN ，所以推测应该还有别的方案。调研中...

如果有相同经历的朋友，一定留言指导一下啊

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;
}
复制代码

额外配置

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

机器稳定性

项目上线过程中，单个机器可以抗住的QPS
机器挂了之后的降级方案
待补充

总结

Sentry虽然已经开源，但是X项目接入过程中还是遇到了很多问题，希望大家可以交流，互相避免踩坑。让我们的页面在线上更加稳定

weixin_34168880

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Sentry - X项目 - 落地实战

项目背景Sentry 照着官网搭建好以后，想要看到效果，需要业务接入。盘了一下手里项目，决定以X项目为切入点开刀。本想按照官方API 接入即可，谁料道路之曲折有点出乎想象。本文记录实战过程中的思路，以及遇到的实际问题，拿出来跟大家分享。思路梳理以上两张图描述的是sentry工作原理以及云上部署方案。具体问题多机器部署Docker的确可以实现快速搭建sentry服务，但是忽略...
复制链接

扫一扫