成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue項目前端錯誤收集之sentry

RaoMeng / 3578人閱讀

摘要：我創(chuàng)建了一個名為的項目。錯誤信息查看在后臺找到我們的項目，點擊進去就能看到多了一條錯誤信息。它由以下幾部分組成，分別是協(xié)議公鑰私鑰主機路徑一般為空項目。

sentry簡介

Sentry 是一個開源的錯誤追蹤工具，可以幫助開發(fā)人員實時監(jiān)控和修復系統(tǒng)中的錯誤。其專注于錯誤監(jiān)控以及提取一切事后處理所需的信息;支持幾乎所有主流開發(fā)語言(JS/Java/Python/php)和平臺, 并提供了web來展示輸出錯誤。
sentry官網(wǎng)：https://sentry.io/

sentry安裝

sentry 是一個開源的工具，可以自行搭建。
官方支持兩種安裝和運行 Sentry 服務器的方法，Docker 和 Python。推薦使用 Docker。
當然，對于剛開始接觸 sentry 的同學，也可以直接使用官方提供的免費服務，但是有一些限制。
下面先來介紹一下利用官方的免費服務，在前端項目中如何使用 sentry。

如何在項目中使用sentry

首先需要在 sentry 的官網(wǎng)注冊一個賬號。注冊完選擇新建一個項目，sentry 支持多種框架，在其中選擇 vue 創(chuàng)建項目。我創(chuàng)建了一個名為test的項目。

創(chuàng)建項目頁面會自動跳轉(zhuǎn)到如何配置vue項目頁面。接下來就按照指引在vue代碼里引入 sentry。可以通過 cdn 或者 npm 引入。我們采用 npm 引入。引入的時候需要給 init 函數(shù)傳遞一個 dsn 參數(shù)。這個參數(shù)唯一指定了我們剛才創(chuàng)建的項目，在創(chuàng)建項目的時候系統(tǒng)會自動生成。如果不傳這個參數(shù)，sentry 不會發(fā)送錯誤。

// main.js
import * as Sentry from "@sentry/browser";
import * as Integrations from "@sentry/integrations";
// 在生產(chǎn)環(huán)境中讓sentry報錯
process.env.NODE_ENV === "production" && Sentry.init({
  dsn: "https://[email protected]/1447145",
  integrations: [
    new Integrations.Vue({
      Vue,
      attachProps: true,
    }),
  ],
});

在項目跟目錄下增加.sentryclirc文件，其中的token可以在左上角頭像里的api keys里面獲取。

[auth]
token="your token"

[defaults]
url = https://sentry.io
org = "your org"
project = test

然后我們在代碼里制造一個錯誤，就可以讓 sentry 捕獲了。本地如何模擬線上環(huán)境訪問dist下的文件呢？需要裝一個 http-server ，在dist文件夾下啟動一個http服務就可以了。

npm i http-server 
cd dist
http-server -p 8888

注意：sentry捕獲到的錯誤不會在打印在控制臺中。

在network中可以看到，sentry 發(fā)送了一個錯誤請求，請求參數(shù)如下：

接下來我們就可以在后臺看到剛才上傳的錯誤信息，同時 sentry 也會給你的郵箱發(fā)送一封錯誤郵件。

錯誤信息查看

在后臺找到我們的test項目，點擊進去就能看到多了一條錯誤信息。

點擊信息可以進入信息詳情進行查看。

但是這個錯誤信息是壓縮后的，不能定位到代碼的實際位置。使用意義不大，因此需要上傳 source-map。

上傳source-map

上傳的方式有多種?？梢酝ㄟ^ sentry-cli 通過命令行的方式來上傳 source-map，但是需要手動上傳。也可以采用 webpack-plugin 這個插件，可以在 build 的同時自動上傳 source-map。本文采用自動上傳策略。

項目配置：

// webpack.prod.conf
const SentryCliPlugin = require("@sentry/webpack-plugin");
plugins:[
    new SentryCliPlugin({
        include: "./dist",
        release: process.env.RELEASE_VERSION,
        configFile: "sentry.properties"
    })
]
// main.js
Sentry.init({
    dsn: "https://[email protected]/1447158",
    integrations: [
        new Integrations.Vue({
            Vue,
            attachProps: true
        }),
        new Integrations.RewriteFrames()
    ],
    release: process.env.RELEASE_VERSION
});
// prod.env.js
"use strict";
const release = "test-1";
process.env.RELEASE_VERSION = release;
module.exports = {
    NODE_ENV: ""production"",
    RELEASE_VERSION: `"${release}"`
};

需要保證 plugins 和 Sentry.init 兩個配置中的 release 版本號相同，這樣的話 sentry 才能將 source-map 文件一一對應上。
修改完之后我們重新build一下項目，build的過程比較慢：

之后我們?nèi)ズ笈_可以看見在版本中多了一個 test-1 版本，也就是我們剛剛上傳的版本。

點進去可以看見我們剛才上傳的 source-map 文件。

這時我們重新觸發(fā)一次錯誤，就可以看到具體的出錯位置了。

sentry關(guān)聯(lián)github

在設置->集成里面可以設置 sentry 關(guān)聯(lián)各種服務，如 github、jira 等。關(guān)聯(lián)上 github 后，可以直接為該異常創(chuàng)建issue。

這樣在該異常的詳情頁就可以創(chuàng)建issue到 sentry 這個倉庫了。

創(chuàng)建時可以選擇倉庫，名稱，詳情及指定給誰：

