浏览器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功能。

登录日志服务控制台。
在Project列表区域，单击目标Project。
在日志存储 > 日志库页签中，选择目标Logstore右侧的 > 修改。
在Logstore属性页面，单击右上方的修改。
打开WebTracking开关，并单击保存。

步骤二：配置及日志采集

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

安装依赖包。

npm install --save @aliyun-sls/web-track-browser

在您的代码工程中，导入依赖模块。

import SlsTracker from '@aliyun-sls/web-track-browser'

配置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	否	日志来源。您可以自定义该字段，便于识别。
tag	否	日志标签信息。您可以自定义该字段，便于识别。

创建SlsTracker对象。
通过该对象向日志服务发起上传日志请求。
```
const tracker = new SlsTracker(opts)
```
上传日志。
此处为上传日志的具体业务逻辑，您可以在此定义希望采集的日志详细情况。
```
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, }, ])`

日志服务：浏览器JavaScript SDK