Sentry - X项目 - 落地实战

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

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

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

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项目 - 落地实战》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

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

码农书籍

Using Google App Engine

Charles Severance / O'Reilly Media / 2009-5-23 / USD 29.99

With this book, you can build exciting, scalable web applications quickly and confidently, using Google App Engine - even if you have little or no experience in programming or web development. App Eng......一起来看看《Using Google App Engine》这本书的介绍吧!

码农工具