跳到主要内容

探针部署

部署说明​

探针部署可采用两种方式：手工嵌码和自动嵌码。

手工嵌码​

手工嵌码是通过研发人员手工将浏览器探针(JS 代码)添加到页面中，或运维通过Nginx、Apache将探针注入到页面中，采集页面性能数据。

优势：

  • 可自定义嵌入需要监控的应用和页面。
  • 多对多的前后端应用Ajax与事务关联，跨应用追踪。
  • 浏览器探针可放到CDN加速，提高探针下载速度。

自动嵌码​

自动嵌码是借助系统应用将浏览器探针（JS代码）自动注入到系统应用的Web页面中，并在基调听云Web应用列表中自动生成系统应用所对应的Web应用，当应用页面被访问时，浏览器探针将采集的性能数据传输到数据中心处理，在基调听云Web应用列表选择所属应用，即可对该应用进行数据分析。

优势

  • 操作简单，无需手工更改程序代码。
  • 一对一的前后端Ajax与事务关联，Ajax请求可以关联追踪到系统应用对应的事务和慢事务，定位前后端关联问题，同时页面主HTML可以追踪到server事务。

注意事项

  • 前后端分离应用（例如：React, Angular, Vue 等前端框架）不支持自动嵌码，可采用手工嵌码方式，同样支持全栈溯源功能。

部署流程​

手工嵌码​

  1. 在左侧导航栏中选择终端应用，进入应用列表页面。点击页面右上角的新建应用按钮。

  2. 选择WEB

  3. 新建应用名称，名称不可重复。

  4. 获取探针。

    点下一步，选择下载探针或获取JS外链。

  5. 部署探针。

    将JS文件部署在可以访问的环境,例如Nginx、Apache的静态资源文档目录或通过CDN部署，后续嵌码引用的探针地址也要改为此地址。

    若使用“JS外链”方式使用探针，直接使用生成的JS外链地址即可。

  6. 部署探针的位置。

    将在需要监控的页面或者应用的head中引入探针到如下图位置。

  7. 查看报表。

嵌码成功部署到生产环境后，等待5分钟，即可在基调听云Web控制台的应用列表中看到对应的Web应用。

补充说明：注入探针方法。​

