Eine vorläufige Erkundung des vergrabenen Punktesystems

Verwandte Lernempfehlungen: Javascript-Video-Tutorial

Vorwort

In letzter Zeit gibt es selten Zeit, die vorherige Serie nachzuholen, die Ihnen die vergrabenen Punkte schuldet fängt jetzt an zu starten

Warum man sich auf das System konzentrieren muss

im Film

Front-End-Entwicklung Siege Lion codiert gerne, sehr stolz auf die getrennte Entwicklung von Business und UI, verschiedene Designmuster, Algorithmusoptimierung, perfekt Code-Schreiben (Arbeitscode-Welt zuerst), es gibt keine Fehler, das Programm ist perfekt, die Kompatibilität ist Nr. 1, der Code kann eingegeben und widerstanden werden und die Qualität ist hoch. Sie können ganz einfach nach Feierabend einchecken und nach Hause gehen, um sich um Ihr Baby zu kümmern.

In Wirklichkeit

Tatsächlich sind die Entwicklungsumgebung und die Produktionsumgebung nicht identisch, und egal wie perfekt der Testprozess ist, es werden immer noch Tests verpasst. Unter Berücksichtigung der Existenz einer Reihe unsicherer Faktoren wie der Clientumgebung des Benutzers, der Netzwerkumgebung usw. Sie müssen sich also während des Entwicklungsprozesses an die drei Hauptprinzipien erinnern (

)

Es gibt keinen perfekten Code, nur unentdeckte Fehler
Vertrauen Sie niemals der Testumgebung
2. , das gibt es Keine einheitliche Testumgebung. Alle Online-Situationen werden abgedeckt. Wenn es online kein Feedback gibt, zweifeln Sie nicht daran, das Problem sollte sehr tief verborgen sein.
3. Was ist das vergrabene Punktesystem?

Vergrabene Punkte sind wie Kameras in der Stadt, aus Produktsicht Bedenken Sie, dass es die Verhaltensverläufe der Benutzer in unseren Produkten überwachen kann und eine Grundlage für Produktiteration und Projektstabilität bietet.

Für die Front-End-Entwicklung können Sie die Leistung beim Laden von Seitenressourcen, Ausnahmen usw. überwachen, Seitenerfahrung und Gesundheitsindex bereitstellen, eine Grundlage für die nachfolgende Leistungsoptimierung bereitstellen und Ausnahmen und Vorkommensszenarien zeitnah melden. Dies ermöglicht eine rechtzeitige Behebung von Problemen und eine Verbesserung der Projektqualität.

– Alle Informationen auf der Seite werden wahllos erfasst, einschließlich Seitenein- und -austritt, Ereignisklicks usw. Um nützliche Informationen zu erhalten, ist eine Datenlöschung erforderlich
1. Visuelle vergrabene Punkte Punkte
– Erhalten Sie bestimmte Punkte basierend auf der generierten Seitenstruktur und vergraben Sie Punkte separat zur Analyse.
2. Manuelle Vergrabungspunkte für Geschäftscodes
– Entfernen Sie je nach spezifischen und komplexen Unternehmen die Orte, die nicht durch die abgedeckt werden können oben zwei Arten und vergrabene Geschäftscodepunkte

In den meisten Fällen können wir alle Informationsdaten über spurlose vergrabene Punkte sammeln und dann mit den visuellen vergrabenen Punkten zusammenarbeiten, um einen bestimmten Punkt gezielt zu lokalisieren, sodass die meisten Informationen zu vergrabenen Punkten entsprechend analysiert werden können.

Unter besonderen Umständen können Sie mehr Geschäftscode hinzufügen, um die Punkte manuell zu vergraben, um spezielle Szenarien zu bewältigen (in den meisten Fällen hat ein starkes Geschäft nichts mit normalen Klicks und Aktualisierungsereignissen zu tun und muss Informationen melden).

Vergraben Sie die SDK-Entwicklung

Bury Point-Datenerfassung und -analyse

• Basisdaten des Ereignisses
  • Zeitpunkt des Ereignisses
  • Momentaufnahme der Seiteninformationen, als es auftrat
• Seite
  • Seiten-PV, UV
  • Verweildauer der Benutzerseite
  • Seitensprungereignis
  • Die Seite tritt in den Hintergrund ein.
  • Benutzer verlässt die Seite.
• Benutzerinformationen
  • Benutzerklick
  • Klickziel
  • Seiten-AJAX-Anfrage
  Anfrage erfolgreich
