阿里云日志服务SLS接入Web的用户体验数据-云淘科技

本文介绍如何通过日志服务SDK接入Web的用户体验数据。

前提条件

已创建1.1.0及以上版本的全栈可观测实例（推荐）。具体操作，请参见创建全栈可观测实例。

安装和初始化

1. 登录日志服务控制台。

2. 在日志应用区域的智能运维页签下，单击全栈可观测。

3. 在实例列表中，单击目标实例。

   重要

   该实例需为1.1.0及以上版本。

4. 在左侧导航栏中，选择用户体验监控 > 数据接入。

5. 在接入数据对话框中，完成如下配置。

   1. 单击WEB，然后单击下一步。

   2. 配置基础信息。

      参数	说明
      环境	设置环境信息后，当您将不同环境（开发、测试、集成）中的Web用户体验数据接入到同一个实例中时，数据中将被添加开发环境信息，便于您区分不同开发环境中的Web用户体验数据。
      服务名	设置服务名后，当您将不同的服务（网站、业务、部门）中的Web用户体验数据接入到同一个实例中时，数据中将被添加服务信息，便于您区分不同服务中的Web用户体验数据。
      错误上报	打开错误上报开关，表示允许SDK上报JS错误和资源加载错误。
      上报资源性能数据	打开上报资源性能数据开关，表示允许SDK上报资源性能数据（js、css、image、audio、video）。
      上报请求数据	打开上报请求数据开关，表示允许SDK上报API请求数据（fetch、xhr）。
      上报页面加载性能	打开上报页面加载性能开关，表示允许SDK上报页面加载性能数据。
      链路追踪	打开链路追踪开关，表示允许SDK上报前后端链路追踪数据。

      完成上述配置后，系统将生成对应的安装和初始化脚本。

6. 复制上述脚本，进行SDK安装和初始化。

   其中，SLS_CLIENT还支持添加其他配置项。更多信息，请参见附录一：SLS_CLIENT配置项。

CDN同步方式

在HTML页面的标签中添加如下代码，并且保证在其他所有script前面。

说明

如下代码中的${version}为版本号，以控制台中提供的版本号为准。

  window.SLS_CLIENT &&
    SLS_CLIENT.init({
      host: 'cn-beijing.log.aliyuncs.com', // 您在创建实例时所绑定的Project的访问域名。
      project: 'demo-test', // 您在创建实例时所绑定的Project。
      logstore: 'demo-test-raw', //  Logstore名称。创建实例后，日志服务会自动生成一个名为{instance}-raw的Logstore。
      workspace: 'demo', // 工作空间名称，即实例ID。
      env:  'prod', // 自定义环境。
      service:  'web', // 服务名称。
      enableRuntimeError:  true, // 上报JS错误和资源加载错误。
      enableResourcePerf:  true, // 上报资源性能数据。
      enableRequest:  true, // 上报API请求数据。
      enablePerf:  true, // 上报页面加载性能数据。
      enableTrace:  true // 上报前后端链路追踪数据。
    })

CDN异步方式

在HTML页面的标签中添加如下代码，并且保证在其他所有script前面。

说明

如下代码中的${version}为版本号，以控制台中提供的版本号为准。

    (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名称。创建实例后，日志服务会自动生成一个名为{instance}-raw的Logstore。
      workspace: 'demo', // 工作空间名称，即实例ID。
      env:  'prod', // 自定义环境。
      service:  'web', // 服务名。
      enableRuntimeError:  true, // 上报JS错误和资源加载错误。
      enableResourcePerf:  true, // 上报资源性能数据。
      enableRequest:  true, // 上报API请求数据。
      enablePerf:  true, // 上报页面加载性能数据。
      enableTrace:  true // 上报前后端链路追踪数据。
    })
  })

NPM方式

1. 安装NPM包。

   npm install @aliyun-sls/web-browser

2. 初始化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名称。创建实例后，日志服务会自动生成一个名为{instance}-raw的Logstore。
         workspace: 'demo',// 工作空间名称，即实例ID。
         env: 'prod',// 自定义环境。
         service: 'web',// 服务名。
         enableRuntimeError: true,// 上报JS错误和资源加载错误。
         enableResourcePerf: true, // 上报资源性能数据。
         enableRequest: true,// 上报API请求数据。
         enablePerf: true,// 上报页面加载性能数据。
         enableTrace: true // 上报前后端链路追踪数据。
       })
   

7. 访问您的测试网站，产生测试数据。

8. 返回到日志服务控制台的全栈可观测应用中。

9. 在接入数据对话框中，单击下一步。

10. 在接入数据配置向导的检查数据步骤中，单击检查数据。

11. 确认数据无误后，单击完成。

上报自定义事件

SLS_CLIENT SDK支持自动对某些事件进行监控，同时还支持您手动上报日志。

  SLS_CLIENT.addLog({
    key: 'value',
    number: 1,
    array: [],
    json: {
      json: 'json'
    }
  })

SLS_CLIENT.addError(new Error('init error'))

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, Extra = Record | undefined> {
  otBase: OT
  extra: Extra
}

附录一：SLS_CLIENT配置项

附录二：日志字段详情

内容没看懂？ 不太想学习？想快速解决？ 有偿解决： 联系专家

阿里云企业补贴进行中： 马上申请

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心。

购买腾讯云产品享受折上折，更有现金返利:同意关联，立享优惠