# hl-error-report-sdk

**Repository Path**: HM243695CZL/hl-error-report-sdk

## Basic Information

- **Project Name**: hl-error-report-sdk
- **Description**: 前端异常监控sdk
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-05-27
- **Last Updated**: 2025-05-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端异常监控错误上报SDK
node环境：`18.19.0`
## 参考项目
 [monitor-sdk](https://github.com/L-excellence/monitor-sdk)

## 使用方式
```html
<script src="./hl-error-report-sdk.js"></script>
<script>
    new HlErrorReportSDK({
        url: 'http://localhost:3001/send/monitor.gif'
    });
</script>
```
## 参数说明
- `url`: 必填，错误上报地址，推荐地址返回gif图片流文件,上报的数据自动拼接在url后面
- `longTaskDuration`: 长任务阈值，默认3000ms，超过该阈值会上报

## 上报服务器端地址(参考)
- [nest-monitor-exception](https://gitee.com/HM243695CZL/nest-monitor-exception.git)

### 上报数据结构说明
```js
baselog: {
    title: string; // 页面标题
    url: string; // 页面地址
    userAgent: string; // 用户环境完整信息
    browser: string; // 浏览器
    device: string; // 设备
    os: string; // 操作系统
}
/**
 * 类型
 * error: js错误
 * longTask: 长任务
 * timing: 加载时间
 * paint: 性能指标
 */
type: 'error' | 'longTask' | 'timing' | 'paint'
```
type的值不同时对应的数据结构(引入`hl-error-report-sdk.js`后自动拼接到url后面)
```ts
type: 'error',
/**
 * 错误类型
 * jsError js代码错误
 * promiseError Promise错误
 * loadResourceError 加载资源错误
 */
errorType: 'jsError' | 'promiseError' | 'loadResourceError';
message?: string; // 错误信息
filename?: string; // 错误文件
position?: string; // 发生错误的行列号
stack?: string; // 错误堆栈信息
selector?: string; // 发生错误的DOM到顶层元素的链路信息，使用选择器表示
isWhiteScreen?: boolean; // 是否白屏
tagName?: string; // 错误元素标签名
reqUrl?: string; // 请求地址
xhrData?: {
    eventType: 'load' | 'error', // xhr错误事件类型
    url: string; // 请求地址
    method: string; // 请求方式
    data: string; // 请求参数
    status: number; // 请求状态码
    response: string; // 响应数据
}
```

```ts
type: 'longTask';
startTime: number; // 开始时间
duration: number; // 持续时间
eventType?: string; // 事件类型
selector?: string; // 选择器
```
```ts
type: 'timing';
DOMContentLoadedTime: number; // DOMContentLoaded事件触发时间
loadTime: number; // load事件触发时间
```

```ts
type: 'paint';
FP?: number;
FCP?: number;
FMP?: number;
LCP?: number;
```