web monitoring

Webüberwachung

[Funktionsliste]

• Ermöglichen Sie Benutzern, mehrere Überwachungsseiten zu erstellen
• Statistiken des Benutzerzugriffs aus verschiedenen Dimensionen
• Benutzerdefinierte Abfragezeit
• Verschiedene Diagramme
• Unterstützt benutzerdefinierte Berichterstattung (JS -Fehler, API -Anfragen, Leistungsinformationen)
• Benutzerzugriffspfad -Tracking
• Benutzerdefinierte Schwelle (registrierter Benutzer)
• Automatische Alarmfunktion, Alarm -E -Mail -Erinnerung senden (registrierter Benutzer)

---

[Technische Unterstützung]

• Front-End: Angular5+, Ameisendesign
• Backend: NodeJS+Express
• Datenbank: Mongoose+MongoDB
• Docker: Ein-Klick-Bereitstellung der Docker-Umgebung

---

Die Front-End-Überwachungsplattform konzentriert sich auf die Datenüberwachung von Weberlebnisdaten. Drei Aspekte der Überwachung der Gesundheit einer Webseite:

• Seiten Öffnungsgeschwindigkeit (Geschwindigkeitsmessung)
• Seitenstabilität (JS -Fehler)
• Externe Service Call Erfolgsrate (API)

Analysieren Sie dann die Benutzererfahrung aus verschiedenen Breiten.

• Besuchen Sie die Seite
• Zugangsgeschwindigkeit
• API -Anfrage
• Geographie
• Terminal

Siehe:

http://fex.baidu.com/blog/2014/05/build-performance-monitor-in-7-ways

Alibaba Cloud Front-End-Überwachung

Seiten Öffnungsgeschwindigkeit

Zeitaufwändige Netzwerkdaten können mit der oben genannten Navigations-Timing-Schnittstelle erhalten werden. In ähnlicher Weise kann das Ressourcenzeitpunkt das zeitaufwändige Laden aller statischen Ressourcen auf der Seite erhalten. Über diese Schnittstelle können Sie problemlos DNS, TCP, First Byte, HTML-Übertragung und andere zeitaufwändige Byte, HTML-Übertragung erhalten. Das Schnittstellendiagramm des Navigationszeitpunkts lautet wie folgt:

API -Anfrage

Standardmäßig wird XMLHTTP verwendet, um Benutzeranforderungen abzufangen, und nach erfolgreicher/fehlgeschlagener Zeit die Zeit zählen und die Anfrage melden. Benutzer können manuell mit ** __ ml.api (API, Erfolg, Zeit, Code, MSG) ** melden.

 api:请求接口
 success:上传是否成功( true / false )
 time:耗时( ms )
 code:返回码
 msg:消息( string / object )

JS -Fehler

Standardmäßig wird window.onError verwendet, um Benutzerfehlerskripte anzuhören und sie automatisch zu melden. Einige Front-End-Frameworks, die von Benutzern verwendet werden, fangen JS-Fehler auf, und die Fehlermeldung wird nicht in das Fenster geworfen.onError. Diese Situation erfordert, dass der Benutzer es manuell anruft. Zum Beispiel in Angular2+rufen Sie ** __ ml.Error (errorObj) ** an, wobei Ihr Framework global Fehler fängt

  export class MyErrorHandler implements ErrorHandler {
      handleError ( error ) {
        console . error ( error ) ;
        window . __ml && window . __ml . error && window . __ml . error ( error . stack ||     error ) ;
      }
    }
    @ NgModule ( {
      declarations : [ ] ,
      imports : [ ] ,
      providers : [ { provide : ErrorHandler , useClass : MyErrorHandler } ] ,
      bootstrap : [ ]
    } )
    export class AppModule { }

In Vue:

 import Vue from 'vue'
const errorHandler = ( error , vm ) => {
 console . error ( error ) ;
 window . __ml && window . __ml . error && window . __ml . error ( error ) ;
}
Vue . config . errorHandler = errorHandler ;
Vue . prototype . $throw = ( error ) => errorHandler ( error , this ) ;

Wie man benutzt (einfach !!!)

Webseitenadresse: Web-Monitor

Schritt 1: Erstellen Sie eine Website in der Überwachungsstelle.

Schritt 2: Kopieren Sie die Sonden in der Anwendungskonfiguration auf die Seite "Site (index.html)), die Sie überwachen müssen. Die Mission ist erledigt!

Unterstützung von Mitwirkenden

Ihre Unterstützung ist unsere größte Motivation, voranzukommen.

Alipay:

Wechat: