Skip to main content

Probe deployment

Deployment instructions​

Probe deployment can be done in two ways: manual and automatic.

Manual embedding code​

Manual embedding is to manually add the browser probe (JS code) to the page by the R & D personnel, or inject the probe into the page through Nginx and Apache to collect the performance data of the page.

Advantage

  • Applications and pages to be monitored can be customized and embedded.
  • Many-to-many front-end and back-end applications Ajax is associated with transactions and tracked across applications.
  • The browser probe can be placed on the CDN for acceleration to improve the probe download speed.

Automatic embedded code​

Automatic code embedding is to automatically inject the browser probe (JS code) into the Web page of the system application by means of the system application, and automatically generate the Web application corresponding to the system application in the tone cloud Web application list. When the application page is accessed, the browser probe transmits the collected performance data to the data center for processing. Select the application in the Keynote Listening Cloud Web Application List to perform data analysis on the application.

Advantage

  • The operation is simple and the program code does not need to be changed manually.
  • The one-to-one front-end and back-end Ajax is associated with the transaction. The Ajax request can be associated and tracked to the transaction and slow transaction corresponding to the system application to locate the front-end and back-end association problem. At the same time, the main HTML of the page can be tracked to the server transaction.

Precautions

  • Front-end and back-end separated applications (such as React, Angular, Vue and other front-end frameworks) do not support automatic embedding, but can use manual embedding, and also support the full stack traceability function.

Deployment process​

Manual embedding code​

  1. Select Web>Overview in the left navigation bar to enter the application list page. Click the button in the upper right corner Add an app of the page.

  2. Create a new application name. The name cannot be repeated.

  3. Customize the threshold.

  4. Get the probe.

    Click Enable and choose to download the probe or get the JS external link.

  5. Deploy the probe.

    Deploy the JS file tingyun-rum. JS in an accessible environment, such as Nginx, the static resource document directory of Apache, or through CDN. The probe address referenced by the subsequent embedded code should also be changed to this address.

    If you use the "JS external chain" mode to use the probe, you can directly use the generated JS external chain address.

  6. The location where the probe is deployed.

    The probe will be introduced in the head of the page or application to be monitored to the position shown in the following figure.

    img

  7. View the report.

After the embedded code is successfully deployed to the production environment, wait for 5 minutes, and you can see the corresponding Web application in the application list of the Tingyun Web console.

Note added: Injection probe method.​

