uniapp-error-monitor/USAGE_EXAMPLES.js

/**
 * UniApp Error Monitor 使用示例
 * 展示如何在不同场景下使用错误监控工具
 */

// ============================================================================
// 1. 基础使用 - 命名导出方式（推荐）
// ============================================================================

// 方式一：导入所有命名导出
import { 
  initErrorMonitor, 
  reportError, 
  getErrorStats, 
  wrapPromise,
  setErrorLevel,
  getErrorLevel,
  clearErrorCache,
  ERROR_LEVEL
} from 'uniapp-error-monitor'

// 初始化错误监控
initErrorMonitor({
  webhookUrl: 'https://your-webhook-url.com',  // 必填
  enableGlobalError: true,     // 启用全局错误捕获
  enablePromiseError: true,    // 启用 Promise 错误捕获
  enableConsoleError: false,   // 禁用 console.error 捕获
  errorLevel: ERROR_LEVEL.STRICT,  // 错误级别：strict/standard/silent
  dedupInterval: 60000,        // 错误去重间隔（毫秒），默认1分钟
  maxRetries: 3,               // 最大重试次数
  retryDelay: 1000,            // 重试延迟时间(ms)
})

// 手动上报错误
reportError('manual', new Error('自定义错误'), {
  page: 'index',
  action: '用户操作失败'
})

// 获取错误统计
const stats = getErrorStats()
console.log('错误统计:', stats)

// Promise 包装示例
const fetchData = async () => {
  try {
    const response = await wrapPromise(
      fetch('https://api.example.com/data')
    )
    return response.json()
  } catch (error) {
    // 错误已经被自动捕获和上报
    console.error('获取数据失败:', error)
  }
}

// ============================================================================
// 2. 高级使用 - 类实例方式
// ============================================================================

import { ErrorMonitor } from 'uniapp-error-monitor'

// 创建自定义实例
const errorMonitor = new ErrorMonitor({
  webhookUrl: 'https://your-webhook-url.com',
  enableGlobalError: true,
  enablePromiseError: true,
  forceEnable: true // 强制启用（忽略环境检查）
})

// 设置自定义发送器
errorMonitor.setSender(async (errorInfo) => {
  // 发送到自己的服务器
  await fetch('/api/errors', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(errorInfo)
  })
})

// 设置自定义格式化函数
errorMonitor.setFormatter((errorInfo) => {
  return `🔴 错误详情：
  类型：${errorInfo.type}
  消息：${errorInfo.error}
  页面：${errorInfo.page}
  时间：${new Date(errorInfo.timestamp).toLocaleString()}`
})

// 初始化
errorMonitor.initErrorMonitor()

// 使用实例方法
errorMonitor.reportError('api', new Error('接口调用失败'), {
  api: '/user/profile',
  method: 'GET'
})

// ============================================================================
// 3. 向后兼容 - 默认实例
// ============================================================================

import ErrorMonitorDefault from 'uniapp-error-monitor'

// 使用默认实例（向后兼容）
ErrorMonitorDefault.initErrorMonitor({
  webhookUrl: 'https://your-webhook-url.com'
})

ErrorMonitorDefault.reportError('manual', new Error('测试错误'))

// ============================================================================

// 4. TypeScript 类型安全使用

// ============================================================================



import type { 

  ErrorMonitorOptions, 

  ErrorType, 

  ErrorStats, 

  EnvironmentInfo 

} from 'uniapp-error-monitor'



// 类型安全的配置

const options: ErrorMonitorOptions = {

  webhookUrl: 'https://example.com/webhook',

  enableGlobalError: true,

  enablePromiseError: true,

  errorLevel: ERROR_LEVEL.STRICT,

  dedupInterval: 60000,

  maxRetries: 5,

  retryDelay: 2000,

  forceEnable: false

}



// 类型安全的错误上报

const reportTypeSafeError = (type: ErrorType, message: string) => {

  reportError(type, new Error(message), {

    timestamp: Date.now(),

    userId: '12345'

  })

}



