文档

浏览器JavaScript SDK

更新时间:

日志服务支持通过Web Tracking自动采集终端用户浏览器的日志。本文介绍如何使用Web Tracking JavaScript SDK自动采集浏览器的用户日志。

背景信息

您可以通过Web Tracking采集各种浏览器、小程序、iOS App或Android App的用户信息,例如:

  • 用户使用的浏览器、操作系统、分辨率等信息。

  • 用户浏览行为记录(例如:用户在网站上的单击行为、购买行为等信息)。

  • 用户在App中的停留时间、是否活跃等信息。

注意事项

  • 使用Web Tracking则表示该Logstore打开互联网匿名写入权限,没有经过有效鉴权(不需要AccessKey),可能产生脏数据。

  • GET请求不支持上传16 KB以上的Body内容。

  • POST请求每次写入的日志数量上限为10 MB,日志组中每条日志下的Value部分建议不超过1 MB。更多信息,请参见PutLogs

  • 日志服务浏览器JavaScript SDK独立开发,基本无任何外部依赖,开发中无需开启es6模块支持tree-shaking。

  • 日志服务浏览器JavaScript SDK只支持部署到浏览器端,支持cjs打包和es打包两种方式。

  • 日志服务浏览器JavaScript SDK目前仅支持使用npm方式进行安装,暂不支持CDN安装js(es5)方式。

  • 相比之前旧版采集浏览器日志的js-sls-logger包,浏览器JavaScript SDK(web-track-browser)拥有更佳的采集性能和稳定性。后续不再维护js-sls-logger包,建议您使用浏览器JavaScript SDK采集浏览器日志。

步骤一:开启WebTracking

通过JavaScript SDK向Logstore写入用户日志前,您需要开启Logstore的WebTracking功能。

  1. 登录日志服务控制台

  2. 在Project列表区域,单击目标Project。

  3. 日志存储 > 日志库页签中,选择目标Logstore右侧的图标 > 修改

  4. Logstore属性页面,单击右上方的修改

  5. 打开WebTracking开关,并单击保存

步骤二:配置及日志采集

通过JavaScript SDK写入用户日志前,您需要导入SDK,完成采集配置,包括配置存储日志的Project名称、Logstore名称和采集指标等。

  1. 安装依赖包。

    npm install --save @aliyun-sls/web-track-browser
  2. 在您的代码工程中,导入依赖模块。

    import SlsTracker from '@aliyun-sls/web-track-browser'
  3. 配置opts参数。

    const opts = {
      host: '${host}', // 所在地域的服务入口。例如cn-hangzhou.log.aliyuncs.com
      project: '${project}', // Project名称。
      logstore: '${logstore}', // Logstore名称。
      time: 10, // 发送日志的时间间隔,默认是10秒。
      count: 10, // 发送日志的数量大小,默认是10条。
      topic: 'topic',// 自定义日志主题。
      source: 'source',
      tags: {
        tags: 'tags',
      },
    }

    参数名称

    是否必填

    说明

    host

    日志服务所在地域的Endpoint。此处以杭州为例,其它地域请根据实际情况填写。更多信息,请参见服务入口

    project

    Project名称。

    logstore

    Logstore名称。

    time

    发送日志的时间间隔,默认值为10,单位为秒。

    count

    发送日志的数量大小,默认值为10。

    topic

    日志主题。您可以自定义该字段,便于识别。

    source

    日志来源。您可以自定义该字段,便于识别。

    tags

    日志标签信息。您可以自定义该字段,便于识别。

  4. 创建SlsTracker对象。

    通过该对象向日志服务发起上传日志请求。

    const tracker = new SlsTracker(opts)
  5. 上传日志。

    此处为上传日志的具体业务逻辑,您可以在此定义希望采集的日志详细情况。

    tracker.send({
      customer: 'zhangsan',
      product: 'iphone 12',
      price: 7998,
    })

步骤三:部署

当您使用webpack、rollup等打包前端工程时,该SDK代码会随着您的业务代码一起被打包部署。

步骤四:查询和分析日志

完成以上操作后,日志服务浏览器JavaScript SDK会按照您定义的日志格式自动采集日志信息,并存储至对应日志库Logstore。后续您就可以通过日志服务控制台或者API接口(GetLogs等)查询日志。

更多操作,请参见查询和分析日志GetLogs

上传日志方法

核心功能示例如下,便于您选择合适的方法上传日志。

方法

说明

参数的数据类型

示例

send()

上传单条日志。

Object类型

tracker.send({
  customer: 'zhangsan',
  product: 'iphone 12',
  price: 7998,
})

sendImmediate()

立即上传单条日志。此时配置time和count参数不生效。

Object类型

tracker.sendImmediate({
  customer: 'zhangsan',
  product: 'iphone 12',
  price: 7998,
})

sendBatchLogs()

批量上传日志。

Array类型

tracker.sendBatchLogs([
  {
    customer: 'zhangsan',
    product: 'iphone 12',
    price: 7998,
  },
  {
    customer: 'zhangsan',
    product: 'iphone 12',
    price: 7998,
  },
])

sendBatchLogsImmediate()

批量上传日志。此时配置time和count参数不生效。

Array类型

tracker.sendBatchLogsImmediate([
  {
    customer: 'zhangsan',
    product: 'iphone 12',
    price: 7998,
  },
  {
    customer: 'zhangsan',
    product: 'iphone 12',
    price: 7998,
  },
])

关于SLS WebTracking JavaScript SDK的更多信息,请参见SLS WebTracking JavaScript SDK

调试代码时提示“401 Authorization Required”如何解决?

问题原因

未开启Logstore的WebTracking功能。

解决方法

通过JavaScript SDK向Logstore写入用户日志前,您需要开启Logstore的WebTracking功能。请参考以下步骤开启WebTracking功能后重试。

  1. 登录日志服务控制台

  2. 在Project列表区域,单击目标Project。

  3. 日志存储 > 日志库页签中,选择目标Logstore右侧的图标 > 修改

  4. Logstore属性页面,单击右上方的修改

  5. 打开WebTracking开关,并单击保存

相关文档

  • 在调用API接口过程中,若服务端返回结果中包含错误信息,则表示调用API接口失败。您可以参考API错误码对照表查找对应的解决方法。更多信息,请参见API错误处理对照表
  • 阿里云OpenAPI开发者门户提供调试、SDK、示例和配套文档。通过OpenAPI,您无需手动封装请求和签名操作,就可以快速对日志服务API进行调试。更多信息,请参见OpenAPI开发者门户
  • 为满足越来越多的自动化日志服务配置需求,日志服务提供命令行工具CLI(Command Line Interface)。更多信息,请参见日志服务命令行工具CLI
  • 本页导读 (1)
文档反馈