如何使用前後端鏈路追蹤診斷API調用錯誤原因 - Application Real-Time Monitoring Service

在前端監控中，即便已知API的請求耗時，也無從知曉準確的網路傳輸效能、後端服務的調用鏈路及效能，因而無法快速準確地排查應用API問題。前後端鏈路追蹤功能可以解決此類問題，它會將API請求從前端發出到後端調用的鏈路串聯起來，真實還原代碼執行的完整現場。

前提條件

您已經開通ARMS前端監控和ARMS應用監控，請參見開通ARMS。阿里雲ARMS應用監控需要2.4.5或更高版本，關於其配置，請參見什麼是應用監控。

背景資訊

應用監控可提供API在後端的處理效能及調用鏈路，但這些資料未必能準確反映使用者的真實體驗。前端監控只能監控到API從發送到返回的整體耗時及狀態，無法提供後端服務的調用鏈路及效能資料。在這種情況下，前後端鏈路追蹤功能可將前端與後端串聯起來，給您一站式的問題排查體驗。

配置ARMS前端監控

API與當前應用網域名稱同源

確認前端網站和應用之間是否存在對應關係。
不關閉API自動上報，允許API自動上報。

配置enableLinkTrace為true，允許前後端鏈路追蹤。具體配置為：

<script>
!(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"xxx",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?", enableLinkTrace: true};
with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
})(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");
</script>

API與當前應用網域名稱非同源

確認前端網站和應用之間是否存在對應關係。

配置enableLinkTrace和enableApiCors為true。

<script>
!(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"xxx",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?", 
enableLinkTrace: true, enableApiCors: true};
with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
})(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");
</script>

重要

配置enableApiCors為true，後端服務也需要支援跨域請求及自訂header值，請確認所有請求都配合聯調正常，否則會出現請求失敗的問題。Nginx配置參考如下：

upstream test {
        server 192.168.220.123:9099;
        server 192.168.220.123:58080;
    }
    server {
        listen    5800;
        server_name  192.168.220.123;
        root         /usr/share/nginx/html;
        include /etc/nginx/default.d/*.conf;
        location / {
            proxy_pass http://test;
            proxy_set_header Host $host:$server_port;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Real-PORT $remote_port;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header   EagleEye-TraceID $eagleeye_traceid;
            proxy_set_header   EagleEye-SessionID $eagleEye_sessionid;
            proxy_set_header   EagleEye-pAppName $eagleeye_pappname;
        }

配置ignore，請參見ignore。具體配置為：

let whitelist = [‘api.xxx’,’source3’]; // 白名單。
let blacklist = [‘source2’,’source6’]; // 黑名單。
// 可根據需求，選擇黑白名單（在方法中return true或者false去控制）。
ignore: {
            ignoreApis: [
                function(str) {   // 方法。
                    if (whitelist.includes(str)) {
                        return false;
                    }
                    return true; // 返回true則忽略。
                }]
         }

說明

ignore類似於黑白名單，可以避免部分第三方資源請求的header值被修改，從而防止資源請求出現錯誤。

工作原理

在允許API自動上報的前提下，如果API與當前應用的網域名稱同源，則會在API要求標頭（Request Header）加入兩個自訂Header：EagleEye-TraceID和EagleEye-SessionID。EagleEye-TraceID即串聯前後端鏈路的標識。
如果API與當前應用的網域名稱不同源，則不會在要求標頭添加自訂Header，以保證應用請求可以正常發送。
如需驗證前後端鏈路追蹤配置是否生效，可以開啟控制台查看對應API請求的Request Headers中是否有EagleEye-TraceID和EagleEye-SessionID這兩個標識。
警告
EagleEye-TraceID和EagleEye-SessionID的值有相應的含義，請勿自行產生。

使用情境和案例

通過調用的時間軸，可以知道是網路傳輸還是後端調用導致請求耗時過長，同時單擊後端應用中的方法棧，可以看到本次請求後端的完整調用鏈路。從而根據業務定位是什麼原因導致API錯誤：

當API返回錯誤碼或者商務邏輯錯誤時，定位問題操作如下：
1. 登入ARMS控制台，在左側導覽列選擇前端監控 > 前端列表。
2. 在前端列表頁面頂部選擇目標地區，然後單擊目標應用程式名稱。
3. 在左側導覽列單擊API請求。
4. 在右側的API鏈路追蹤（TOP 20）地區的API失敗列表中，找到相關的API或TraceID，並單擊右側的鏈路追蹤，以查看前端監控的整體耗時和後端應用的調用時序圖。
5. 根據調用的時間軸判斷，耗時間長度的是網路傳輸還是後端調用。
6. 對後端應用單擊方法棧列中的放大鏡表徵圖，可以查看本次請求的完整後端調用鏈，並根據業務定位導致API錯誤的原因。
當API耗時較長時，定位問題操作如下：
1. 登入ARMS控制台，在左側導覽列選擇前端監控 > 前端列表。
2. 在前端列表頁面頂部選擇目標地區，然後單擊目標應用程式名稱。
3. 在左側導覽列單擊API請求。
4. 在右側的API鏈路追蹤（TOP20）地區中，按照請求耗時對API進行降序排列，找到耗時較長的API或者TraceID。
5. 單擊右側的鏈路追蹤連結，以查看前端監控的整體耗時和後端應用的調用時序圖。
  - 如果後端應用處理時間較短，而整體耗時較長，則說明API請求從發送到服務端以及從服務端返回資料到瀏覽器端的網路傳輸耗時較長。此時可以單擊訪問明細，並在查看詳情頁面上查看本次訪問的網路、地區、瀏覽器、裝置、作業系統等資訊。
  - 如果後端應用處理時間較長，則說明後端處理的效能較差。此時可以單擊方法棧欄中的放大鏡表徵圖，並在本地方法棧對話方塊中查看後端鏈路上哪部分內容耗時較長，繼而定位問題。