前端監控提供一系列 SDK 配置項，您可以通過設置這些配置項實現更細粒度的數據上報控制或數據規整配置，如配置前端應用的環境與版本、用戶的 uid 與用戶名、各項功能開關以及規整上報數據等。

您可以在初始化前端應用時，將本頁面中的配置項添加到前端監控 SDK 的初始化配置中，script 標簽引入與 NPM 引入的配置方法分別見下圖。小程序應用的配置方法類似，只需在相應對象中添加配置項即可。

以下配置項除特殊說明外，均支持 Web 應用與小程序應用。

基礎配置項

appId

必填項，值為字符串，是前端應用的唯一標識，創建應用時會自動生成。

uid

非必填項，值為函數，該函數需返回用戶的 id，該 id 是用戶的唯一標識，id 可以是字符串或數值。示例：

"uid": function() {
    // 假設可通過 userUser 方法獲取用戶的 userId
    const { userId } = useUser()
    return userId
},

如果沒有傳 uid 配置，SDK 將會自動為用戶生成唯一的 id。在控制臺中，id 用于統計 UV/PV、對異常進行溯源等功能。

username

非必填項，值為函數，該函數需返回用戶的名稱，名稱需為字符串，其長度若超過 40 個字符將被截斷。示例：在控制臺中，用戶名用于對異常進行溯源等功能。

"username": function() {
    // 假設可通過 userUser 方法獲取用戶的 userName
    const { userName } = useUser()
    return userName
},

release

非必填項，值為字符串。在控制臺中，是全局維度，也用于各項指標的版本分布統計。示例：

"release": "1.10",

environment

非必填項，值為字符串。在控制臺中，是全局維度，也用于各項指標的環境分布統計。

示例：

"environment": "prod",

功能開關

enableAPI

是否啟用 API 請求數據上報。非必填項，值為布爾值，默認值為 true。若為 true，將上報 API 請求信息；反之亦然。

enablePv

是否啟用 PV 數據上報。非必填項，值為布爾值，默認值為 true。若為 true，將上報 PV 數據；反之亦然。

enablePerf

是否啟用性能數據上報。非必填項，值為布爾值，默認值為 true。若為 true，將上報應用性能數據；反之亦然。

enableResource

是否啟用靜態資源上報。非必填項，置為布爾值，默認值為 false。若為 true，將上報頁面靜態資源（js、css、圖片等）的加載結果；反之亦然。

enableSPA（Web 應用）

是否啟用 SPA(Single Page Application) 解析。非必填項，值為布爾值，默認值為 false。若為 true，將監聽頁面的 hashchange 事件并自動上報 PV，適用于單頁面應用場景；反之亦然。

enableError（小程序應用）

是否啟用 JS 錯誤上報。非必填項，值為布爾值，默認值為 true。若為 true，將自動上報應用中的 JS 報錯；反之亦然。當前僅支持小程序應用配置，Web 應用暫時無法關閉。

enableSetData（小程序應用）

非必填項，值為布爾值，默認值為 false。若為 true，則會上報小程序 setData 方法相關的性能數據；反之亦然。

上報數據規整

parseResponse

用于解析并規整 API 響應數據。非必填項，值為函數，默認值為：

"parseResponse": function(responseData, statusCode, { method, api, domain }) {
        let msg = ''
        if (responseData && typeof responseData === 'object') {
            msg = responseData.msg || responseData.message || responseData.subMsg || responseData.errorMsg || responseData.ret || responseData.errorResponse || ''
            if (typeof msg === 'object') {
                msg = msg.msg || msg.message || msg.info || msg.ret || JSON.stringify(msg)
            }
        }
        
        // 默認 >= 200 && < 400 認為是接口成功
        let success = true
        if (parseInt(statusCode) < 200 || parseInt(statusCode) >= 400) {
            success = false
        }
        
        return {
            msg, // String
            success, // Boolean
            code: statusCode, // Number
        }
},

該函數需要返回一個包含 msg、success、code 的對象。SDK 會使用該函數對 API 響應進行解析，提取出 msg、success 和 code 字段。

parseHash（Web 應用）

用于解析 SPA 應用的 page 字段，僅在 enableSPA 為 true 時才生效。非必填項，值為函數，默認值為：

