之前的WEB專案一直缺少一種通用的前端埋點方案，用來收集使用者體驗的指標，苦於沒有方便的手段。

要麼要對系統做較多的改動，但是怕影響系統穩定性，一直沒有動；

要麼用百度分析，谷歌分析等，但是系統大多運行於內部網路，無法觀測前端應用，即使可以連外網，也需要把這些資料掌握到自己手中，便於內部進行分析。

最近新做的H5即時聊天專案，後端使用Skywalking來進行呼叫鏈追蹤分析，一般認為它只用來觀測後端服務，比如呼叫鏈分析，介面效能，資料庫效能，記憶體使用情況等。

但是檢視Skywalking8.2.0發現新增了一些特性，可以用來直接觀測前端頁面效能，前端的渲染速度，前端請求後端介面報錯資訊（ajax XMLHttpRequest ，fetch， Axios, SuperAgent, OpenApi等），這些資訊是獲取終端使用者體驗的最有效指標。

甚至PV（page views，頁面瀏覽量），UV（unique visitors，獨立訪客數），瀏覽量前 N 的頁面（Top N Page Views）等指標。這些資料可以為產品隊伍最佳化他們的產品提供線索。

突然眼前一亮，這正是我們需要的啊！整合簡單，自帶頁面展示，對於後端來說簡直是幸福照進了腦殼殼！

dashboard增加web browser專案

page選項卡

#安裝瀏覽器埋點元件npm install skywalking-client-js --save-devimport ClientMonitor from 'skywalking-client-js';// 報告資料到 `http:// + window.location.host + /browser/perfData` ClientMonitor.register({  //collector是後端skywalking-aop地址，這裡需要考慮跨域問題，最好用代理遮蔽  collector: 'http://127.0.0.1:12800',  service: 'test-ui',  pagePath: location.href,  enableSPA: true, //單頁應用  vue: Vue, //報告vue報錯資訊  serviceVersion: 'v1.0.0',});

整合就這麼簡單，然後刷一刷頁面，在skywalking-ui中檢視吧。

需要注意兩點：

npm install skywalking-client-js預設匯入進來的是最新3.0版本，如果有F12有skywalking報錯資訊，需要手工修改package.json版本為1.0collector是後端skywalking-aop地址，這裡需要考慮跨域問題，最好用代理比如nginx遮蔽

埋點資料自動上傳

錯誤日誌

這裡以釘釘為例，建立組織後，進入群設定->群助手->新增機器人->自定義機器人，即可生成webhook地址，重要的是這都是免費的！！免費的！！免費的！！

還有其他你感興趣的機器人，比如github機器人，gitlab機器人，如果你做devops自動化整合，透過此機器人，可以把devops你關心的動作都通知到釘釘群中。一個釘釘群可以新增N個群助手機器人呢！！！

釘釘機器人設定

我的告警機器人