前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >skywalking展示http请求和响应

skywalking展示http请求和响应

作者头像
十毛
发布于 2021-11-24 05:26:38
发布于 2021-11-24 05:26:38
3K00
代码可运行
举报
运行总次数:0
代码可运行

使用skywalking跟踪请求的时候,是看不到http请求的参数的,这样不方便定位问题。本文通过自定义的方式(ActiveSpan.tag),实现了http请求和响应的输出,方便快速定位问题

效果图

可以在请求中看到自定义请求信息input和返回值output,方便快速定位问题

实现请求和响应的输出

  • 添加依赖
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<dependency>
    <groupId>org.apache.skywalking</groupId>
    <artifactId>apm-toolkit-trace</artifactId>
    <version>8.7.0</version>
    <scope>provided</scope>
</dependency>
  • 使用ActiveSpan.tag输出到skywalking
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
ActiveSpan.tag("input", sb.toString());
  • 实现http请求和返回值的的输出

因为HttpServletRequestHttpServletResponse中的body只能读取一次,如果在Filte中读取的话,应用本身就读取不到,所以需要使用ContentCachingRequestWrapperContentCachingResponseWrapper

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@Slf4j
@Component
public class ApmHttpInfo extends HttpFilter {
    private static final ImmutableSet<String> IGNORED_HEADERS;
    static {
        Set<String> ignoredHeaders = ImmutableSet.of(
                        "Content-Type",
                        "User-Agent",
                        "Accept",
                        "Cache-Control",
                        "Postman-Token",
                        "Host",
                        "Accept-Encoding",
                        "Connection",
                        "Content-Length")
                .stream()
                .map(String::toUpperCase)
                .collect(Collectors.toSet());
        IGNORED_HEADERS = ImmutableSet.copyOf(ignoredHeaders);
    }