"parseHash": function(hash) {
        const cutUrlSearch = url => {
            if (!url || typeof url !== 'string') return ''
            return url.replace(
                /^(https?:)?\/\//,
                ''
            ).replace(
                /\?.*$/,
                ''
            )
}
        const page = hash ? util.cutUrlSearch(hash.replace(/^#\/?/, '')) : ''
        return page || '[index]'
},

此配置項一般不需要修改。如果需要在上報時使用自定義的頁面名，或 URL 的 Hash 比較復雜，則需要修改此配置項。示例：

const PAGE_MAP = {
  '/overview': '總覽頁',
  '/log': '設置頁',
  '/setting': '設置頁',
  // ...
}


// ... 其他配置項
"parseHash": function(hash) {
  const key = hash.replace(/\?.*$/, '')
  return PAGE_MAP[key] || key
}
// ... 其他配置項

urlHelper

用于規整上報數據的 page 字段，對于小程序應用及 Web 應用生效，這些應用會自動獲取頁面的 URL 或 url hash 作為 page 字段。

當頁面URL類似于 //example.com/projects/123456  （projects后面的數字是項目ID）時，如果將  example.com/projects/123456 作為page上報，會導致在數據查看時頁面無法聚成一類。這種情況下，為了使同類頁面聚類，可以使用 urlHelper 參數過濾掉非關鍵字符，例如此例中的項目ID。 

非必填項，默認值為：

urlHelper: [
    // 將所有 Path 中的數字變成 *
    {
        rule: /\/([a-z\-_]+)?\d{2,20}/g,
        target: '/$1**'
    },
    // 去掉URL末尾的'/'
/\/$/
],

此配置項一般不需要修改，其作用是過濾掉 xxxx/123456 后面的數字，例如 xxxx/00001 和 xxxx/00002 都會變成 xxxx/**。

urlHelper的值可以是以下類型：

• String 或 RegExp（正則表達式）：將匹配到的字符串去掉。

• Object<rule, target>：對象包含兩個Key（rule和target）作為JS字符串的replace方法的入參。使用方法參見JS相關教程中的String::replace方法。

• Function：將原字符串作為入參執行方法，將執行結果作為Page。

• Array：用于設置多條規則，每條規則都可以是上述類型之一。

apiHelper

用于規整 API 類型上報數據的 url 字段，用法及含義同 urlHelper。

非必填項，默認值為：

apiHelper: [
    // 將所有 Path 中的數字變成 *
    {
        rule: /\/([a-z\-_]+)?\d{2,20}/g,
        target: '/$1**'
    },
    // 去掉URL末尾的'/'
/\/$/
],

apiHelper的值可以是以下類型：

• String 或 RegExp（正則表達式）：將匹配到的字符串去掉。

• Object<rule, target>：對象包含兩個Key（rule和target）作為JS字符串的replace方法的入參。使用方法參見JS相關教程中的String::replace方法。

• Function：將原字符串作為入參執行方法，將執行結果作為 url。

• Array：用于設置多條規則，每條規則都可以是上述類型之一。

ignore

ignore: {
    ignoreUrls: [],
    ignoreApis: [],
    ignoreErrors: [/^Script error/],
} 

用于忽略指定URL/API/JS錯誤。符合規則的日志將被忽略且不會被上報，包含子配置項ignoreUrls、ignoreApis 和 ignoreErrors。

ignore的值是一個對象，對象中包含 3 個屬性：ignoreUrls、ignoreApis 和 ignoreErrors。可單獨設置其中的 1 個或多個屬性。
 

非必填項，默認值為：ignoreUrls表示忽略某些URL（使用 page 字段匹配），符合規則的URL下的日志都不會被上報；ignoreApis表示忽略某些API（使用 api 字段匹配），符合規則的API將不會被監控；ignoreErrors表示忽略某些JS錯誤（使用 msg 字段匹配），符合規則的JS錯誤不會被上報。

每個子配置項的值可以是 String、RegExp、Function 或者以上三種類型組成的數組，：

• String 或 RegExp（正則表達式）：若上述“匹配”字段（page/api/msg）包含指定字符串或符合指定正則匹配，則不會上報。

• Function：若返回 true，則不會上報。

• Array：用于設置多條規則，每條規則都可以是上述類型之一。