打開 github ，在 sentry 這個倉庫下，發(fā)現(xiàn)多了一個issue，就是剛才我們創(chuàng)建的。

在我們向 github 提交 commit 的時候，如果加上了異常的id，例如這樣：

git commit -m "Fixes TEST-3"

這樣在下次發(fā)版 build 的時候，sentry 會自動將該異常的狀態(tài)從 unresolved 變成 resolved，并會給出本次提交的 diff 地址。

搭建sentry服務

官方給出的有兩種方法可以自行搭建sentry：

python

docker

推薦使用docker。下面來介紹一下通過docker如何搭建sentry。

首先需要下載docker
mac桌面版地址：https://hub.docker.com/editions/community/docker-ce-desktop-mac

其中已經(jīng)集成了docker命令行、docker-compose等。

然后需要去github拉取 Sentry On-Premise，這個是官方提供的通過docker安裝sentry的倉庫，里面介紹了如何一步一步搭建sentry。

創(chuàng)建服務步驟：

cd onpremise
// 創(chuàng)建本地數(shù)據(jù)庫
docker volume create --name=sentry-data && docker volume create --name=sentry-postgres
// 創(chuàng)建環(huán)境配置文件
cp -n .env.example .env 
// 構(gòu)建docker服務
docker-compose build
// 產(chǎn)生秘鑰，將其作為SENTRY_SECRET_KEY加入到.env文件中
// 創(chuàng)建數(shù)據(jù)庫，用交互式的提示生成管理員賬號
docker-compose run --rm web upgrade
// 啟動所有服務
docker-compose up -d

如果過程一切正常的話，現(xiàn)在訪問localhost:9000就能看到sentry的登錄頁面了，用剛才生成的管理員賬號密碼登錄即可。

以后的操作就跟上面介紹的一樣了。

注意事項

利用本地搭建的sentry創(chuàng)建項目的時候，發(fā)現(xiàn)dsn那一欄是空的，系統(tǒng)并沒有自動生成。需要自己拼接這個dsn。它由以下幾部分組成，分別是協(xié)議、公鑰、私鑰、主機、路徑（一般為空）、項目id。

"{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}/{PATH}{PROJECT_ID}"
//類似這樣，把它放在sentry.init中的dsn即可
http://4cf10206ef27409bbb64f68b:a67a0eb5513e43ab883af3f3@localhost:9000/2

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109878.html

相關(guān)文章

  • Vue 項目中接入sentry

    摘要：項目中接入最近在公司的內(nèi)部項目中接入技術(shù)棧，跟蹤運行時錯誤。具體的可以在你的項目中中查看三客戶端設置在客戶端中接入是簡單的，只需要配置插件就可以了。 Vue 項目中接入sentry 最近在公司的內(nèi)部Vue項目中接入sentry技術(shù)棧，跟蹤運行時錯誤。針對這件事分享下，有不完整或者錯誤的地方歡迎交流。[源碼][1] 一、sentry 錯誤日志收集框架 Stop hoping y...

    Magicer 評論0 收藏0

  • Sentry異常監(jiān)控方案部署-前端攻略

    摘要：故而，我們需要在項目出現(xiàn)異常時主動對其進行收集上報，分析原因和影響后制定下一步解決方案。所以，我們需要一款成熟的異常監(jiān)控系統(tǒng)來協(xié)助我們。最近在公司項目中部署了，用于項目中異常監(jiān)控，涵蓋了前端后端。 原文首發(fā)于我的個人博客： https://lonhon.top/ 凡事只要有可能出錯,那就一定會出錯 對于任何一個項目而言，本地測試肯定做不到100%覆蓋，而且，我們也不能保證用戶能按照我們...

    Lorry_Lu 評論0 收藏0

  • sentry使用

    摘要：客戶端安裝步驟根據(jù)使用平臺選擇選擇官網(wǎng)有說明。應用可使用的監(jiān)聽鉤子如下事件，上報成功之后會此事件，可以監(jiān)聽此事件做一些其他的事情，比如上報到其他的平臺等等。 概念 js錯誤日志統(tǒng)計工具，官網(wǎng)文檔 以下說明前提條件都是raven-js 日志收集必要條件 sentry平臺帳號注冊 raven客戶端安裝 sentry服務平臺 進行首頁->新建項目之后，點擊settings,可以設置錯...

    張憲坤 評論0 收藏0

  • 推薦幾個前端開發(fā)插件

    摘要：提高開發(fā)效率簡單的集成到了生成的項目上項目地址一集成管理團隊的信息步奏安裝添加規(guī)則根目錄添加文件，并添加規(guī)則，必須為格式添加到中安裝并添加命令在中添加查看詳情二集成管理團隊編寫規(guī)范步奏安裝 提高開發(fā)效率 簡單的集成到了vue-cli生成的項目上 項目github地址 A Vue.js project Build Setup # install dependencies npm inst...

    張憲坤 評論0 收藏0

  • 推薦幾個前端開發(fā)插件

    摘要：提高開發(fā)效率簡單的集成到了生成的項目上項目地址一集成管理團隊的信息步奏安裝添加規(guī)則根目錄添加文件，并添加規(guī)則，必須為格式添加到中安裝并添加命令在中添加查看詳情二集成管理團隊編寫規(guī)范步奏安裝 提高開發(fā)效率 簡單的集成到了vue-cli生成的項目上 項目github地址 A Vue.js project Build Setup # install dependencies npm inst...

    JowayYoung 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<