    @Override
    public void doFilter(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws IOException, ServletException {
        ContentCachingRequestWrapper requestWrapper = new ContentCachingRequestWrapper(request);
        ContentCachingResponseWrapper responseWrapper = new ContentCachingResponseWrapper(response);

        try {
            filterChain.doFilter(requestWrapper, responseWrapper);
        } finally {
            try {
                //构造请求信息: 比如 curl -X GET http://localhost:18080/getPerson?id=1 -H 'token: me-token' -d '{ "name": "hello" }'
                //构造请求的方法&URL&参数
                StringBuilder sb = new StringBuilder("curl")
                        .append(" -X ").append(request.getMethod())
                        .append(" ").append(request.getRequestURL().toString());
                if (StringUtils.hasLength(request.getQueryString())) {
                    sb.append("?").append(request.getQueryString());
                }

                //构造header
                Enumeration<String> headerNames = request.getHeaderNames();
                while (headerNames.hasMoreElements()) {
                    String headerName = headerNames.nextElement();
                    if (!IGNORED_HEADERS.contains(headerName.toUpperCase())) {
                        sb.append(" -H '").append(headerName).append(": ").append(request.getHeader(headerName)).append("'");
                    }
                }

                //获取body
                String body = new String(requestWrapper.getContentAsByteArray(), StandardCharsets.UTF_8);
                if (StringUtils.hasLength(body)) {
                    sb.append(" -d '").append(body).append("'");
                }
                //输出到input
                ActiveSpan.tag("input", sb.toString());

                //获取返回值body
                String responseBody = new String(responseWrapper.getContentAsByteArray(), StandardCharsets.UTF_8);
                //输出到output
                ActiveSpan.tag("output", responseBody);
            } catch (Exception e) {
                log.warn("fail to build http log", e);
            } finally {
                //这一行必须添加,否则就一直不返回
                responseWrapper.copyBodyToResponse();
            }
        }
    }
}

参考

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/10/21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
现代浏览器探秘(part3):渲染 [每日前端夜话(0x12)]
这是关于浏览器内部工作原理系列的第3部分。 之前,我们介绍了多进程架构和导航流程。 在这篇文章中,我们将看看渲染器进程内部发生了什么。
疯狂的技术宅
2019/03/27
1.4K0
现代浏览器探秘(part3):渲染 [每日前端夜话(0x12)]
现代浏览器探秘(part4):事件处理 [每日前端夜话(0x14)]
现代浏览器探秘(part1):架构 现代浏览器探秘(part2):导航 现代浏览器探秘(part3):渲染
疯狂的技术宅
2019/03/27
1.4K0
现代浏览器探秘(part4):事件处理 [每日前端夜话(0x14)]
使用 RAIL 模型评估前端性能 [每日前端夜话(0x09)]
RAIL 是一种以用户为中心的性能模型。每个网络应用均具有与其生命周期有关的四个不同方面,且这些方面以不同的方式影响着性能:
疯狂的技术宅
2019/03/27
8050
使用 RAIL 模型评估前端性能 [每日前端夜话(0x09)]
前端-动画大乱炖
作为一只前端开发者,我们的使命就是在满足产品需求、实现交互设计的基础上,将最好的体验呈现给用户爸爸们。在保证性能的同时,我们通常会给页面加一些动态效果,以增强页面的表现力并提升页面的交互体验。故将前端实现动效的几种常用方式整理成此篇小结,以求温故而知新。
grain先森
2019/03/29
9450
前端-动画大乱炖
11个最好的JavaScript动态效果库[每日前端夜话0x3E]
当我想要在网上找一个简洁的 Javascript 动效库时,总是发现很多“推荐”的库都是缺乏持续维护的。
疯狂的技术宅
2019/03/27
3.9K0
11个最好的JavaScript动态效果库[每日前端夜话0x3E]
给用户一个否减弱动画效果的选择[每日前端夜话0x8B]
你有没有看到过这样一种简洁的技术【http://bradfrost.com/blog/post/reducing-motion-with-the-picture-element/】,它基于 prefers-reduced-motion 媒体查询,将 <source media=""> 用于 <picture> 元素来提供动图(或不提供动图)?
疯狂的技术宅
2019/06/28
8090
给用户一个否减弱动画效果的选择[每日前端夜话0x8B]
7个开放式的前端面试题 [每日前端夜话0x2C]
前端开发人员在为最终用户设计体验时需要充分掌控其可用性和可访问性。这个问题让面试官知道求职者对这些标准和最佳实践的了解。
疯狂的技术宅
2019/03/27
8290
7个开放式的前端面试题 [每日前端夜话0x2C]
用惰性加载优化 React 程序[每日前端夜话0x6D]
惰性加载是一种优化 Web 应用和移动应用的旧技术。非常直截了当 —— 如果在某一时刻资源没有被查看或需要,就不要渲染它们。例如,如果我们有一个要显示的文章列表,开始时应该只渲染视口上的内容。这意味着其他元素将在以后按需呈现(当它们位于视口中或即将在视口上时)。
疯狂的技术宅
2019/05/21
2.7K0
高清ICON SVG解决方案(上) - 腾讯ISUX
随着硬件快速的发展,Retina技术发展至今,目前Google Nexus6的devicePixelRatio已经到了3.5,虽然目前主流的Retina显示器还是以devicePixelRatio = 2的为主,但是为了更好的用户体验,前端和视觉同学经常都要为了各种图标能够在Retina屏幕下高清显示而头痛。下面先介绍下目前的一些常规的解决方案。 1.多倍图片 目前用的比较多的做法是兼容devicePixelRatio = 2 就做实际图片大小的两倍,devicePixelRatio= 3就做三倍,有些人可
腾讯ISUX
2018/06/29
3.3K1
一步步教你用实现HTML5 SVG动画效果 [每日前端夜话(0x16)]
SVG是一种基于XML的,用于定义缩放矢量图形的标记语言。 它允许你通过在2D平面中确定的一组点来绘制路径、曲线和形状。 此外你还可以通过在这些路径上添加动态属性(例如笔触,颜色,粗细,填充等)来生成动画。
疯狂的技术宅
2019/03/27
2.5K0
一步步教你用实现HTML5 SVG动画效果 [每日前端夜话(0x16)]
现代浏览器探秘(part 1):架构 [每日前端夜话(0x0E)]
在这个由4部分组成的系列文章中,我们将介绍Chrome浏览器从高级架构到渲染管道的具体细节。 如果你想知道浏览器是如何将你的代码转换为功能性网站的,或者你想知道为什么需要使用某些特定技术来提高性能,那么本系列非常适合你。
疯狂的技术宅
2019/03/27
1.1K0
现代浏览器探秘(part 1):架构 [每日前端夜话(0x0E)]
移动端 Web 渲染解决方案
秋招 H5 移动端(面向微信)设计师出的落地页的动画层数有30层左右,在通过 bodymovin 导入前端页面中后再加载好素材之后仍有5秒左右黑屏渲染动画 目前前端渲染有以下方案
Fred Liang
2018/08/02
3.7K0
移动端 Web 渲染解决方案
Web动画性能介绍
帧率(FPS):描述每秒播放的帧数,单位为 Hz 或者 frame/s (帧/秒)。
前端GoGoGo
2018/08/27
8670
Web动画性能介绍
React教程:组件,Hooks和性能 [每日前端夜话0x36]
正如 我们的React教程第一部分 【点击直达】中所指出的,开始使用 React 相对容易。首先使用 Create React App(CRA)初始化一个新项目,然后开始开发。不过遗憾的是,随着时间的推移,代码可能会变得难以维护,特别是在你不熟悉 React 的情况下。组件有可能会变大,或者你可能最终得到一堆不是组件的组件,最终你可能会到处编写重复的代码。
疯狂的技术宅
2019/03/27
2.7K0
React教程:组件,Hooks和性能 [每日前端夜话0x36]
前端动效讲解与实战
本文将从各个角度来对动画整个体系进行分类,并且介绍各种前端动画的实现方法,最后我们将总结在实际开发中的各个场景的动画选择方案。
2020labs小助手
2022/09/26
2.8K0
用 MelonJS 开发一个游戏[每日前端夜话0xD9]
游戏开发并不需要局限于使用 Unity 或 Unreal Engine4 的用户。JavaScript 游戏开发已经有一段时间了。实际上,最流行的浏览器(例如Chrome,Firefox和Edge)的最新版本提供了对高级图形渲染(例如WebGL【https://get.webgl.org/】)的支持,从而带来了非常有趣的游戏开发机会。
疯狂的技术宅
2019/10/29
1.6K0
用 MelonJS 开发一个游戏[每日前端夜话0xD9]
前端图片优化机制
IMWeb前端团队
2017/12/28
3.2K0
前端图片优化机制
2020前端性能优化清单(五)
当用户请求一个页面时,浏览器获取 HTML 构造 DOM,获取 CSS 构造 CSSOM,然后通过匹配 DOM 和 CSSOM 生成一个渲染树。只要需要解析 JavaScript 时,浏览器就会延迟开始渲染页面的时间。作为开发人员,我们必须明确地告诉浏览器立即开始渲染页面。可以通过给脚本添加 HTML 中的 defer 和 async 属性。
WecTeam
2020/05/06
2.1K0
2020前端性能优化清单(五)
JavaScript的工作原理:引擎、运行时和调用堆栈 [每日前端夜话(0x13)]
随着JavaScript变得越来越流行,越来越多的团队正在利用他们为技术栈中做多个级别的支持:前端、后端、混合应用、嵌入式设备等等。
疯狂的技术宅
2019/03/27
1K0
JavaScript的工作原理:引擎、运行时和调用堆栈 [每日前端夜话(0x13)]
14个最好的 JavaScript 数据可视化库[每日前端夜话0x42]
你的程序有多么依赖数据?即使应用程序不完全面向业务,你也可能需要管理面板、仪表板、性能跟踪以及用户非常喜欢的类似分析功能的数据。
疯狂的技术宅
2019/04/23
6.2K0
14个最好的 JavaScript 数据可视化库[每日前端夜话0x42]
推荐阅读
相关推荐
现代浏览器探秘(part3):渲染 [每日前端夜话(0x12)]
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验