• Anfrage fehlgeschlagen
  • Anfrage-Timeout
    Seitenfehlermeldung
  Ressourcenladefehlermeldung
• JS wird ausgeführt Fehlerberichterstattung
  • Neue Leistung beim Laden von Ressourcen
  • Bilder
  Skript
• Leistung beim Laden von Seiten
  • Die oben genannten Daten definieren vergrabene Ereignisse durch
  • 3 Dimensionen
• ·LEVEL: Beschreibt die Protokollebene vergrabener Daten
• INFO: einige Benutzeroperationen, Anforderungserfolg, Ressourcenladen usw. normale Datensätze
• ERROR: JS-Fehlerberichterstattung, Schnittstellenfehlerberichterstattung usw. Datensätze von Fehlern Typen
• DEBUG: Reserviert Entwickler können manuelle Aufrufe verwenden, um Datensätze zurückzugeben, um Fehler zu beseitigen

• TRACK: Der Lebenszyklus des SDK-Objekts zu vergrabenen Punkten verwaltet die gesamten Daten zu vergrabenen Punkten. LEVEL: 描述埋点数据的日志级别
  • INFO：一些用户操作，请求成功，资源加载等等正常的数据记录
  • ERROR： JS报错，接口报错等等错误类型的数据记录
  • DEBUG： 预留开发人员通过手动调用的方式回传排除bug的数据记录
  • WARN： 预留开发人员通过手动调用的方式回传非正常用户行为的的数据记录
• CATEGORY：描述埋点数据的分类
  • TRACK: 埋点SDK对象的生命周期管理整个埋点数据。
    • WILL_MOUNT：sdk对象即将初始化加载，生成一个默认ID，跟踪全部相关事件
    • DID_MOUNTED：sdk对象初始化完成，主要获取设备指纹等等的异步操作完成
  • AJAX: AJAX相关数据
  • ERROR：页面中的异常相关数据
  • PERFORMANCE： 关于性能相关数据
  • OPERATION： 用户操作相关数据
• EVENT_NAME：具体的事件名称

根据上述的维度，我们可以简单设计如下的架构

根据上图的架构，再进行下面的具体代码开发

代理请求

在浏览器中现在主要有 2 种请求方式，一个是 XMLHttpRequest, 一个是 Fetch。

代理 XMLHttpRequest

function NewXHR() {  var realXHR: any = new OldXHR(); // 代理模式里面有提到过
  realXHR.id = guid()  const oldSend = realXHR.send;

  realXHR.send = function (body) {
    oldSend.call(this, body)    //记录埋点
  }
  realXHR.addEventListener('load', function () {    //记录埋点
  }, false);
  realXHR.addEventListener('abort', function () {    //记录埋点
  }, false);

  realXHR.addEventListener('error', function () {    //记录埋点
  }, false);
  realXHR.addEventListener('timeout', function () {    //记录埋点
  }, false);  return realXHR;
}复制代码

代理 Fetch

 const oldFetch = window.fetch;  function newFetch(url, init) {    const fetchObj = {      url: url,      method: method,      body: body,
    }
    ajaxEventTrigger.call(fetchObj, AJAX_START);    return oldFetch.apply(this, arguments).then(function (response) {      if (response.ok) {       //记录埋点
      } else {       //上报错误
      }      return response
    }).catch(function (error) {
      fetchObj.error = error        //记录埋点      
        throw error
    })
  }复制代码

监听页面的 PV，UV

在进入页面时，我们通过算法生成一个唯一 session id，作为这次埋点行为的全局 id，上报用户 id，设备指纹，设备信息。在用户未登录的情况下，通过设备指纹来计算 UV，通过 session id计算 PV。

异常捕获

异常就是干扰程序的正常流程的不寻常事故

RUNTIME ERROR

在JS中可以通过 window.onerror和window.addEventListener('error', callback) 捕捉运行时异常，一般使用window.onerror,它兼容性更好。

