Sentry - X项目 - 落地实战

栏目: 编程语言 · 发布时间: 5年前

内容简介:Sentry 照着官网搭建好以后,想要看到效果,需要业务接入。盘了一下手里项目,决定以X项目为切入点开刀。本想按照官方API 接入即可,谁料道路之曲折有点出乎想象。本文记录实战过程中的思路,以及遇到的实际问题,拿出来跟大家分享。以上两张图描述的是sentry工作原理以及云上部署方案。

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

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

思路梳理

Sentry - X项目 - 落地实战
Sentry - X项目 - 落地实战

以上两张图描述的是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插件来上报异常。这个算是接入时候的踩的一个坑,无奈只好改技术方案,抽离公共组件实现上报。
Sentry - X项目 - 落地实战
Sentry - X项目 - 落地实战
# 当然也可以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调研了一下, reactsan 项目都是控制台直接报错,可采用之前设定的技术方案。

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

    https://sentry.io/sentry
    https://9128da56fafa412312312338e3577395@sentry.io/sentry/1
    https://sentry.io/sentry/api/1/store/?sentry_version=7
    
  • .sentryclirc

    https://sentry.io
    
  • 于是

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

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

以上所述就是小编给大家介绍的《Sentry - X项目 - 落地实战》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

C语言程序开发范例宝典

C语言程序开发范例宝典

2010-1 / 59.00元

《C语言程序开发范例宝典》全面介绍了应用C语言进行开发的各种技术和技巧,全书共分12章,内容包括基础知识、指针、数据结构、算法、数学应用、文件操作、库函数应用、图形图像、系统调用、加解密与安全性、游戏、综合应用等。全书共提供300个实例,每个实例都突出了其实用性。 《C语言程序开发范例宝典》既可作为C程序的初学者学习用书,也可作为程序开发人员、相关培训机构老师和学生的参考用书。一起来看看 《C语言程序开发范例宝典》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具