埋設ポイントシステムの予備調査-jsチュートリアル-php.cn

埋設ポイントシステムの予備調査

関連する学習に関する推奨事項: JavaScript ビデオチュートリアル

序文

雑多最近、前シリーズの埋め合わせに時間をかけることは少なく、ポイントを貯めているシリーズも本格的に動き始めています

ポイント制度が必要な理由

映画

フロントエンド開発攻囲戦のShi Kaiは楽しそうにコードを書いており、ビジネスとUIを別々に開発していることに非常に誇りを持っています。さまざまなデザインパターンとアルゴリズムの最適化が順番に実装されています。コードは完璧です(世界最高の労働コード）、バグはなく、プログラムは完璧で、互換性はNo.1です。コードは高品質で入力およびレジストできます。仕事を終えて帰宅して赤ちゃんの世話をした後も簡単に打刻できます。

実際には

実際には、開発環境と本番環境は同じではなく、テストプロセスがどれほど完璧であっても、テスト漏れは依然として存在します。ユーザーのクライアント環境、ネットワーク環境など、一連の不確定要素の存在を考慮します。したがって、開発プロセスでは 3 つの主要な原則を覚えておく必要があります (

私のナンセンス

)

#テスト環境を決して信頼しないでください
オンラインでフィードバックがない場合は、疑わないでください。問題は次のとおりです。非常に深く、非常に深く隠されています
埋め込みポイントシステムとは

埋め込みポイントは街にあるカメラのようなもので、製品の観点から見ると、製品内でのユーザーの動きを監視できます。その中の行動の軌跡は、製品の反復とプロジェクトの安定性の基礎を提供します。

誰が、いつ、どこで、どのように、何を行うかがデータ収集の基本的な側面です

。

フロントエンド開発の場合、ページリソースの読み込みパフォーマンス、例外などを監視し、ページエクスペリエンスと健全性インデックスを提供し、その後のパフォーマンス最適化の基礎を提供し、例外と発生シナリオをタイムリーにレポートできます。。これにより、問題をタイムリーに修正し、プロジェクトの品質を向上させることができます。

埋められたポイントは、大きく 3 つのカテゴリに分類できます。

痕跡のない埋められたポイント

視覚的な埋め込みポイント
業務コード手動埋め込み

視覚的な埋め込みポイントトレースレス埋め込みポイント典型的なシナリオビジネスデータが必要な場合など、目に見えない埋もれたポイントはカバーできませんシンプルで標準化されたページシナリオシンプルで標準化されたページシナリオ,利点明確なビジネスデータ低開発コスト、オペレータは関連する埋め込みポイントを直接設定可能設定不要、データを追跡可能不十分ですデータを遡ることができず、開発コストが高額ですビジネスデータと関連付けることができず、データを遡ることができませんデータ量が多く、業務データの関連付けができない

コード埋め込みポイント

ほとんどの場合、痕跡のない埋設点を通じてすべての情報データを収集し、視覚的な埋設点と連携して特定の点を特定し、それに応じてほとんどの埋設点情報を分析できます。

特殊な状況では、ビジネスコードを追加して、特殊なシナリオに対処するポイントを手動で埋め込むことができます (ほとんどの場合、強力なビジネスは、通常のクリックや更新イベント、および必要な情報とは何の関係もありません)報告済み)

埋没点 SDK 開発

埋没点データの収集と分析

基本的なイベントデータ
- イベント発生時間
- 発生時のページ情報のスナップショット
ページ
- ページPV、UV
- ユーザーページ滞在時間
- ページジャンプイベント
- ページがバックグラウンドに入る
- ユーザーがページを離れる
ユーザー情報
- ユーザーuid
- ユーザーデバイスのフィンガープリント
- デバイス情報
- ip
- ポジショニング
ユーザー操作の動作
- ユーザーのクリック
  - ターゲットをクリックします
