告别console.log：在UniApp中打造一个媲美专业框架的本地日志系统

当你的UniApp应用在生产环境中突然崩溃，用户反馈"页面白屏"却无法复现时；当后台数据显示异常请求激增，却找不到具体触发场景时——这些正是我们需要超越 console.log 的典型场景。本文将带你构建一个具备 日志分级 、 自动归档 和 崩溃保护机制 的完整日志系统，让移动端调试从"盲人摸象"进化到"全息投影"。

1. 为什么需要专业级日志系统

在Chrome开发者工具中游刃有余的我们，常常低估了移动端日志的复杂性。当代码运行在用户设备上时，你会发现：

• 日志易失性 ：应用崩溃时控制台输出瞬间消失
• 信息过载 ：生产环境海量日志中难以定位关键错误
• 性能隐患 ：无节制的日志写入可能阻塞UI线程

对比传统 console.log ，专业日志系统应具备：

特性	console.log	专业日志系统
持久化存储	❌	✅
日志分级	❌	✅
自动归档	❌	✅
线程安全	❌	✅
生产环境友好	❌	✅

// 典型问题案例 - 同步写入导致界面卡顿
function processOrder(data) {
  console.log('开始处理订单', data) // 阻塞主线程
  // ...业务逻辑
}

2. 核心架构设计

2.1 日志分级控制

采用RFC5424标准的 四级日志体系 ：

1. DEBUG ：开发调试详细信息
2. INFO ：关键业务流程节点
3. WARN ：可恢复的异常情况
4. ERROR ：需要立即干预的严重错误

class LogLevel {
  static DEBUG = 0
  static INFO = 1
  static WARN = 2
  static ERROR = 3

  static currentLevel = LogLevel.INFO

  static setLevel(level) {
    this.currentLevel = level
  }
}

提示：生产环境建议设置默认级别为WARN，通过远程配置可动态调整

2.2 写入策略优化

双缓冲写入机制 解决性能问题：

1. 内存缓冲区：快速接收日志条目
2. 文件写入器：定时批量写入存储

// 环形缓冲区实现
class LogBuffer {
  constructor(size = 1000) {
    this.buffer = new Array(size)
    this.writeIndex = 0
    this.readIndex = 0
  }

  add(entry) {
    this.buffer[this.writeIndex++] = entry
    if (this.writeIndex >= this.buffer.length) {
      this.writeIndex = 0
    }
  }

  flush() {
    const entries = []
    while (this.readIndex !== this.writeIndex) {
      entries.push(this.buffer[this.readIndex++])
      if (this.readIndex >= this.buffer.length) {
        this.readIndex = 0
      }
    }
    return entries
  }
}

3. 高级功能实现

3.1 日志文件管理

智能轮转策略 防止存储爆炸：

• 按天分割： logs/20230801.log
• 大小限制：单个文件不超过5MB
• 自动清理：保留最近7天日志

# 示例日志目录结构
_doc/
└── logs/
    ├── 20230801.log (4.8MB)
    ├── 20230802.log (5.1MB) # 触发分割
    └── 20230803.log (2.4MB)

实现代码关键点：

function checkFileSize(fileEntry) {
  return new Promise((resolve) => {
    fileEntry.file(file => {
      resolve(file.size > 5 * 1024 * 1024) // 5MB限制
    })
  })
}

3.2 异常捕获集成

全局错误拦截 增强健壮性：

// Vue错误处理
Vue.config.errorHandler = (err, vm, info) => {
  logger.error('Vue异常', err, '组件:', vm.$options.name, '生命周期:', info)
}

// 未捕获异常
window.onerror = (message, source, lineno, colno, error) => {
  logger.error('全局异常', { message, source, lineno, colno, stack: error?.stack })
}

// Promise拒绝
window.addEventListener('unhandledrejection', event => {
  logger.error('未处理的Promise拒绝', event.reason)
})

4. 工程化集成方案

4.1 Vue插件封装

将日志系统转化为 即插即用 的Vue插件：

const LoggerPlugin = {
  install(Vue, options) {
    const logger = new Logger(options)
    
    Vue.prototype.$log = logger
    Vue.config.globalProperties.$log = logger
    
    // 注入上下文便于模板使用
    Vue.mixin({
      created() {
        this.logger = logger.withContext(this.$options.name || 'Anonymous')
      }
    })
  }
}

// 使用示例
createApp(App).use(LoggerPlugin, {
  level: process.env.NODE_ENV === 'development' ? LogLevel.DEBUG : LogLevel.WARN
})

4.2 性能监控联动

日志与性能数据关联 分析：

function trackPerformance() {
  const start = performance.now()
  
  return {
    end: (name) => {
      const duration = performance.now() - start
      logger.info(`[PERF] ${name}`, { 
        duration: duration.toFixed(2),
        memory: performance.memory?.usedJSHeapSize 
      })
    }
  }
}

// 使用示例
const tracker = trackPerformance()
fetchData().then(() => tracker.end('data_loading'))

5. 实战优化技巧

5.1 敏感信息过滤

隐私保护 是生产环境必须考虑的因素：

const sensitiveKeys = ['password', 'token', 'creditCard']

function sanitize(data) {
  if (typeof data === 'object') {
    return Object.keys(data).reduce((obj, key) => {
      obj[key] = sensitiveKeys.includes(key) ? '***' : data[key]
      return obj
    }, {})
  }
  return data
}

logger.info('用户登录', sanitize({
  username: 'test',
  password: '123456' // 实际日志中将显示为***
}))

5.2 跨平台兼容方案

处理 iOS/Android差异 的常见问题：

1. 存储路径选择：

   const logDir = plus.os.name === 'iOS' ? 'Library/Caches/logs' : '_doc/logs'
   

2. 文件系统权限：

   function ensureDirExists(path) {
     return new Promise((resolve) => {
       plus.io.resolveLocalFileSystemURL(path, resolve, () => {
         plus.io.requestFileSystem(plus.io.PRIVATE_WWW, fs => {
           fs.root.getDirectory(path, { create: true }, resolve)
         })
       })
     })
   }
   

在真实项目中落地这套系统后，最让我意外的是它帮助发现的 隐性性能问题 ——通过分析WARN级别的操作延迟日志，我们定位到一个第三方组件在低端安卓设备上的渲染瓶颈。这也印证了好的日志系统不仅是调试工具，更是产品质量的雷达系统。