JavaScript 怎么通过高阶函数实现对错误日志的统一格式化收集-js教程-PHP中文网

javascript中可通过高阶函数封装日志逻辑，实现错误捕获、格式化与上报的统一处理：1. createerrorlogger返回增强日志函数；2. witherrorhandling包装异步操作自动报错；3. setupglobalerrorcapture集成全局监听；4. 多高阶函数组合构建可配置日志管道。

javascript 怎么通过高阶函数实现对错误日志的统一格式化收集

JavaScript 中可以通过高阶函数封装日志收集逻辑，把错误捕获、格式化、上报等行为抽象为可复用的函数，实现统一处理。核心思路是：用一个函数接收原始日志方法（如 console.error 或自定义上报函数），返回一个增强后的日志函数，自动注入时间、环境、堆栈、上下文等字段。

封装带格式化的错误日志函数

定义一个高阶函数 createErrorLogger，它接收配置项（如环境、服务名、上报地址）和底层发送函数，返回一个可直接调用的 logError 函数：

自动捕获 error.stack 和 error.message
补全时间戳、运行环境（process.env.NODE_ENV 或 location.hostname）、用户 ID（若已登录）等元信息
支持传入额外上下文（如当前页面 URL、操作步骤、请求参数）

示例：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

const createErrorLogger = (config) => {
  const { env = 'development', serviceName = 'web-app', sendToServer } = config;

  return (error, context = {}) => {
    const now = new Date().toISOString();
    const formatted = {
      timestamp: now,
      level: 'error',
      env,
      serviceName,
      message: error?.message || 'Unknown error',
      stack: error?.stack || 'No stack trace',
      url: typeof window !== 'undefined' ? window.location.href : '',
      userAgent: typeof navigator !== 'undefined' ? navigator.userAgent : '',
      ...context
    };

    // 同时输出到控制台（开发时方便调试）
    if (env === 'development') {
      console.error('[Formatted Error]', formatted);
    }

    // 异步上报（避免阻塞主线程）
    if (sendToServer && typeof sendToServer === 'function') {
      sendToServer(formatted).catch(() => {});
    }
  };
};

// 使用
const logError = createErrorLogger({
  env: process.env.NODE_ENV,
  serviceName: 'checkout-page',
  sendToServer: (data) => fetch('/api/log', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  })
});

// 在任意地方调用
try {
  riskyOperation();
} catch (e) {
  logError(e, { action: 'submit-payment', orderId: '12345' });
}

用高阶函数包装异步操作自动捕获错误

对 fetch、Promise 或 API 调用进行统一错误拦截，避免每个地方重复写 try/catch：

定义 withErrorHandling，接收一个异步函数和日志函数，返回一个自动捕获并格式化上报错误的新函数
保留原始返回值（成功时透传结果），只在失败时触发日志
可叠加使用，比如先加重试逻辑，再加错误日志

示例：

const withErrorHandling = (asyncFn, logFn) => async (...args) => {
  try {
    return await asyncFn(...args);
  } catch (error) {
    logFn(error, {
      operation: asyncFn.name || 'anonymous-async-op',
      args: JSON.stringify(args).length  res.json()).catch(() => {
  // 这里仍可做业务级降级
});

全局错误监听 + 高阶函数增强

结合浏览器原生事件（window.onerror、window.addEventListener('unhandledrejection')），用高阶函数注入统一格式逻辑：

避免手动拼接错误对象，统一走格式化函数
区分同步错误、异步拒绝、资源加载失败（error 事件）
过滤掉已知第三方脚本错误（如 CDN 失败）或白名单外域名

示例：

const setupGlobalErrorCapture = (logFn) => {
  window.onerror = (message, source, lineno, colno, error) => {
    logFn(error || { message, source, lineno, colno }, {
      type: 'window-error',
      source
    });
  };

  window.addEventListener('unhandledrejection', (event) => {
    logFn(event.reason, {
      type: 'unhandled-rejection',
      promise: event.promise
    });
  });

  // 可选：监听 script/link 加载失败
  document.addEventListener('error', (event) => {
    if (event.target && ['SCRIPT', 'LINK'].includes(event.target.tagName)) {
      logFn(new Error(`Resource load failed: ${event.target.src || event.target.href}`), {
        type: 'resource-error',
        target: event.target.tagName,
        src: event.target.src || event.target.href
      });
    }
  }, true);
};

setupGlobalErrorCapture(logError);

组合多个高阶函数实现日志管道

利用函数式思想，把不同职责拆成独立高阶函数，再组合（类似中间件）：

withTimestamp：添加时间字段
withContext：注入全局上下文（如用户、设备信息）
withSampling：按比例采样，避免日志爆炸
withRetry：上报失败时自动重试

组合方式（从右到左执行）：

const enhancedLogger = withRetry(
  withSampling(
    withContext(
      withTimestamp(logError)
    )
  )
);

这样既保持单个函数职责单一，又灵活可配，适合中大型项目演进。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南