注入探针方式有三种，任意一种都可以。

  • 手工写入

    将代码段拷贝，直接添加在对应的位置中即可。

  • Nginx

    通过ngx_http_sub_module模块进行替换，ngx_http_sub_module模块的安装及配置文档请参考 官方文档 。

    示例如下：

    location / {
    sub_filter  '</head>' '<script type="text/javascript">!function(t,e,n,a,r){var c="__ty_web_inject_guard",i="__ty_web_tpl_guard",o="https:",s="http:",d="//";function g(){try{var t=[].slice.call(arguments);g.q.push(t)}catch(e){}}function f(t){var e,a="tingyun_agent",r=n.getElementsByTagName("head")[0];!n.getElementById(a)&&r&&((e=n.createElement("script")).id=a,e.async=!0,e.crossorigin="anonymous",e.src=t,r.appendChild(e))}try{if(!e[i]){g.q=[],e[a]=g,e.TINGYUN_COOKIE_VALUE=n.cookie;var h="TINGYUN_DATA=; expires=Thu, 01 Jan 1970 00:00:01 GMT;";n.cookie=h,n.cookie="".concat(h,"path=/"),e[i]=!0}if(!e[c]){if(!/(MSIE [0-6].\\d+)/.test(e.navigator.userAgent)){var y={};t(y);var _,u,v=y.config||{};try{_=e.location.protocol}catch(m){}var p=v.addr;if(p?u=_===o?p.https:_===s?p.http:p.other:0!==(u=r||"").indexOf(o+d)&&0!==u.indexOf(s+d)&&(0===u.indexOf(d)&&(u=u.substring(2)),u&&(_!==o&&_!==s&&(_=o),u=_+d+u)),u)n.getElementsByTagName("head")[0]?(f(u),e[c]=!0):e.addEventListener&&(e.addEventListener("DOMContentLoaded",(function(){try{f(u)}catch(m){}})),e[c]=!0)}try{if("PerformanceLongTaskTiming"in e){var T="entries",l=g.po={};l[T]=[];var E=l.observer=new PerformanceObserver((function(t){try{l[T]&&(l[T]=l[T].concat(t.getEntries()))}catch(t){}}));E.observe({entryTypes:["longtask"]})}}catch(m){}}}catch(m){}}(function(ty_tpl){},window,document,"TingyunWeb","10.128.9.80:30103/js/tingyun-origin-206.js");</script>
    <script type="text/javascript">window.TingyunWeb("init",{"domain":"10.128.9.80:30103","token":"de54884bd6f740299de69f0514a45055","key" : "bm-M1UsmGG4","id" : "zm_K-IIie_E","ajax" : {"bodyMaxSize" : 10},"requestTracing": {"propagators" : [ "tingyun" ]},"replay" : {"sampleRate" : 0.1},"webVitals" : {"ttiThreshold" : 4000}})</script></head>';
    sub_filter_once on;
    }

  • Apache

    使用Apache作为Web容器进行内容替换需要使用 mod_substitute 和 mod_filter 两个模块。Apache要求 2.4 以及以上版本。 示例使用 Apache 2.4：

    <Location />
    AddOutputFilterByType SUBSTITUTE text/html
    Substitute 's%</head>%<script type="text/javascript">!function(t,e,n,a,r){var c="__ty_web_inject_guard",i="__ty_web_tpl_guard",o="https:",s="http:",d="//";function g(){try{var t=[].slice.call(arguments);g.q.push(t)}catch(e){}}function f(t){var e,a="tingyun_agent",r=n.getElementsByTagName("head")[0];!n.getElementById(a)&&r&&((e=n.createElement("script")).id=a,e.async=!0,e.crossorigin="anonymous",e.src=t,r.appendChild(e))}try{if(!e[i]){g.q=[],e[a]=g,e.TINGYUN_COOKIE_VALUE=n.cookie;var h="TINGYUN_DATA=; expires=Thu, 01 Jan 1970 00:00:01 GMT;";n.cookie=h,n.cookie="".concat(h,"path=/"),e[i]=!0}if(!e[c]){if(!/(MSIE [0-6].\\d+)/.test(e.navigator.userAgent)){var y={};t(y);var _,u,v=y.config||{};try{_=e.location.protocol}catch(m){}var p=v.addr;if(p?u=_===o?p.https:_===s?p.http:p.other:0!==(u=r||"").indexOf(o+d)&&0!==u.indexOf(s+d)&&(0===u.indexOf(d)&&(u=u.substring(2)),u&&(_!==o&&_!==s&&(_=o),u=_+d+u)),u)n.getElementsByTagName("head")[0]?(f(u),e[c]=!0):e.addEventListener&&(e.addEventListener("DOMContentLoaded",(function(){try{f(u)}catch(m){}})),e[c]=!0)}try{if("PerformanceLongTaskTiming"in e){var T="entries",l=g.po={};l[T]=[];var E=l.observer=new PerformanceObserver((function(t){try{l[T]&&(l[T]=l[T].concat(t.getEntries()))}catch(t){}}));E.observe({entryTypes:["longtask"]})}}catch(m){}}}catch(m){}}(function(ty_tpl){},window,document,"TingyunWeb","10.128.9.80:30103/js/tingyun-origin-206.js");</script>
    <script type="text/javascript">window.TingyunWeb("init",{"domain" : "10.128.9.80:30103","token":"de54884bd6f740299de69f0514a45055","key" : "bm-M1UsmGG4","id" : "zm_K-IIie_E","ajax" : {"bodyMaxSize" : 10},"requestTracing" : {"propagators" : [ "tingyun" ]},"replay" : {"sampleRate" : 0.1},"webVitals" : {"ttiThreshold" : 4000}})</script></head>%in'
    </Location>

    注意：

    • 如果您的HTML中使用了<meta>标签来指定了编码，应该将<meta>标签紧接在<head>标签之后，并且将浏览器探针紧接在最后一个<meta>标签之后。
    • 请勿直接使用文档js.src的地址，请到新建应用后拷贝代码和地址，若使用CDN或相对路径，也请自行更改地址。

自动嵌码​

选择Server应用 ，注入浏览器探针，点击启用即可。

目前支持Java、.NET两种语言。

验证探针部署成功​

通过Chrome浏览器访问嵌码页面，按F12，然后在network中搜索 “action”，若有action接口数据，即为嵌码成功。

action接口为嵌码成功后上传性能数据。