從後端到頁面 如何全方位監控 Ruby 應用?

2021-07-05 18:46:49 字數 1809 閱讀 1411

【編者按】本文參考技術分享 ,由 oneapm 工程師補充整理,並且已經徵得原作者的同意。

登入 oneapm 官網,註冊賬號,進入主頁面,選擇「應用監控」,新增乙個應用,選擇「ruby」那個 tab,裡面列出了5個步驟,按照這些步驟就可以設定成功:

現在主要的問題是第二步,那個配置檔案裡面的專案名和你建立的應用的專案名的對應。

按照官方教程說的,重新啟動並部署你的專案,試著訪問幾個頁面,稍等片刻,就能很快在 oneapm 的監控頁面上看到資料了。

或許用 rails 的 notifications 結合 hightcharts 圖表顯示也能實現類似 oneapm 的效果,至少能得到每個頁面的訪問時間,資料庫語句的執行時間,但是現在有更方便的 oneapm,我們就可以嘗試去用它。如果要進一步,還可以去研究那個 gem 的原始碼,知道它是如何實現的。

來簡單說說 ai ruby 探針的功能:

安裝好 oneapm ruby agent 之後進入總覽頁面,能夠對 web 事務響應時間,apdex 值(滿意度),吞吐量,web 慢事務,錯誤率,伺服器資訊,告警事件有個總體了解。

比較中意 web 事務的功能,可以點進具體事務進行分析。如圖,點進 web 事務功能後,可以看到響應時間佔比最高的事務。

為了分析慢事務原因,點進 articles/index 這個較慢的事務,通過 breakdown table 可以看到事務的細分內容。

對資料庫,外部服務也可以進行監控,能監控到 sql 語句。對 rubyvm 的監控也是有的。

錯誤資訊功能也比較有用,不僅可以看到錯誤發生的時間、次數、型別、請求位址,還能看到詳細的堆疊資訊,顯示**行數。

關於應用監控的各種配置,可以在「應用設定」中自行修改,這一點還是比較靈活易用的。

(一)總覽頁面

下圖是總覽頁面,由於屏幅的問題沒有擷取全。在 bi 的總覽頁面我們可以看到該功能的大概顯示,包括響應時間、web 事務、頁面 trace 以及分地域的頁面載入時間等,讓研發或者運維對監控的頁面有乙個大概的了解。

從左邊的功能列表可以看到, oneapm 的 bi 主要是從受訪頁面、ajax、指令碼錯誤、瀏覽器、地理和運營商這幾個維度來監控分析前端頁面的。

(二)受訪頁面

下圖是受訪頁面的功能頁面,可以看到,不但從 5 個維度分解了載入時間,而且還有載入時間的排序,甚至有慢載入追蹤,可以比較詳細的定位到各種資源載入。

還有乙個值得說下的是受訪頁面的這幾個載入時間的維度的區分,oneapm 做的比較有自己的特點,在總覽頁面有對於幾個時間的具體分析注釋。

(三)ajax、頁面錯誤

這兩個維度分別從 ajax 和 https 角度來分析監控頁面的錯誤或者時間緩慢的呼叫頁面,雖然維度不一樣但是介面比較相似,就不給大家一一枚舉了,簡單看一下介面就好了。

(四)瀏覽器、運營商、地理

這三個功能應該算是 oneapm 的 bi 的另外乙個核心功能點了,瀏覽器可以按照將訪問頁面的瀏覽器一一識別出來,方便研發或者運維人員有針對性的優化頁面。

地理介面可以從國內還有國外兩個維度檢視訪問被監控頁面的響應時間等,國內的還可以深入到地級市的使用載入情況。

運營商介面是針對於網路運營商的監控,可以看到各個運營商所提供的網速的情況,而且還可以區分網路制式,做的確實很精細了。

或許通過其他工具例如 rails 的 notifications 結合 hightcharts 圖表也能有類似的效果,但是 oneapm 確實很方便實用的達到了效能監控分析的這一目的。從國內來講,oneapm 確實是效能監控方面比較靠得住的廠家,大家可以免費註冊試用一下。

後端渲染資料到頁面

1 在建立的資料夾下建好相應檔案,如html,js,json等 2 在資料夾下開啟終端,輸入命令 npm init y,初始化生成package.json檔案 3 使用express包建立介面,安裝express,命令為 npm i express d4 在js檔案中引入express,語句為 co...

頁面如何布局與規劃

一 頁面布局與規劃 在網頁製作中,有許多的術語,例如 css html dhtml xhtml等等。在下面的文章中我們將會用到一些有關於html的基本知識,而在你學習這篇入門教程之前,請確定你已經具有了一定的html基礎。下面我們就開始一步一步使用div css進行網頁布局設計吧。所有的設計第一步就...

頁面如何布局與規劃

一 頁面布局與規劃 在網頁製作中,有許多的術語,例如 css html dhtml xhtml等等。在下面的文章中我們將會用到一些有關於html的基本知識,而在你學習這篇入門教程之前,請確定你已經具有了一定的html基礎。下面我們就開始一步一步使用div css進行網頁布局設計吧。所有的設計第一步就...