// 类型安全的统计获取

const getSafeStats = (): ErrorStats => {

  return getErrorStats()

}

// ============================================================================
// 5. 环境检测和使用
// ============================================================================

import { getEnvironmentInfo } from 'uniapp-error-monitor'

// 获取环境信息
const envInfo: EnvironmentInfo = getEnvironmentInfo()

if (envInfo.isProduction) {
  // 生产环境逻辑
  console.log('生产环境，错误监控已启用')
} else {
  // 开发环境逻辑
  console.log('开发环境，错误监控已禁用')
}

// ============================================================================
// 6. 错误类型示例
// ============================================================================

// 全局错误 - 自动捕获，无需手动上报
// window.onerror 触发

// Promise 错误 - 通过 wrapPromise 包装或自动捕获
wrapPromise(someAsyncFunction())

// Console 错误 - 需要 enableConsoleError: true
console.error('这条错误会被捕获')

// 小程序错误 - 自动捕获
// uni.onError, uni.onPageNotFound 触发

// 网络错误 - 自动捕获
// 拦截的 uni.request 失败

// API 错误 - 手动上报
reportError('api', new Error('接口调用失败'), {
  url: '/api/users',
  method: 'GET',
  statusCode: 500
})

// 手动错误 - 手动上报
reportError('manual', new Error('用户操作失败'), {
  action: 'submitForm',
  formData: { name: 'John' }
})

// ============================================================================
// 7. 错误上下文信息
// ============================================================================

// 添加丰富的错误上下文
reportError('global', new Error('页面崩溃'), {
  // 用户信息
  userId: 'user123',
  userAgent: navigator.userAgent,
  
  // 页面信息
  currentPage: getCurrentPageName(),
  routeParams: getCurrentPage()?.$page?.fullPath,
  
  // 业务信息
  action: '用户点击按钮',
  component: 'UserProfile',
  
  // 性能信息
  loadTime: performance.now(),
  memoryUsage: performance.memory?.usedJSHeapSize,
  
  // 自定义数据
  customData: {
    sessionId: getSessionId(),
    feature: 'user_management'
  }
})

// ============================================================================
// 9. 错误级别控制
// ============================================================================

// 获取当前错误级别
const currentLevel = getErrorLevel()
console.log('当前错误级别:', currentLevel)

// 设置错误级别
setErrorLevel(ERROR_LEVEL.STRICT)   // 严格模式：监控所有错误
setErrorLevel(ERROR_LEVEL.STANDARD) // 标准模式：监控基本错误
setErrorLevel(ERROR_LEVEL.SILENT)   // 静默模式：仅监控严重错误

// 错误级别说明：
// - strict: 监控所有错误（global, promise, console, miniProgram, api, network）
// - standard: 监控基本错误（global, promise, miniProgram）
// - silent: 仅监控严重错误（miniProgram, pageNotFound）

// ============================================================================
// 10. 错误去重管理
// ============================================================================

// 清空错误去重缓存（允许相同错误重新上报）
clearErrorCache()

// 去重机制说明：
// - 相同错误在 dedupInterval 间隔内只会被上报一次
// - 默认间隔为 60 秒（60000ms）
// - 可通过配置 dedupInterval 自定义间隔时间

// 示例：配置更短的去重间隔
initErrorMonitor({
  webhookUrl: 'https://your-webhook-url.com',
  dedupInterval: 30000, // 30秒去重间隔
})

// ============================================================================
// 11. 批量错误处理
// ============================================================================

// 重置错误统计（在页面刷新或特定事件后）
import { resetErrorStats } from 'uniapp-error-monitor'
resetErrorStats()
console.log('错误统计已重置')

// 定时检查错误状态
setInterval(() => {
  const stats = getErrorStats()
  if (stats.total > 10) {
    console.warn('检测到大量错误:', stats)
    // 可以发送告警或执行其他处理逻辑
  }
}, 60000) // 每分钟检查一次