Código para monitorear datos relacionados con el frontend utilizando Javascript

Este artículo introduce la supervisión de datos del frontend de Javascript, después de que el proyecto de desarrollo se complete y se envíe, no hay un sistema de supervisión, es difícil saber si el código publicado se ejecuta correctamente en la máquina del usuario, por lo que es necesario establecer un sistema de supervisión relacionado con el rendimiento del código del frontend.

Por lo tanto, necesitamos realizar los siguientes módulos:

I. Recopilar errores de ejecución de scripts

function error(msg,url,line){
  var REPORT_URL = "xxxx/cgi"; // Recopilar información de los datos del informe
  var m =[msg, url, line, navigator.userAgent, +new Date];// Recopilar información de errores, la dirección de red del archivo de script que se produjo el error, la información del agente de usuario, la hora
  var url = REPORT_URL + m.join('||');// Armar el contenido de la URL del informe de errores
  var img = new Image;
  img.onload = img.onerror = function(){
   img = null;
  };
  img.src = url;// Enviar datos al cgi en el backend
}
// Escuchar el informe de errores
window.onerror = function(msg,url,line){
  error(msg,url,line);
}

A través del sistema de gestión de fondo, podemos ver la información de errores en cada vez que se muestra la página, y a través de esta información podemos ubicar y resolver problemas rápidamente.

　II. Recopilar html5 Información de performance

El objeto performance contiene el tiempo de ejecución de diferentes pasos de ejecución durante todo el ciclo de vida de la carga de la página hasta la finalización de la ejecución. Artículos relacionados con performance: Haga clic aquí para monitorear el rendimiento de la página usando el API de performance.

Calcular la diferencia de tiempo entre diferentes pasos en relación con el tiempo de navigationStart, que se puede recopilar a través de CGI de fondo correspondiente.

function _performance(){
  var REPORT_URL = "xxxx/cgi?perf=";
  var perf = (window.webkitPerformance ? window.webkitPerformance : window.msPerformance ),
   points = ['navigationStart','unloadEventStart','unloadEventEnd','redirectStart','redirectEnd','fetchStart','domainLookupStart','connectStart','requestStart','responseStart','responseEnd','domLoading','domInteractive','domContentLoadedEventEnd','domComplete','loadEventStart','loadEventEnd'];
  var timing = pref.timing;
  perf = perf ? perf : window.performance;
  if( perf && timing ) {
   var arr = [];
   var navigationStart = timing[points[0]];
   for(var i=0,l=points.length;i<l;i++{
     arr[i] = timing[points[i]] - navigationStart;
   }
  var url = REPORT_URL + arr.join("-");
  var img = new Image;
  img.onload = img.onerror = function(){
   img = null;
  }
  img.src = url;
}

A través de la recopilación y estadísticas de la interfaz de fondo, podemos obtener una comprensión detallada del rendimiento de la página.

Tercero: Estadísticas del tiempo de carga de JS y CSS de cada página

Marque con un sello de tiempo antes de que se cargue JS o CSS y con un sello de tiempo después de que se cargue. Envíe los datos al servidor en tiempo real. El tiempo de carga refleja el tiempo de espera de la página en blanco y el tiempo de espera antes de que sea operable.

<script>var cssLoadStart = +new Date</</script>
<link rel="stylesheet" href="xxx.css" type="text/css" media="all">
<link rel="stylesheet" href="xxx1.css" type="text/css" media="all">
<link rel="stylesheet" href="xxx2.css" type="text/css" media="all">
<sript>
  var cssLoadTime = (+new Date()) - cssLoadStart;
  var jsLoadStart = +new Date();
</</script>
<script type="text/javascript" src="xx1.js"></</script>
<script type="text/javascript" src="xx2.js"></</script>
<script type="text/javascript" src="xx3.js"></</script>
<script>
  var jsLoadTime = (+new Date()) - jsLoadStart;
  var REPORT_URL = 'xxx/cgi?data='
  var img = new Image;
  img.onload = img.onerror = function(){
   img = null;
  };
  img.src = REPORT_URL + cssLoadTime + '-' + jsLoadTime;
</</script>

Esto es todo el contenido del artículo, esperamos que sea útil para su aprendizaje y que todos nos apoyen más

Aclaración: Este artículo se ha redactado en línea y pertenece a su autor original. El contenido ha sido proporcionado y subido por los usuarios de Internet, y este sitio web no posee los derechos de propiedad. No se ha realizado una edición humana y no asume ninguna responsabilidad legal. Si encuentra contenido sospechoso de copyright, le invitamos a enviar un correo electrónico a: notice#w3Declaración: El contenido de este artículo se ha obtenido de la red, y pertenece al autor original. El contenido se ha contribuido y subido por los usuarios de Internet, y este sitio web no posee los derechos de propiedad. No se ha realizado una edición humana y no asume ninguna responsabilidad legal. Si encuentra contenido sospechoso de copyright, le invitamos a enviar un correo electrónico a: notice#w