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;
}
複製代碼