Vitegil SDK 💉

工具使用

安装

pnpm i vitegil-sdk

引入项目

以 Vue.js 项目为例，在 App.vue 中，你可以使用如下代码引入 Vitegil SDK：

import Tracker from 'vitegil-sdk'
// ...
mounted () {
  // ...
  new Tracker({
    requestUrl: `${YOUR_REQUEST_URL}`,
    historyTracker: true,
    domTracker: true,
    jsError: true,
    lazyReport: true,
    timeTracker: true,
    deviceTracker: true,
  })
}

功能介绍

监控页面异常

在初始化 Vitegil Tracker 类时，设置jsError属性为true。

new Tracker({
  // ...
  jsError: true,
})

如果页面出现异常，SDK 会自动上报异常信息给服务器。该功能会监控页面中的所有 JS 异常：

• JS 错误
• Promise 错误
• 资源加载错误
• 其他错误

异常信息格式如下：

interface ErrorData {
  url: string | undefined
  errorUrl: string | undefined
  errorInfo: string
  errorRow: number | undefined
  errorCol: number | undefined
  errorExtra: string | undefined
}

监控网站访问人数(uv)

该工具会监控每个访问用户并为其生成一个唯一的标识符，即指纹(fingerprint)。通过该指纹，可以精准的计算网站的访问人数。

监控网站访问总数(pv)

在初始化 Vitegil Tracker 类时，设置historyTracker属性为true。

new Tracker({
  // ...
  historyTracker: true,
})

开启该选项后会监控每个访问用户的访问次数，即访问次数(page view)。

访问用户设备信息

在初始化 Vitegil Tracker 类时，设置deviceTracker属性为true。

new Tracker({
  // ...
  deviceTracker: true,
})

获取访问用户的设备信息，包括：

• 设备类型
• 操作系统
• 操作系统版本
• 屏幕高
• 屏幕高
• 当前使用的语言-国家
• 联网类型
• 横竖屏
• 浏览器类型
• 浏览器信息

interface DeviceData {
  deviceType: string | undefined
  OS: string | undefined
  OSVersion: string | undefined
  screenHeight: number | undefined
  screenWidth: number | undefined
  language: string | undefined
  netWork: string | undefined
  orientation: string | undefined
  browser: string | undefined
  browserInfo: string | undefined
}

获取页面加载时间和页面性能

timeTracker 属性设置为 true，同时开启 lazyReport，在页面关闭前会自动将页面加载时间返回。

注意 计算页面加载时间至少需要 2.5 秒，若用户在计算过程中关闭页面，则不能获得响应数据。

获取页面DOM信息

项目开发

安装依赖

pnpm i

打包 + 监听

打包并监听源文件，若检测到改动，则重新打包

pnpm dev

打包

使用 rollup 配置文件打包

pnpm build

文件目录

.
├── src
│   ├── core   # 核心代码目录
│   ├── lib    # 业务代码目录
│   ├── types  # 类型定义目录
│   └── utils  # 工具文件目录
├── LICENSE
├── README.md
├── index.html         # 测试页面
├── package.json       # 项目配置文件
├── pnpm-lock.yaml
├── rollup.config.js   # rollup 配置文件
└── tsconfig.json