feat: 请求日志 + 前端埋点系统
后端: - 新增 logger 中间件,记录所有请求到 logs/ 目录 - 新增 /api/track 接口接收前端埋点数据 前端: - 新增 tracker 工具,支持页面访问/操作/错误埋点 - request.ts 添加 API 错误自动埋点 - App.vue 初始化全局错误追踪 文档: - CLAUDE.md 更新项目结构 - DEV.md 添加埋点和日志说明
This commit is contained in:
140
client/src/utils/tracker.ts
Normal file
140
client/src/utils/tracker.ts
Normal file
@@ -0,0 +1,140 @@
|
||||
/**
|
||||
* 前端埋点工具
|
||||
* 记录用户关键操作和错误信息
|
||||
*/
|
||||
|
||||
import { request } from './request'
|
||||
|
||||
interface TrackEvent {
|
||||
event: string
|
||||
page?: string
|
||||
data?: Record<string, any>
|
||||
}
|
||||
|
||||
/** 上报队列(批量上报,减少请求) */
|
||||
let eventQueue: TrackEvent[] = []
|
||||
let flushTimer: number | null = null
|
||||
const FLUSH_INTERVAL = 5000 // 5秒上报一次
|
||||
const MAX_QUEUE_SIZE = 20
|
||||
|
||||
/** 获取当前页面路径 */
|
||||
function getCurrentPage(): string {
|
||||
const pages = getCurrentPages()
|
||||
if (pages.length > 0) {
|
||||
return `/${pages[pages.length - 1].route}`
|
||||
}
|
||||
return '/unknown'
|
||||
}
|
||||
|
||||
/** 批量上报事件 */
|
||||
async function flushEvents() {
|
||||
if (eventQueue.length === 0) return
|
||||
|
||||
const events = [...eventQueue]
|
||||
eventQueue = []
|
||||
|
||||
try {
|
||||
await request({
|
||||
url: '/track',
|
||||
method: 'POST',
|
||||
data: { events }
|
||||
})
|
||||
} catch {
|
||||
// 上报失败不处理,避免影响用户体验
|
||||
}
|
||||
}
|
||||
|
||||
/** 添加事件到队列 */
|
||||
function addToQueue(event: TrackEvent) {
|
||||
eventQueue.push(event)
|
||||
|
||||
// 队列满时立即上报
|
||||
if (eventQueue.length >= MAX_QUEUE_SIZE) {
|
||||
flushEvents()
|
||||
return
|
||||
}
|
||||
|
||||
// 设置定时上报
|
||||
if (!flushTimer) {
|
||||
flushTimer = setTimeout(() => {
|
||||
flushTimer = null
|
||||
flushEvents()
|
||||
}, FLUSH_INTERVAL) as unknown as number
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 追踪页面访问
|
||||
*/
|
||||
export function trackPageView(pagePath?: string) {
|
||||
addToQueue({
|
||||
event: 'page_view',
|
||||
page: pagePath || getCurrentPage()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 追踪用户操作
|
||||
* @param action 操作名称,如 'click_save', 'submit_form'
|
||||
* @param data 附加数据
|
||||
*/
|
||||
export function trackAction(action: string, data?: Record<string, any>) {
|
||||
addToQueue({
|
||||
event: 'action',
|
||||
page: getCurrentPage(),
|
||||
data: { action, ...data }
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 追踪错误
|
||||
*/
|
||||
export function trackError(error: Error | string, extra?: Record<string, any>) {
|
||||
const errorInfo = typeof error === 'string'
|
||||
? { message: error }
|
||||
: { message: error.message, stack: error.stack?.slice(0, 500) }
|
||||
|
||||
addToQueue({
|
||||
event: 'error',
|
||||
page: getCurrentPage(),
|
||||
data: { ...errorInfo, ...extra }
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 追踪 API 请求失败
|
||||
*/
|
||||
export function trackApiError(url: string, status: number, message: string) {
|
||||
addToQueue({
|
||||
event: 'api_error',
|
||||
page: getCurrentPage(),
|
||||
data: { url, status, message }
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置全局错误监听
|
||||
*/
|
||||
export function setupErrorTracking() {
|
||||
// Vue 错误处理
|
||||
uni.onError((err: string) => {
|
||||
trackError(err, { type: 'global' })
|
||||
})
|
||||
|
||||
// 未处理的 Promise rejection
|
||||
// #ifdef H5
|
||||
if (typeof window !== 'undefined') {
|
||||
window.addEventListener('unhandledrejection', (event) => {
|
||||
trackError(String(event.reason), { type: 'unhandledrejection' })
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
|
||||
export default {
|
||||
trackPageView,
|
||||
trackAction,
|
||||
trackError,
|
||||
trackApiError,
|
||||
setupErrorTracking
|
||||
}
|
||||
Reference in New Issue
Block a user