日志服务接入方式之JS篇

本文涉及的产品
对象存储 OSS,20GB 3个月
阿里云盘企业版 CDE,企业版用户数5人 500GB空间
日志服务 SLS,月写入数据量 50GB 1个月
简介: 本篇主要介绍使用JS SDK收集浏览器端的数据,附件是我们提供的JS库,使用它可以非常方便的收集浏览器端的信息,比如用户操作系统类型、浏览器类型和版本、屏幕分辩率等。除此以外,JS SDK还支持收集用户自定义的数据,比如在事件响应中收集特定的信息。

本篇主要介绍使用JS SDK收集浏览器端的数据,附件是我们提供的JS库,使用它可以非常方便的收集浏览器端的信息,比如用户操作系统类型、浏览器类型和版本、屏幕分辩率等。除此以外,JS SDK还支持收集用户自定义的数据,比如在事件响应中收集特定的信息。
JS SDK提供了一种非常灵活的前端页面代码埋点方式,您可以使用JS SDK将您关心的任何数据写入日志服务,后续可以在日志服务中消费这些数据,比如导入ODPS、OSS,也可以使用Client Library进行自定义消费,下面将介绍下JS SDK的使用方法。

使用方法

step 1: 开通logstore的web tracking功能

目前控制台暂不支持设置logstore支持tracking,如果要使用该功能,请先使用java sdk或者提工单给我们,工单里面列出需要开通的project、logstore。

使用java sdk请先引入maven地址:

<dependency>
  <groupId>com.aliyun.openservices</groupId>
  <artifactId>aliyun-log</artifactId>
  <version>0.6.3</version>
</dependency>
import com.aliyun.openservices.log.Client;
import com.aliyun.openservices.log.common.LogStore;
import com.aliyun.openservices.log.exception.LogException;
public class WebTracking {
    static private String accessId = "your accesskey id";
    static private String accessKey = "your accesskey";
    static private String project = "your project";
    static private String host = "log service data address";
    static private String logStore = "your logstore";
    static private Client client = new Client(host, accessId, accessKey);
    public static void main(String[] args) {
        try {
            //在已经创建的logstore上开通tracking功能
            LogStore logSt = client.GetLogStore(project, logStore).GetLogStore();
            client.UpdateLogStore(project, new LogStore(logStore, logSt.GetTtl(), logSt.GetShardCount(), true));
            //关闭tracking功能
            //client.UpdateLogStore(project, new LogStore(logStore, logSt.GetTtl(), logSt.GetShardCount(), false));
            //新建支持tracking功能的logstore
            //client.UpdateLogStore(project, new LogStore(logStore, 1, 1, true));
        }
        catch (LogException e){
            e.printStackTrace();
        }
    }
}

step 2: 将loghub-static-tracking.js复制到web目录,在页面中引入如下脚本。

<script type="text/javascript" src="loghub-static-tracking.js"></script>

step 3:构造tracker对象,并替换其中的<endpoint>、<project>、<logstore>,构造方法中最后一个参数是可选参数,用于从cookie中获取session id,不填写则使用默认值'JSESSION'。

var logger = new window.Tracker('<endpoint>','<project>','<logstore>','<session key name>');

举例如下:

var logger = new window.Tracker('cn-hangzhou-staging-intranet.sls.aliyuncs.com','ali-test-tracking','test');

step 4:收集数据,例子如下:

//填写日志key/value字段
logger.push('key1','value1');
logger.push('key2','value2');
//调用系统提供的收集函数
window.Agent(logger);
//发送日志数据
logger.logger();

window.Agent函数会收集如下字段:

字段 说明 例子
_ua_ 浏览器类型以及版本 Chrome: 50.0.2661.102
_os_ 操作系统类型 Win7
_scr_ 屏幕分辨率 1920*1080
_title_ 页面标题 Aliyun
_ref_ 来源地址
_url_ 页面地址 http://10.101.166.127/tracking.html
_can_ cookie信息 userId=828; userName=hulk
_sid_ session id
相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
目录
相关文章
|
3月前
|
缓存 中间件
Nest.js 实战 (九):使用拦截器记录用户 CURD 操作日志
这篇文章介绍了在Nest.js中如何实现记录用户CURD操作的需求。首先解释了什么是拦截器以及拦截器的作用,然后通过创建Prisma模型,添加Log模型,并通过编写LoggerInterceptor拦截器,实现了记录用户操作的功能。最后通过效果演示和总结,强调了使用拦截器实现此功能的有效性。
|
15天前
|
JSON 监控 JavaScript
Node.js-API 限流与日志优化
Node.js-API 限流与日志优化
|
3月前
|
SQL 运维 监控
Nest.js 实战 (十):使用 winston 打印和收集日志记录
这篇文章介绍了在Nest服务中如何使用Winston记录日志。文章首先强调了日志记录在后台服务中的重要性,接着提到Nest默认的内部日志记录器,并指出可以通过@nestjs/common包中的Logger类来全面控制日志系统的行为。文章还提到,为了在生产环境中实现更高级的日志功能,可以使用如Winston之类的Node.js日志包。接下来,文章介绍了如何在Nest服务中使用Winston记录日志,包括安装相关依赖、创建winston配置文件以及实现简单的日志记录示例。最后,文章指出更高级的自定义日志功能需要读者自己去探索。
120 2
Nest.js 实战 (十):使用 winston 打印和收集日志记录
|
3月前
|
JavaScript Serverless Linux
函数计算产品使用问题之遇到Node.js环境下的请求日志没有正常输出时,该如何排查
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
3月前
|
SQL JavaScript 前端开发
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的公司员工工作日志办公系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的公司员工工作日志办公系统附带文章和源代码部署视频讲解等
33 0
|
6月前
|
JavaScript 前端开发
autox.js如何打印日志?
autox.js如何打印日志?
|
缓存 监控 JavaScript
日志服务(SLS) 的桌面端 Node.js SDK 封装
日志服务(SLS) 的桌面端 Node.js SDK 封装
16210 7
|
Web App开发 JavaScript 测试技术
工银e生活开发脱坑日志(4)工行页面及jsAPI交互接口hybrid_app.js登录情况说明
工银e生活开发脱坑日志(4)工行页面及jsAPI交互接口hybrid_app.js登录情况说明
252 0
|
资源调度 监控
[Nestjs] 使用log4js-node实现日志生成
安装依赖:使用 npm 或 yarn 安装 log4js。
440 0

相关产品

  • 日志服务