There are three ways to inject the probe, and any one of them can be used.

  • Manual writing

    Copy the code segment and add it directly in the corresponding position.

  • Nginx

    Use the ngx_HTTP_sub_module module for replacement. Please refer to Official Documents the installation and configuration documents of the ngx_HTTP_sub_module module.

    Examples are as follows:

    Location/{
    sub_filter '</head>' '<script type="text/javascript">var TINGYUN_COOKIE_VALUE=document.cookie;document.cookie="TINGYUN_DATA=; expires=Thu, 01 Jan 1970 00:00:01 GMT;";document .cookie="TINGYUN_DATA=; expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/";(function(d,s,id){if(/(MSIE [0-8].\d+) /.test(navigator.userAgent)){return;}"use strict";var __TINGYUN=function(t){function e(t){return function(e){return"Array"===t&&Array.isArray?Array .isArray(e):Object.prototype.toString.call(e)==="[object "+t+"]"}}function n(t,e,n){if(t&&n&&b(n)){var r =t[e];if(!r||!r._wrapped){var i=n(r,e);return i&&(i._wrapped=!0),t[e]=i,i}}} function r(e,n){return function(r){if(t[h].hook&&t[h].hook.eventCb&&f(r)){var i={originalCallback:e,eventHandlerType:n};return t[ h].hook.eventCb.call(this,arguments,i)}return e.apply(this,arguments)}}function i(t,e,n){return n===k?r(t,e) :(t.handleEvent=r(t.handleEvent,e),t)}function o(t){return b(t)}function a(t){return L(t)&&b(t.handleEvent)}function u (t){var e;return o(t)?e=k:a(t)&&(e=j),{isValid:t&&e,listenerType:e}}function s(t){return function(){var e=arguments[0],n=arguments[1],r=arguments[2],o=!0;r&&L(r)&&r[y]&&(o=!1);var a=u(n), s=a.isValid,l=a.listenerType;if(o&&O.indexOf(e)>-1&&s){var c;if(n[_]&&n[_][this])c=n[_][this ];else{var p=i(n,E,l);l===k&&(n[_]||(n[_]={},n[_][T]=0),n[ _][this]={listener:p,options:arguments[2]},n[_][T]++,c=n[_][this])}c&&(c.listener&&(arguments[1] =c.listener),c.options&&(arguments[2]=c.options))}return t&&t.apply(this,arguments)}}function l(t){return function(e,n){var r;try {r=t&&t.apply(this,arguments)}finally{try{if(n&&O.indexOf(e)>-1){var i=n[_];i&&i[this]&&i[this].listener&&(null! =i[this].options?this.removeEventListener(e,i[this].listener,i[this].options):this.removeEventListener(e,i[this].listener),i[this]=null,i[T]--,i[T]<=0&&(n[_]=null,delete n[_]))}}catch(o){}}return r }}function c(){t.EventTarget&&(n(t.EventTarget.prototype,"addEventListener",function(t){return s(t)}),n(t.EventTarget.prototype,"removeEventListener",function( t){return l(t)}))}function p(){Object.getOwnPropertyDescriptor&&Object.defineProperty&&O.forEach(function(e){var n="on"+e,r=Object.getOwnPropertyDescriptor(t.HTMLElement.prototype ,n),o=r.get,a=r.set;Object.defineProperty(t.HTMLElement.prototype,n,{get:function(){return o.apply(this,arguments)},set:function( ){var t=arguments[0];return t&&(arguments[0]=i(t,d,k)),a&&a.apply(this,arguments)},configurable:!0,enumerable:!0})} )}function f(e){return e&&e.target instanceof t.HTMLElement&&e.currentTarget instanceof t.HTMLElement}function v(){return t.HTMLElement&&(c(),p()),t[h].listenerHooked=! 0,t[h]}var h="__TINGYUN",y="__ty_event_patch_disable",g="click",m="submit",E="addEventListener",d="onProperty",_="__TY_ELEMENT_CB", T="__TY_CB_COUNTER",b=e("Function"),L=e("Object"),O=[g,m],k=1,j=2;t[h]||(t[h ]={}),t[h].hook||(t[h].hook={}),t[h].hook.eventCb=null;var C=v();return C}(window) ;var js,tjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return;}js=d.createElement(s);js.id=id;js.async=true; js.src="//wkbrs1.tingyun.com/js/XG5y_j9ehF4.js";tjs.parentNode.insertBefore(js,tjs);})(document,"script","tingyun_agent");</script></head>';
    sub_filter_once on;
    }
    • Apache

    Using Apache as a Web container for content replacement requires the use of mod_substitute the and [mod_filter](http://httpd.apache .org/docs/current/mod/mod_filter.html) modules. Apache requires 2.4 and above. The example uses Apache 2.4:

    <Location />
    AddOutputFilterByType SUBSTITUTE text/html
    Substitute 's%<head>%<head><script type="text/javascript">var TINGYUN_COOKIE_VALUE=document.cookie;document.cookie="TINGYUN_DATA=; expires=Thu, 01 Jan 1970 00:00:01 GMT; ";document.cookie="TINGYUN_DATA=; expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/";(function(d,s,id){if(/(MSIE [0-8]. \d+)/.test(navigator.userAgent)){return;}"use strict";var __TINGYUN=function(t){function e(t){return function(e){return"Array"===t&&Array. isArray?Array.isArray(e):Object.prototype.toString.call(e)==="[object "+t+"]"}}function n(t,e,n){if(t&&n&&b(n)) {var r=t[e];if(!r||!r._wrapped){var i=n(r,e);return i&&(i._wrapped=!0),t[e]=i,i }}}function r(e,n){return function(r){if(t[h].hook&&t[h].hook.eventCb&&f(r)){var i={originalCallback:e,eventHandlerType:n}; return t[h].hook.eventCb.call(this,arguments,i)}return e.apply(this,arguments)}}function i(t,e,n){return n===k?r(t ,e):(t.handleEvent=r(t.handleEvent,e),t)}function o(t){return b(t)}function a(t){return L(t)&&b(t.handleEvent) }function u(t){var e;return o(t)?e=k:a(t)&&(e=j),{isValid:t&&e,listenerType:e}}function s(t){return function( ){var e=arguments[0],n=arguments[1],r=arguments[2],o=!0;r&&L(r)&&r[y]&&(o=!1);var a=u( n),s=a.isValid,l=a.listenerType;if(o&&O.indexOf(e)>-1&&s){var c;if(n[_]&&n[_][this])c=n[_ ][this];else{var p=i(n,E,l);l===k&&(n[_]||(n[_]={},n[_][T]=0) ,n[_][this]={listener:p,options:arguments[2]},n[_][T]++,c=n[_][this])}c&&(c.listener&&(arguments [1]=c.listener),c.options&&(arguments[2]=c.options))}return t&&t.apply(this,arguments)}}function l(t){return function(e,n){var r;try{r=t&&t.apply(this,arguments)}finally{try{if(n&&O.indexOf(e)>-1){var i=n[_];i&&i[this]&&i[this].listener&& (null!=i[this].options?this.removeEventListener(e,i[this].listener,i[this].options):this.removeEventListener(e,i[this].listener),i[this]=null,i[T]--,i[T]<=0&&(n[_]=null,delete n[_]))}}catch(o){}}return r }}function c(){t.EventTarget&&(n(t.EventTarget.prototype,"addEventListener",function(t){return s(t)}),n(t.EventTarget.prototype,"removeEventListener",function( t){return l(t)}))}function p(){Object.getOwnPropertyDescriptor&&Object.defineProperty&&O.forEach(function(e){var n="on"+e,r=Object.getOwnPropertyDescriptor(t.HTMLElement.prototype ,n),o=r.get,a=r.set;Object.defineProperty(t.HTMLElement.prototype,n,{get:function(){return o.apply(this,arguments)},set:function( ){var t=arguments[0];return t&&(arguments[0]=i(t,d,k)),a&&a.apply(this,arguments)},configurable:!0,enumerable:!0})} )}function f(e){return e&&e.target instanceof t.HTMLElement&&e.currentTarget instanceof t.HTMLElement}function v(){return t.HTMLElement&&(c(),p()),t[h].listenerHooked=! 0,t[h]}var h="__TINGYUN",y="__ty_event_patch_disable",g="click",m="submit",E="addEventListener",d="onProperty",_="__TY_ELEMENT_CB", T="__TY_CB_COUNTER",b=e("Function"),L=e("Object"),O=[g,m],k=1,j=2;t[h]||(t[h ]={}),t[h].hook||(t[h].hook={}),t[h].hook.eventCb=null;var C=v();return C}(window) ;var js,tjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return;}js=d.createElement(s);js.id=id;js.async=true; js.src="//10.128.2.24:8588/js/lNXvexXCq6I.js";tjs.parentNode.insertBefore(js,tjs);})(document,"script","tingyun_agent");</script>%in'
    </Location>

    Notice

    • If you use <meta> tags in your HTML to specify encoding, place the <meta> tag immediately after the <head> tag, and place the browser probe immediately after the last <meta> tag.
    • Please do not directly use the address of the document JS. SRC. Please copy the code and address after creating a new application. If you use CDN or relative path, please change the address by yourself.

    Nginx example:

    Location/{
    sub_filter '<meta content="text/html;charset=utf-8">' '<meta content="text/html;charset=utf-8"><script type="text/javascript"> var TINGYUN_COOKIE_VALUE = document .cookie; document.cookie = "TINGYUN_DATA=; expires=Thu, 01 Jan 1970 00:00:01 GMT;"; document.cookie = "TINGYUN_DATA=; expires=Thu, 01 Jan 1970 00:00:01 GMT;"; path =/"; (function (d, s, id) { if(/(MSIE [0-8].\d+)/.test(navigator.userAgent)){return ;} "use strict";var __TINGYUN=function (){function n(n){return function(t){return "Array"===n&&Array.isArray?Array.isArray(t):Object.prototype.toString.call(t)==="[object " +n+"]"}}function t(n,t,e){if(n&&e&&f(e)){var r=n[t];if(!r||!r._wrapped){var o=e( r,t);return o&&(o._wrapped=!0),n[t]=o,o}}}function e(n,t){return function(){if(window[a].hook&&window[a ].hook.eventCb){var e={originalCallback:n,eventHandlerType:t};return window[a].hook.eventCb.call(this,arguments,e)}return n.apply(this,arguments)}} function r(n){return function(){var t=arguments[0],r=arguments[1],o=arguments[2],i=!0;return o&&l(o)&&o[c]&&(i =!1),i&&y.indexOf(t)>-1&&r&&(arguments[1]=e(r,w)),n&&n.apply(this,arguments)}}function o(){t(HTMLElement.prototype," addEventListener",function(n){return r(n)})}function i(){Object.getOwnPropertyDescriptor&&Object.defineProperty&&y.forEach(function(n){var t="on"+n,r=Object.getOwnPropertyDescriptor(HTMLElement .prototype,t),o=r.get,i=r.set;Object.defineProperty(HTMLElement.prototype,t,{get:function(){return o.apply(this,arguments)},set:function( ){var n=arguments[0];return n&&(arguments[0]=e(n,d)),i&&i.apply(this,arguments)},configurable:!0,enumerable:!0})})} function u(){return window.HTMLElement&&(o(),i()),window[a].listenerHooked=!0,window[a]}var a="__TINGYUN",c="__ty_event_patch_disable",p="click",s="submit",w="addEventListener",d="onProperty",f=n("Function "),l=n("Object"),y=[p,s];window[a]||(window[a]={}),window[a].hook||(window[a]. hook={}),window[a].hook.eventCb=null;var g=u();return g}(); var js, tjs = d.getElementsByTagName(s)[0]; if (d.getElementById (id)) {return;} js = d.createElement(s); js.id = id; js.async = true; js.src = "//10.128.5.248:8588/js/jVR5d0mH9fQ.js"; tjs .parentNode.insertBefore(js, tjs); })(document, "script", "tingyun_agent"); </script>';
    sub_filter_once on;
    }

    Apache example:

    <Location />
    AddOutputFilterByType SUBSTITUTE text/html
    Substitute 's%<meta content="text/html;charset=utf-8">%<meta content="text/html;charset=utf-8"><script type="text/javascript">var TINGYUN_COOKIE_VALUE= document.cookie;document.cookie="TINGYUN_DATA=; expires=Thu, 01 Jan 1970 00:00:01 GMT;";document.cookie="TINGYUN_DATA=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/";(function(d,s,id){if(/(MSIE [0-8].\d+)/.test(navigator.userAgent)){return;}"use strict";var __TINGYUN= function(t){function e(t){return function(e){return"Array"===t&&Array.isArray?Array.isArray(e):Object.prototype.toString.call(e)==="[ object "+t+"]"}}function n(t,e,n){if(t&&n&&b(n)){var r=t[e];if(!r||!r._wrapped){var i= n(r,e);return i&&(i._wrapped=!0),t[e]=i,i}}}function r(e,n){return function(r){if(t[h]. hook&&t[h].hook.eventCb&&f(r)){var i={originalCallback:e,eventHandlerType:n};return t[h].hook.eventCb.call(this,arguments,i)}return e.apply( this,arguments)}}function i(t,e,n){return n===k?r(t,e):(t.handleEvent=r(t.handleEvent,e),t)}function o( t){return b(t)}function a(t){return L(t)&&b(t.handleEvent)}function u(t){var e;return o(t)?e=k:a(t) &&(e=j),{isValid:t&&e,listenerType:e}}function s(t){return function(){var e=arguments[0],n=arguments[1],r=arguments[2], o=!0;r&&L(r)&&r[y]&&(o=!1);var a=u(n),s=a.isValid,l=a.listenerType;if(o&&O.indexOf(e)> -1&&s){var c;if(n[_]&&n[_][this])c=n[_][this];else{var p=i(n,E,l);l===k&& (n[_]||(n[_]={},n[_][T]=0),n[_][this]={listener:p,options:arguments[2]},n[ _][T]++,c=n[_][this])}c&&(c.listener&&(arguments[1]=c.listener),c.options&&(arguments[2]=c.options))} return t&&t.apply(this,arguments)}}function l(t){return function(e,n){var r;try{r=t&&t.apply(this,arguments)}finally{try{if(n&&O.indexOf (e)>-1){var i=n[_];i&&i[this]&&i[this].listener&&(null!=i[this].options?this.removeEventListener(e,i[this].listener, i[this].options):this.removeEventListener(e,i[this].listener),i[this]=null,i[T]--,i[T]<=0&&(n[_]=null,delete n[_]))}} catch(o){}}return r}}function c(){t.EventTarget&&(n(t.EventTarget.prototype,"addEventListener",function(t){return s(t)}),n(t.EventTarget .prototype,"removeEventListener",function(t){return l(t)}))}function p(){Object.getOwnPropertyDescriptor&&Object.defineProperty&&O.forEach(function(e){var n="on"+e,r= Object.getOwnPropertyDescriptor(t.HTMLElement.prototype,n),o=r.get,a=r.set;Object.defineProperty(t.HTMLElement.prototype,n,{get:function(){return o.apply(this ,arguments)},set:function(){var t=arguments[0];return t&&(arguments[0]=i(t,d,k)),a&&a.apply(this,arguments)},configurable:! 0,enumerable:!0})})}function f(e){return e&&e.target instanceof t.HTMLElement&&e.currentTarget instanceof t.HTMLElement}function v(){return t.HTMLElement&&(c(),p()) ,t[h].listenerHooked=!0,t[h]}var h="__TINGYUN",y="__ty_event_patch_disable",g="click",m="submit",E="addEventListener",d=" onProperty",_="__TY_ELEMENT_CB",T="__TY_CB_COUNTER",b=e("Function"),L=e("Object"),O=[g,m],k=1,j=2;t [h]||(t[h]={}),t[h].hook||(t[h].hook={}),t[h].hook.eventCb=null;var C=v ();return C}(window);var js,tjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return;}js=d.createElement(s);js.id =id;js.async=true;js.src="//10.128.2.24:8588/js/lNXvexXCq6I.js";tjs.parentNode.insertBefore(js,tjs);})(document,"script","tingyun_agent");</script>%in'
    </Location>

Automatic embedded code​

Select the Server application, inject the browser probe, and click Enable.

image-20200715144253690

Java and.NET languages are currently supported.

Verify probe deployment is successful​

Access the embedded code page through the Chrome browser, press F12, and then search for "action" in the network. If there is action interface data, the embedded code is successful.

The action interface uploads performance data after successful embedding.