簡單而完整地體驗一遍sentry的sourcemap服務

時間 2019-11-08

標籤簡單完整體驗一遍 sentry sourcemap 服務简体版

原文原文鏈接

sentry

Sentry是一個日誌平臺, 支持多種語言多種框架, 在接入sentry的同時, 也接入了國內的fundebug, 相對而言, sentry的服務會比較完善, 好比上報控制, cross-original, 40M的sourcemap(若是自行搭建能夠忽略), 支持自行搭建服務.... 固然了, 也很感謝fundebug的技術人員耐心爲我解答了幾個問題javascript

官網

https://sentry.iohtml

具體接入流程(簡單體驗, 不使用框架)

註冊(登陸)->建立團隊->建立項目(這些不細講, 官網對這些步驟的提醒很明確)vue

建立完以後sentry會指引咱們怎麼在代碼層接入
我這裏選擇的是Vue,因爲只是簡單體驗, 這裏我不使用Vue, copy其中的:java

<script src="https://cdn.ravenjs.com/3.20.0/vue/raven.min.js" crossorigin="anonymous"></script>
<script>
    Raven.config('https://xxxxxxxxxxxxx').install();
</script>

新建一個html文件, 並在head標籤內粘貼以上代碼, 而後添加一個能夠點擊的元素:node
```
<body>
    <button id="container">上報</button>
</body>
```

新建一個test.ts(習慣性問題, 具體新建js/ts自行選擇)文件, 簡單寫一個必然報錯的事件:webpack

(() => {
  window.onload = () => {
    document.getElementById('container').addEventListener('click', e => {
      console.log(window['aaa'].aaa)
    }, false)
  }
})()

編譯並生成sourcemap(--inlineSources爲保證sourcemap內有sourceContent, 若是沒有sourceContent, sentry後臺會報找不到test.ts的錯誤, 這個時候須要連同test.ts上傳才能正常使用, 使用webpack時請參考):web
```
tsc test.ts --sourcemap --inlineSources
```
因爲平常項目中靜態資源都放在七牛, 爲保證完整性, 也一樣手動上傳到七牛, 上傳後的可訪問地址爲:npm
```
https://mydomain/assets/test.js
```
在html>head標籤結束前添加script標籤引用tets.js(這裏不須要加crossorigin, 使用fundebug不加的話會報錯):服務器
```
<script src="https://mydomain/assets/tets.js"></script>
```
部署html到服務器, 使其可訪問框架
在sentry中用鼠標點擊左下角API生成一個token:

生成時保證勾選了選項中的
```
project:write
```
sentry-cli上傳sourcemap(注意下載時不要過新的node版本, 當時用9.2.0報錯, 切回到6.11.1正常下載):
```
sudo npm install sentry-cli-binary -g
```
登陸(這樣要使用到上面生成的token):
```
sentry-cli login
```
建立一個release
```
sentry-cli releases -o 團隊名稱 -p 項目名稱 new release名稱
```
注意"release名稱"這個東東, 官方有明確聲明, 在上傳sourcemap到sentry這種作法下, 必需要在Raven初始化時匹配上release, 不然會sentry後臺接收到錯誤上報以後會報找不到該sourcemap的錯誤, 因此, 須要修改script標籤中的Raven.config爲:
```
Raven.config('https://xxxxxxxxxxxxx', {
    release: 'release名稱'
}).install();
```
上傳
```
sentry-cli releases -o 團隊名稱 -p 項目名稱 files release名稱 upload-sourcemaps --url-prefix URL_PREFIX DIR
```
其中的URL_PREFIX必須你要與js文件訪問的路徑保持一致, 即:
```
https://mydomain/assets
```
DIR爲你的本地sourcemap目錄(我我的作法是把sourcemap提取到一個名爲sourcemaps的目錄下, 這樣就不用管有其餘文件影響)
訪問剛剛部署的這個html, 點擊, 使其上報一次錯誤, network中會有這樣的一個post請求:

sentry控制檯上會出現一個Unresolved Issues, 點擊查看詳細

sentry會根據sourcemap的內容去解析出這一個錯誤的位置