# js-sls-log-v3

**Repository Path**: sen2020/js-sls-log-v3

## Basic Information

- **Project Name**: js-sls-log-v3
- **Description**: 阿里云日志fetch版本改写
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-11
- **Last Updated**: 2022-06-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# SLS WebTracking JavaScript Logging SDK

## 背景信息
阿里云日志 web tracking 兼容谷歌插件 V3 版本特制

- 干掉了里面的XMLHttpRequest换成了Fetch
- 延迟发送被干掉了，因为V3中需要分离逻辑，编程alarms发送，而这只是一个类库，不是注入代码
- 必须安装 webextension-polyfill 使用 browser
- 因为V3版本 给回调函数时，走回调函数，否则返回Promise 因为browser仍然可用
- 该版本兼容V2 和 V3

## 数据采集

控制台方式

1. 登录[日志服务控制台](https://sls.console.aliyun.com/)。
2. 单击目标 Project。
3. 找到目标 Logstore，单击![pic](https://static-aliyun-doc.oss-cn-hangzhou.aliyuncs.com/assets/img/zh-CN/5642298851/p65765.png)下的**修改**。
4. 在**Logstore 属性**页面，单击右上方的**修改**。
5. 打开**WebTracking**开关，并单击**保存**。

通过 JavaScript SDK 方式进行数据的采集

**1.安装依赖包**

```javascript
npm install --save js-sls-logger-v3
```

**2.`import`在您的应用程序模块。**

```javascript
import SlsWebLogger from "js-sls-logger-v3";
```

**3.配置参数 opts。**

|   **参数**   |                                                              **说明**                                                               |        **是否填写**        |
| :----------: | :---------------------------------------------------------------------------------------------------------------------------------: | :------------------------: |
|   **host**   | **日志服务所在地域的 Endpoint，详情请参见**[**服务入口**](https://help.aliyun.com/document_detail/29008.html#reference-wgx-pwq-zdb) |          **必填**          |
| **project**  |                                                   **控制台创建的 project 名称。**                                                   |          **必填**          |
| **logstore** |                                                  **控制台创建的 logstore 名称。**                                                   |          **必填**          |
|   **time**   |                                 **发送消息的时间间隔,数据格式为 Number 的方式,time\*1000(毫秒)。**                                  |   **选填(默认是 10 秒)**   |
|  **count**   |                                          **发送消息的数量大小,数据格式为 Number 的方式。**                                          | **选填(默认是 10 条数据)** |
| **compress** |                                                         **是否启用压缩。**                                                          |  **选填（默认为 true）**   |

```javascript
const opts = {
  host: "${host}", // 所在区域的host
  project: "${project}", // project名称
  logstore: "${logstore}", // logstore名称
  time: 10, // 定义时间，默认是10秒，number类型，选填
  count: 10, // 定义数据条数，默认是10条，number类型，选填
  compress: true, // 是否启用压缩，默认为true
};
```

**4.创建 SlsWebLogger 对象。**

```javascript
const logger = new SlsWebLogger(opts);
```

**5.上传日志。**

```javascript
logger.send({
  customer: "zhangsan",
  product: "iphone 12",
  price: 7998,
});
```

## 核心功能

**send()**

- 默认插件V3不能time设置是没有用的，如果想让time起作用
- 若想让time起作用，必须opt.alarm = true 且 配套下面的代码才能有效
- 默认情况下，若需要保证logger每次都能发出去，请将count设为1
- timer 可以在opt.timer 中自定义，为字符串类型

### Alarms 辅助示例：

```javascript
import SlsWebLogger from "js-sls-logger-v3";

const opts = {
    host: 'xxxxx',
    project: 'xxxxxx',
    time: 10,
    count: 3,
    // 测试
    logstore: 'xxx'
}
const logger = new SlsWebLogger(opts);

chrome.alarms.onAlarm.addListener(function (alarm){
    if(alarm.name === logger.timer){
        console.log("定时器开始了")
        logger.initSendLocalChunk()
    }
})

export default logger;
```