本文介紹如何通過Log ServiceSDK接入Web的使用者體驗資料。
前提條件
已建立1.1.0及以上版本的全棧可觀測執行個體（推薦）。具體操作，請參見建立全棧可觀測執行個體。
安裝和初始化
在日誌應用地區的智能營運頁簽下，單擊全棧可觀測。
在執行個體列表中，單擊目標執行個體。
重要該執行個體需為1.1.0及以上版本。
在左側導覽列中，選擇。
在接入資料對話方塊中，完成如下配置。
單擊WEB，然後單擊下一步。
配置基礎資訊。
參數
說明
環境
設定環境資訊後，當您將不同環境（開發、測試、整合）中的Web使用者體驗資料接入到同一個執行個體中時，資料中將被添加開發環境資訊，便於您區分不同開發環境中的Web使用者體驗資料。
服務名
設定服務名後，當您將不同的服務（網站、業務、部門）中的Web使用者體驗資料接入到同一個執行個體中時，資料中將被添加服務資訊，便於您區分不同服務中的Web使用者體驗資料。
錯誤上報
開啟錯誤上報開關，表示允許SDK上報JS錯誤和資源載入錯誤。
上報資源效能資料
開啟上報資源效能資料開關，表示允許SDK上報資源效能資料（js、css、image、audio、video）。
上報請求數據
開啟上報請求數據開關，表示允許SDK上報API請求資料（fetch、xhr）。
上報頁面載入性能
開啟上報頁面載入性能開關，表示允許SDK上報頁面載入效能資料。
鏈路追蹤
開啟鏈路追蹤開關，表示允許SDK上報前後端鏈路追蹤資料。
完成上述配置後，系統將產生對應的安裝和初始化指令碼。
複製上述指令碼，進行SDK安裝和初始化。
其中，SLS_CLIENT還支援添加其他配置項。更多資訊，請參見附錄一：SLS_CLIENT配置項。
安裝NPM包。
npm install @aliyun-sls/web-browser初始化SDK。
import { SLS_CLIENT } from '@aliyun-sls/web-browser'; SLS_CLIENT.init({ host: 'cn-beijing.log.aliyuncs.com', // 您在建立執行個體時所綁定的Project的訪問網域名稱。 project: 'demo-test',// 您在建立執行個體時所綁定的Project。 logstore: 'demo-test-raw', // Logstore名稱。建立執行個體後，Log Service會自動產生一個名為{instance}-raw的Logstore。 workspace: 'demo',// 工作空間名稱，即執行個體ID。 env: 'prod',// 自訂環境。 service: 'web',// 服務名。 enableRuntimeError: true,// 上報JS錯誤和資源載入錯誤。 enableResourcePerf: true, // 上報資源效能資料。 enableRequest: true,// 上報API請求資料。 enablePerf: true,// 上報頁面載入效能資料。 enableTrace: true // 上報前後端鏈路追蹤資料。 })訪問您的測試網站，產生測試資料。
返回到Log Service控制台的全棧可觀測應用中。
在接入資料對話方塊中，單擊下一步。
在接入資料設定精靈的檢查數據步驟中，單擊檢查數據。
確認資料無誤後，單擊完成。
CDN同步方式
在HTML頁面的<head></head>標籤中添加如下代碼，並且保證在其他所有script前面。
如下代碼中的${version}為版本號碼，以控制台中提供的版本號碼為準。
<script src="https://g.alicdn.com/sls/sls-js-sdk/0.3.0/web-browser.js"></script>
<script>
window.SLS_CLIENT &&
SLS_CLIENT.init({
host: 'cn-beijing.log.aliyuncs.com', // 您在建立執行個體時所綁定的Project的訪問網域名稱。
project: 'demo-test', // 您在建立執行個體時所綁定的Project。
logstore: 'demo-test-raw', // Logstore名稱。建立執行個體後，Log Service會自動產生一個名為{instance}-raw的Logstore。
workspace: 'demo', // 工作空間名稱，即執行個體ID。
env: 'prod', // 自訂環境。
service: 'web', // 服務名稱。
enableRuntimeError: true, // 上報JS錯誤和資源載入錯誤。
enableResourcePerf: true, // 上報資源效能資料。
enableRequest: true, // 上報API請求資料。
enablePerf: true, // 上報頁面載入效能資料。
enableTrace: true // 上報前後端鏈路追蹤資料。
})
</script>CDN非同步方式
在HTML頁面的<head></head>標籤中添加如下代碼，並且保證在其他所有script前面。
如下代碼中的${version}為版本號碼，以控制台中提供的版本號碼為準。
<script>
(function (h, o, u, n, d) {
h=h[d]=h[d]||{p:[],e:[],q:[],
addLog:function(log){h.p.push(log)},
addError:function(log){h.e.push(log)},
onReady:function(c){h.q.push(c)},};
d=o.createElement(u);
d.async=1;d.src=n;
n=o.getElementsByTagName(u)[0];
n.parentNode.insertBefore(d,n)
})(window, document, 'script',
'https://g.alicdn.com/sls/sls-js-sdk/0.3.0/web-browser.js', 'SLS_CLIENT')
SLS_CLIENT.onReady(function () {
SLS_CLIENT.init({
host: 'cn-beijing.log.aliyuncs.com', // 您在建立執行個體時所綁定的Project的訪問網域名稱。
project: 'demo-test', // 您在建立執行個體時所綁定的Project。
logstore: 'demo-test-raw', // Logstore名稱。建立執行個體後，Log Service會自動產生一個名為{instance}-raw的Logstore。
workspace: 'demo', // 工作空間名稱，即執行個體ID。
env: 'prod', // 自訂環境。
service: 'web', // 服務名。
enableRuntimeError: true, // 上報JS錯誤和資源載入錯誤。
enableResourcePerf: true, // 上報資源效能資料。
enableRequest: true, // 上報API請求資料。
enablePerf: true, // 上報頁面載入效能資料。
enableTrace: true // 上報前後端鏈路追蹤資料。
})
})
</script>NPM方式
上報自訂事件
SLS_CLIENT SDK支援自動對某些事件進行監控，同時還支援您手動上報日誌。
上報自訂日誌
SLS_CLIENT.addLog()介面用於上報自訂事件，該介面支援定義一個JSON格式的參數及支援嵌套JSON格式。上報的資料支援使用Log Service查詢和分析語句。樣本如下：
SLS_CLIENT.addLog({
key: 'value',
number: 1,
array: [],
json: {
json: 'json'
}
})上報自訂JS Error
您可以通過SLS_CLIENT.addError()介面上報自訂JS Error。樣本如下：
SLS_CLIENT.addError(new Error('init error'))支援手動捕獲錯誤後，通過SLS_CLIENT.addError()介面進行上報。樣本如下：
try {
} catch (err) {
SLS_CLIENT.addError(err）
}雖然SLS_CLIENT SDK解決了SDK初始化問題，當您在調用該SDK時，不會出現SLS_CLIENT.addLog()或SLS_CLIENT.addError()介面不存在的問題，但仍然不推薦您直接使用SLS_CLIENT.addLog()或者 SLS_CLIENT.addError()介面。最佳方式是在介面外包裹一層工具函數，樣本如下：
export function myAddLog(log) {
if (SLS_CLIENT.addLog) {
SLS_CLIENT.addLog(log)
}
}支援部分參數熱更新
在某些情境中，不一定能立即擷取uid等使用者參數，SLS_CLIENT SDK允許在SDK初始化後動態設定這部分參數。當前支援熱更新的參數有uid、nickname、env、service、version、custom。調用方式如下所示。
SLS_CLIENT.setOptions({
uid: 'uid',
nickname: 'newnickname',
env: 'newEnv',
custom: {
c: 'newCustom',
},
version: 'newVersion',
service: 'newService',
})自訂外掛程式
SLS_CLIENT SDK支援在上報資料過程中修改資料。
// 必須在init之前調用。
SLS_CLIENT.use({
name: 'myPlugin',
run: function () {
this.subscribe(
'*', // 訂閱所有的資料來源。如果是自訂訂閱的事件，必須設定為星號（*）。
(data, next) => {
//
//
// 可以根據data.otBase.t，確定資料類型。
//
//
next(data) // 將新的資料傳入下一個處理者時，必須調用，否則該條資料會停止上報。
},
0, // 通過優先順序(0~99)，控制執行外掛程式的順序。
)
},
})
// data的資料類型。
// 具體日誌格式，請參見附錄二。
export interface NotifyData<OT extends Partial<OTTrace>, Extra = Record<string, any> | undefined> {
otBase: OT
extra: Extra
}附錄一：SLS_CLIENT配置項
參數名 | 類型 | 是否必填 | 樣本 | 描述 |
project | string | 是 | 'my-project' | 您在建立執行個體時所綁定的Project名稱。 |
host | string | 是 | 'cn-hangzhou.log.aliyuncs.com' | 您在建立執行個體時所綁定的Project的訪問網域名稱。如何擷取，請參見公網。 |
logstore | string | 是 | 'my-logstore' | 建立執行個體後，Log Service會自動產生一個名為{instance}-raw的Logstore。其中{instance}為執行個體ID。 此處需配置為該Logstore。 |
workspace | string | 是 | 'my-workspace' | 工作空間名稱，即執行個體ID。 |
uid | string | 否 | '123456' | 使用者ID。 |
nickname | string | 否 | 'Alice' | 使用者暱稱。 |
env | string | 否 | 'prod' | 自訂環境。 |
service | string | 否 | 'web' | 服務名稱。 |
version | string | 否 | '1.0.0' | 版本號碼。 |
custom | Record<string, any> | 否 | { key: 'value' } | 自訂參數。 該參數用於儲存應用程式中的自訂資訊，可以是任何類型的JSON對象。 |
trackTimeThreshold | number | 否 | 5 | 發送資料的時間閾值，單位：秒（s）。預設值：2。 0表示立即發送。 |
trackCountThreshold | number | 否 | 20 | 發送資料的條數閾值。預設值：10。 0和1都表示立即發送。 |
enableTrace | boolean | 否 | true | 是否開啟鏈路追蹤功能。 |
enableTraceRequestConfig | (((value: string) => boolean) | string | RegExp)[] | 否 | 無 | 需要開啟Trace功能的請求。 該參數為數群組類型，包含需要開啟Trace功能的請求的類型和URL。 |
customTraceHeaders | Record<string, string> | 否 | 無 | Trace Header。該欄位用於在發送請求時自訂Trace Header。 |
enableRequest | boolean | 否 | true | 是否上報請求資料。 |
ignoreRequestConfig | (((value: string, status: number) => boolean) | string | RegExp)[] | 否 | 無 | 不需要上報的請求。 該參數為數群組類型，包含不需要上報的請求的類型和URL。 |
enableRequestBodyConfig | IEnableTrackRequestBody | 否 | 無 | 需要記錄Body的請求。該欄位為一個對象，包含需要記錄Body的請求的類型和URL。 |
enableRuntimeError | boolean | 否 | true | 是否上報JS錯誤。 |
ignoreRuntimeErrorConfig | (((value: string) => boolean) | string | RegExp)[] | 否 | 無 | 運行時需要忽略的錯誤。 該參數為數群組類型，包含需要忽略的錯誤類型。 |
enableResourceError | boolean | 否 | true | 是否上報JS資源錯誤。 |
enableResourcePerf | boolean | 否 | true | 是否上報資源效能資料（js、css、image、audio、video)。 |
ignoreResourceConfig | (((value: string) => boolean) | string | RegExp)[] | 否 | 無 | 需要忽略的資源請求。 該參數為數群組類型，包含需要忽略的資源的類型和URL。 |
enablePerf | boolean | 否 | true | 是否上報頁面載入效能資料。 |
enableConsoleLog | enum | 否 | 'warn' | 記錄層級，取值為error、warn、log、info、debug、false。 配置為info時，只記錄 error、warn、info層級的日誌。 |
enableDomClick | boolean | 否 | true | 是否記錄使用者點擊事件，預設值為true。 |
附錄二：日誌欄位詳情
OT基本欄位
欄位名 | 類型 | 描述 |
duration | long | 期間，單位：微秒。 |
start | long | 開始時間戳 |
end | long | 結束時間戳記 |
kind | long | 操作類型 |
name | text | 操作名稱 |
service | text | 服務名稱 |
spanID | text | 操作的唯一識別碼 |
statusCode | text | 狀態代碼 |
statusMessage | text | 狀態訊息 |
traceID | text | 跟蹤操作的唯一識別碼 |
attribute | json | 屬性資訊，請參見attribute欄位。 |
resource | json | 資源資訊，請參見resource欄位。 |
attribute欄位
欄位名 | 類型 | 描述 |
pid | text | 頁面ID |
sid | text | 會話ID |
t | text | 資料類型，請參見attribute.t資料類型。 |
uid | text | 使用者ID。 SDK會自動產生使用者ID，統計PV、UV等資訊。使用者ID不具備特定的業務屬性，也不能準確統計UV等資訊。 |
version | text | 自訂軟體版本 |
client_ip | text | 上報資料的用戶端IP地址 |
receive_time | long | 接受資料的時間 |
attribute.t資料類型
類型 | 描述 |
error | JS運行時，發生錯誤 |
log | 自訂日誌 |
pv | PV資料，首次進入頁面或切換路由會上報。 |
api | API請求資料 |
res | 資源請求資料 |
res_err | 資源請求錯誤資料 |
perf | 效能資料 |
console | console資料 |
resource欄位
欄位名 | 類型 | 描述 |
browser.name | text | 請求發起的瀏覽器的名稱 |
browser.screen | text | 瀏覽器視窗的解析度 |
browser.version | text | 請求發起的瀏覽器的版本 |
device.screen | text | 裝置的解析度 |
os.name | text | 請求發起的作業系統 |
os.type | text | 作業系統類型 |
os.version | text | 作業系統版本 |
user_agent.original | text | 瀏覽器user_agent |
workspace | text | 工作空間，對應執行個體ID |
deployment.environment | text | 自訂環境 |
uem.data.type | text | 使用者體驗監控相關資料的資料類型 |
uem.sdk.version | text | 使用者體驗監控相關的SDK版本 |
uem.miniprogram.platform | text | 使用者體驗監控相關的小程式平台 |
device.model.name | text | 使用者體驗監控相關的小程式裝置名稱 |
頁面資訊
欄位名 | 類型 | 描述 |
page.host | text | 頁面Host |
page.referrer | text | 編碼後的頁面來源資訊。 |
page.referrer_original | text | 來源頁面 |
page.target | text | 編碼後的頁面URL |
page.target_original | text | 頁面URL |
請求資訊
欄位名 | 類型 | 描述 |
http.host | text | 請求伺服器位址 |
http.method | text | 要求方法 |
http.scheme | text | 請求協議 |
http.status_code | text | 請求狀態代碼 |
http.url | text | 請求URL |
地理資訊
欄位名 | 類型 | 描述 |
isp | text | 用戶端所使用的電訊廠商 |
province | text | 用戶端所在省份 |
province_id | text | 用戶端所在省份的編碼 |
city | text | 用戶端所在城市 |
city_id | text | 用戶端所在城市的編碼 |
country | text | 用戶端所在國家 |
country_id | text | 用戶端所在國家的編碼 |
資源資訊
欄位名 | 類型 | 描述 |
resource.id | text | 資源隨機ID |
resource.type | text | 資源類型 |
resource.url | text | 資源URL |
JS 錯誤資訊
欄位名 | 類型 | 描述 |
ex.stacktrace | text | 錯誤堆棧 |
ex.message | text | 錯誤資訊 |
ex.type | text | 錯誤類型 |
ex.id | text | 隨機錯誤ID |
ex.col | text | 錯誤列號 |
ex.line | text | 錯誤行號 |
ex.file | text | 錯誤檔案 |
效能資訊
欄位名 | 類型 | 描述 |
perf.dcl | long | 觸發DOMContentLoaded的時間戳記 |
perf.di | long | 使用者首次互動的時間戳記 |
perf.dns | text | DNS解析的時間 |
perf.duration | long | 頁面載入的總時間 |
perf.fcp | long | 首次內容繪製時間 |
perf.fid | long | 首次輸入延遲時間 |
perf.fit | long | 首次可互動時間 |
perf.fp | textlong | 首次渲染的時間 |
perf.lcp | long | 最大內容繪製時間 |
perf.load | long | 頁面載入完成的時間 |
perf.red | text | 重新導向的時間 |
perf.size | long | 頁面大小 |
perf.ssl | text | SSL握手的時間 |
perf.tcp | text | TCP串連的時間 |
perf.trans | text | 傳輸的時間 |
perf.ttfb | text | 瀏覽器開始收到伺服器響應資料的時間 |