在前端監控中,即便已知API的請求耗時,也無從知曉準確的網絡傳輸性能、后端服務的調用鏈路及性能,因而無法快速準確地排查應用API問題。前后端鏈路追蹤功能可以解決此類問題,它會將API請求從前端發出到后端調用的鏈路串聯起來,真實還原代碼執行的完整現場。
前提條件
您需要先通過npm方式安裝探針,具體操作,請參見以npm方式接入前端監控。
背景信息
默認前端監控和應用監控都是自動打通的,通過前端監控和會話追蹤都能查看端到端的請求追蹤數據。當您使用OpenTracing協議(開源Trace ID,即uber-trace-id)的情況下,需要您手動將前端監控的JavaScript配置與可觀測鏈路 OpenTelemetry 版前后端打通。
配置參數
當您通過npm方式安裝探針時,需要完成以下參數配置。
const BrowserLogger = require('alife-logger');
const __bl = BrowserLogger.singleton({
pid:"xxx", // 站點ID
appType:"web",
enableLinkTrace:true,
linkType: 'tracing', // 鏈路追蹤類型:默認為arms,使用ARMS私有協議,會傳EagleEye開頭的幾個header;可以改為tracing,即使用jaeger協議,會傳uber-trace-id這個header
enableApiCors: true // 是否允許請求跨域及自定義header,默認值為false,設置為true后則需要后端服務支持
});
enableApiCors:true :需要后端服務支持請求跨域及自定義header值,否則請求會失敗,如下圖所示。
若請求失敗,您可以參考以下配置處理,以在Node.js應用中配置為例:
//用于設置允許跨域訪問該服務. app.all('*', function (req, res, next) { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'Content-Type,uber-trace-id'); // linkType: 'tracing' 時,header值需要允許 uber-trace-id;linkType: 'arms'時,header值需要支持:EagleEye-TraceID、EagleEye-SessionID、EagleEye-pAppName res.header('Access-Control-Allow-Methods', '*'); next(); });
enableLinkTrace:true :開啟后
如果API請求與頁面域名同源時,則默認會在header中增加traceId的透傳,實現前后端鏈路追蹤。
如果API請求與頁面域名非同源時,要實現前后端鏈路追蹤,則需要同時配置enableApiCors:true,并且需要后端服務支持請求跨域及自定義header值。
重要請確認所有請求都配合聯調正常,否則會出現請求失敗的問題。若請求失敗,請參見上述在Node.js應用中配置的舉例來處理。
linkType: 'tracing' :
arms(默認):使用ARMS私有協議,會傳EagleEye開頭的幾個header。
tracing:使用Jaeger協議,會傳uber-trace-id這個header。