- リクエスト失敗
- リクエストタイムアウト
# ページエラー
リソース読み込みエラー
- JS 実行エラー
新しいリソース読み込みパフォーマンス
画像
スクリプト
ページ読み込みパフォーマンス
上記のデータは、

3 次元を通じて非表示のイベントを定義します

: 埋め込まれたデータのログレベルを記述します。
- : 一部のユーザー操作、リクエストの成功、リソースの読み込みなど、通常のデータレコード
- : JS エラー、インターフェイスエラーなどのデータレコード。
- : 開発者が手動でバグを排除するためにデータレコードを返すために予約されています。呼び出し
- : 開発者が手動呼び出しを通じて異常なユーザー動作のデータレコードを返すために予約されています
: 説明埋め込みポイントデータの分類
- : 埋め込みポイント SDK オブジェクトのライフサイクルによって、埋め込みポイントデータ全体が管理されます。
  - : SDK オブジェクトが初期化およびロードされようとしており、デフォルト ID が生成され、関連するすべてのイベントが追跡されます
  - ：SDKオブジェクトが初期化され、本体のデバイスフィンガープリント等の非同期操作が完了
- ：AJAX関連データ
- : ページ内の例外に関するデータ
- : パフォーマンス関連のデータ
- : ユーザー操作関連data
: 特定のイベント名

上記の次元に従って、次のアーキテクチャを簡単に設計できます

プロキシリクエスト

ブラウザには現在 2 つの主なタイプがあります。リクエストメソッドは 3 つあり、1 つは

XMLHttpRequest

、もう 1 つは

Fetch です。 Agent 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(&#39;load&#39;, function () {    //记录埋点
  }, false);
  realXHR.addEventListener(&#39;abort&#39;, function () {    //记录埋点
  }, false);

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

ログイン後にコピー

Agent 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 `ページに入る前に、アルゴリズムを使用して一意の` セッション ID

を生成します。これは、この埋め込み動作のグローバル ID として機能し、ユーザー ID、デバイスの指紋、およびデバイス情報を報告します。ユーザーがログインしていない場合、

UV はデバイスのフィンガープリントを通じて計算され、PV は セッション ID を通じて計算されます。 例外キャプチャ

例外は、プログラムの通常のフローを妨げる異常な事故です。

実行時エラー

JS で渡すことができます。

window.onerror および window.addEventListener('error', callback) は、ランタイム例外をキャプチャします。通常、window.onerror が使用されます。互換性。

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

ログイン後にコピー

スクリプトエラー

ここでは、

スクリプトエラー

をフィルター処理します。これは主に、ページに読み込まれたサードパーティのクロスドメインスクリプトによって報告されるエラーによって発生します。サードパーティ CDN の

js スクリプトでホストされます。このタイプの問題は、トラブルシューティングがより困難です。解決策は次のとおりです。

CORS

- ModifyAccess-Control-Allow-Origin: * | ドメイン名を指定
try catch

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

ログイン後にコピー

プロミス拒否

js

パスできません非同期例外

onerrorメソッドキャプチャの場合、Promise オブジェクトが拒否され、同時に処理されなかった場合unhandledrejection エラーがスローされ、上記のメソッドでは捕捉されないため、別の処理イベントを追加する必要があります。

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

ログイン後にコピー

资源加载异常

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

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

ログイン後にコピー

监听用户行为

通过 addEventListener click 监听 click 事件

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

ログイン後にコピー

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

页面路由变化

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

window.addEventListener(&#39;hashchange&#39;, 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;  // 记录埋点})复制代码

ログイン後にコピー

监听页面离开

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

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

ログイン後にコピー

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;
        }
     }
}复制代码

ログイン後にコピー

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

ログイン後にコピー

然而在处理 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)
})复制代码

ログイン後にコピー

可以选择 RxJS 来优化代码

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

ログイン後にコピー

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

ログイン後にコピー

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

数据流

项目结构

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