window.onerror = function(message, url, lineno, columnNo, error) {    const lowCashMessage = message.toLowerCase()    if(lowCashMessage.indexOf('script error') > -1) {      return
    }    const detail = {      url: url    
      filename: filename,      columnNo: columnNo,      lineno: lineno,      stack: error.stack,      message: message
    }    //记录埋点}复制代码

Script Error

在这里我们过滤了 Script Error, 它产生的原因主要是页面中加载的第三方跨域脚本报错，比如托管在第三方 CDN 中的 js 脚本。这类问题比较难以排查。解决的方法有：

• 打开 CORS（Cross Origin Resource Sharing，跨域资源共享）,如下步骤
  • <srcipt src="another domain/main.js" cossorigin="anonymous"></script>
  • 修改Access-Control-Allow-Origin: * | 指定域名
• 使用 try catch

    <script scr="crgt.js"></script> //加载crgt脚本，window.crgt = {getUser: () => string}
    try{      window.crgt.getUser();
    }catch(error) {      throw error // 输出正确的错误堆栈
    }复制代码

  Nach dem Login kopieren

Promise reject

js 在异步异常时无法通过 onerror 方法捕获 ，在 Promise 对象在 reject 时，同时并没有进行处理时 会抛出一个 unhandledrejection

🎜Fahren Sie entsprechend der Struktur des obigen Bildes mit der folgenden spezifischen Codeentwicklung fort🎜

Derzeit gibt es zwei Hauptanforderungsmethoden für Proxy-Anfragen in Browsern: eine ist XMLHttpRequest und die andere ist Fetch . 🎜

Proxy XMLHttpRequest

window.addEventListener("unhandledrejection", event => {  throw event.reason
});复制代码

Nach dem Login kopieren

Nach dem Login kopieren

Proxy Fetch

window.addEventListener('error', (event) => {  if (event.target instanceof HTMLElement) {    const target = parseDom(event.target, ['src']);    const detail = {      target: target,      path: parseXPath(target),
    }    //  记录埋点
  }
}, true)复制代码

Nach dem Login kopieren

Nach dem Login kopieren

Überwachen Sie den PV, UV der Seite 🎜🎜Beim Aufrufen der Seite generieren wir über einen Algorithmus eine eindeutige Sitzungs-ID als globale ID für das Vergrabungsverhalten , Meldebenutzer-ID, Gerätefingerabdruck, Geräteinformationen. Wenn der Benutzer nicht angemeldet ist, wird UV über den Gerätefingerabdruck berechnet und PV wird über Sitzungs-ID berechnet. 🎜

Abfangen von Ausnahmen🎜🎜Ausnahmen sind ungewöhnliche Vorfälle, die den normalen Ablauf des Programms beeinträchtigen🎜

LAUFZEITFEHLER

🎜 In< In Code>JS können Laufzeitausnahmen über window.onerror und window.addEventListener('error', callback) erfasst werden >window wird verwendet.onerror, was eine bessere Kompatibilität bietet. 🎜

window.addEventListener('click', (event) => {    //记录埋点}, true)复制代码

Nach dem Login kopieren

Nach dem Login kopieren

Skriptfehler

🎜Hier haben wir Skriptfehler herausgefiltert, der hauptsächlich durch in die Seite geladene domänenübergreifende Skripte von Drittanbietern verursacht wird Melden Sie Fehler, z. B. js-Skripte, die in CDNs von Drittanbietern gehostet werden. Diese Art von Problem ist schwieriger zu beheben. Die Lösung ist: 🎜🎜🎜Öffnen Sie CORS (Cross Origin Resource Sharing, domänenübergreifende Ressourcenfreigabe) wie folgt 🎜🎜<srcipt src="another domain/main.js" cossorigin ="anonymous"></script>🎜🎜Modify Access-Control-Allow-Origin: * | Specify domain name🎜🎜🎜🎜Use try Catch</. Code ><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">window.addEventListener(&amp;#39;hashchange&amp;#39;, event =&gt; { const { oldURL, newURL } = event; const oldURLObj = url.parseUrl(oldURL); const newURLObj = url.parseUrl(newURL); const from = oldURLObj.hash &amp;&amp; url.parseHash(oldURLObj.hash); const to = newURLObj.hash &amp;&amp; url.parseHash(newURLObj.hash); if(!from &amp;&amp; !to ) return; // 记录埋点})复制代码</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div>🎜🎜<h4 data-id="heading-14">Promise Reject</h4>🎜<code>js kann bei einer asynchronen Ausnahme nicht von der Methode onerror erfasst werden Tritt auf, wenn das Objekt gleichzeitig abgelehnt und nicht verarbeitet wird Es wird ein unhandledrejection-Fehler ausgegeben, der von der oben genannten Methode nicht abgefangen wird. Daher muss ein separates Behandlungsereignis hinzugefügt werden. 🎜

window.addEventListener("unhandledrejection", event => {  throw event.reason
});复制代码

Nach dem Login kopieren

Nach dem Login kopieren

资源加载异常

在浏览器中，可以通过 window.addEventListener('error', callback) 的方式监听资源加载异常，比如 js 或者 css 脚本文件丢失。

window.addEventListener('error', (event) => {  if (event.target instanceof HTMLElement) {    const target = parseDom(event.target, ['src']);    const detail = {      target: target,      path: parseXPath(target),
    }    //  记录埋点
  }
}, true)复制代码

Nach dem Login kopieren

Nach dem Login kopieren

监听用户行为

通过 addEventListener click 监听 click 事件

window.addEventListener('click', (event) => {    //记录埋点}, true)复制代码

Nach dem Login kopieren

Nach dem Login kopieren

在这里通过组件的 displaName 来定位元素的位置，displaName 表示组件的文件目录，比如 src/components/Form.js 文件导出的组件 FormItem 通过 babel plugin 自动添加属性 @components/Form.FormItem，或者使用者主动给组件添加 static 属性 displayName。

页面路由变化

• hashRouter 监听页面hash变化，对hash进行解析

window.addEventListener('hashchange', event => {  const { oldURL, newURL } = event;  const oldURLObj = url.parseUrl(oldURL);  const newURLObj = url.parseUrl(newURL);  const from = oldURLObj.hash && url.parseHash(oldURLObj.hash);  const to = newURLObj.hash && url.parseHash(newURLObj.hash);  if(!from && !to ) return;  // 记录埋点})复制代码

Nach dem Login kopieren

Nach dem Login kopieren

监听页面离开

通过 addEventListener beforeunload 监听离开页面事件

window.addEventListener('beforeunload', (event) => {    //记录埋点})复制代码

Nach dem Login kopieren

SDK 架构

class Observable {    constructor(observer) {
        observer(this.emit)
    }
    emit = (data) => {        this.listeners.forEach(listener => {
            listener(data)
        })
    }
    listeners = [];
    
    subscribe = (listener) => {        this.listeners.push(listeners);        return () => {            const index = this.listeners.indexOf(listener);            if(index === -1) {                return false
            }            
            this.listeners.splice(index, 1);            return true;
        }
     }
}复制代码

Nach dem Login kopieren

const clickObservable = new Observable((emit) => {    window.addEventListener('click', emit)
})复制代码

Nach dem Login kopieren

然而在处理 ajax，需要将多种数据组合在一起，需要进行 merg 操作,则显得没有那么优雅，也很难适应后续复杂的数据流的操作。

const ajaxErrorObservable = new Observable((emit) => {    window.addEventListener(AJAX_ERROR, emit)
})const ajaxSuccessObservable = new Observable((emit) => {    window.addEventListener(AJAX_SUCCESS, emit)
})const ajaxTimeoutObservable = new Observable((emit) => {    window.addEventListener(AJAX_TIMEOUT, emit)
})复制代码

Nach dem Login kopieren

可以选择 RxJS 来优化代码

export const ajaxError$ = fromEvent(window, 'AJAX_ERROR', true)export const ajaxSuccess$ = fromEvent(window, 'AJAX_SUCCESS', true)export const ajaxTimeout$ = fromEvent(window, 'AJAX_TIMEOUT', true)复制代码

Nach dem Login kopieren

ajaxError$.pipe(
    merge(ajaxSuccess$, ajaxTimeout$), 
    map(data=> (data) => ({category: 'ajax', data; data}))
    subscribe(data => console.log(data))复制代码

Nach dem Login kopieren

通过 merge, map 两个操作符完成对数据的合并和处理。

数据流

项目结构

• core
  • event$ 数据流合并
  • snapshot 获取当前设备快照，例如url，userID，router
  • track 埋点类，组合数据流和日志。
• logger
  • logger 日志类
    • info
    • warn
    • debug
    • error
• observable
  • ajax
  • beforeUpload
  • opeartion
  • routerChange
  • logger
  • track

参考

• www.alibabacloud.com/help/zh/doc…

结尾

自建埋点系统是一个需要前后端一起合作的事情，如果人力不足的情况下，建议使用第三方分析插件，例如 Sentry 就能足够满足大部分日常使用

但还是建议多了解，在第三方插件出现不能满足业务需求的时候，可以顶上。

想了解更多编程学习，敬请关注php培训栏目！

Das obige ist der detaillierte Inhalt vonEine vorläufige Erkundung des vergrabenen Punktesystems. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!