文档中心>腾讯云可观测平台>前端性能监控>接入指南>Aegis SDK 支持获取请求头和返回头

Aegis SDK 支持获取请求头和返回头

最近更新时间:2024-06-25 18:08:21

我的收藏
通过记录自定义请求头和响应头的方式,打通前后端链路。
说明:
目前仅支持 aegis-web-sdk 和 aegis-mp-sdk。

操作步骤

获取 Response Headers

假设有一个接口 https://aegis.qq.com/generateOrderInfo,该接口的有一个自定义的 Response Header x-request-id,值是 monitor,为前后端打通的唯一标识。



假设需要通过记录这个值到 RUM 来打通前后端的链路,实践步骤如下:
1. 将 SDK 升级到最新版本。
2. 修改初始化 SDK 的方式。
new Aegis({
id: 'xxx',
reportApiSpeed: true,
api: {
apiDetail: true, // 上报接口请求参数和返回值
reportRequest: true, // 全量接口上报
reqHeaders: ['sw8'], // 记录 request header
resHeaders: ['x-request-id', 'Content-Type', 'server'] // 记录 response header
},
});
 3. 暴露 unsafe header。
完成步骤1和步骤2后,会发现 `Content-Type` 赋值了,但是 `x-request-id` 和 `server` 还是没有赋值。
此时使用 xhr.getResponseHeader() 去获取相关 header,会发现并没有获取值,而且浏览器会出现报错信息。



说明:
具体报错原因可参见 相关文档
此时需要暴露 unsafe header,给要需要上报的接口加上 Access-Control-Expose-Headers,如下所示:
location /generateOrderInfo {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers 'sw8';
add_header Access-Control-Expose-Headers 'x-request-id, server';
proxy_pass http://9.139.xx.xx:9301/generateOrderInfo;
}
上报效果如下:


获取 Request Headers

获取 request headers 的使用方式与获取 response headers 的方式大致相同,只需要在初始化的时候传入需要标记的 header 即可获取。
new Aegis({
id: 'xxx',
reportApiSpeed: true,
api: {
apiDetail: true, // 上报接口请求参数和返回值
reportRequest: true, // 全量接口上报
reqHeaders: ['sw8'], // 记录 request header
},
});
获取 request header 不会有浏览器的安全限制,添加较为方便。
添加后若接口请求中有 request header,即可在日志中看到相关数据。




自动获取 trace header

目前 aegis sdk 已经实现自动解析 opentelemetry、skywalking、sentry 等 trace 协议的 header,并且自动进行上报,如果用户同时接入具有 trace 能力的 sdk,可以实现 traceid 自动识别功能。




跨域问题

如果接口添加了自定义 header,会导致接口请求跨域,需要对接口进行处理才能上报。例如:下列例子中需在项目的请求添加 `sw8`,在 nginx 中的配置添加 Access-Control-Allow-Headers。
location /generateOrderInfo {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers 'sw8';
add_header Access-Control-Expose-Headers 'x-request-id, server';
proxy_pass http://9.139.xx.xx:9301/generateOrderInfo;
}

常见问题

什么情况下会用到记录请求 request header ?

例如您通过随机 key 给请求添加标记,作为 traceid 的情况;或者您接入除了 aegis 以外的第三方监控 SDK。
具体使用 skywalking 打通前后端的方式可参见 前后端链路打通
结合记录请求 request header,并通过 skywalking 打通前端和后端 API 调用链路后,即可在 RUM 上查看相关前端请求信息、前端请求错误信息和前端性能数据等。