阐述 Vue 应用中如何实现日志管理和性能指标上报，构建完整的可观测性体系。

大家好，我是老司机，今天咱们聊聊Vue应用的可观测性，也就是怎么给你的代码装上眼睛和耳朵，让它自己汇报工作，让你不用天天盯着屏幕，也能知道它过得好不好。

咱们今天主要讲两方面：日志管理和性能指标上报。目标是构建一个完整的可观测性体系。

第一部分：日志管理——给你的代码装个嘴巴

你想知道你的Vue应用发生了什么，最直接的方法就是让它说话，也就是打印日志。但日志打印也是门学问，不是随便 console.log 就完事了。

• 1.1 为什么要统一日志管理？

  • 方便Debug: 当出现问题时，可以通过日志快速定位问题所在。
  • 监控应用状态: 通过分析日志，可以了解应用的运行状况，例如用户行为、错误发生频率等。
  • 数据分析: 可以对日志进行分析，提取有价值的信息，用于优化应用。
  • 集中管理: 可以将所有日志集中存储和管理，方便查询和分析。

• 1.2 如何选择合适的日志库？

  Vue本身并没有内置日志功能，我们需要借助第三方库。常用的有：

  • console: 浏览器自带，简单粗暴，适合快速Debug。
  • vue-logger: Vue官方推荐，简单易用，支持日志级别。
  • loglevel: 轻量级日志库，功能强大，支持自定义日志级别和输出方式。
  • winston: 功能最强大的日志库，支持多种输出目标，例如文件、数据库、云服务等。

  这里我们选择loglevel作为例子，因为它足够简单，也足够强大。

  npm install loglevel

• 1.3 在Vue应用中集成loglevel

  首先，创建一个logger.js文件：

  import * as log from 'loglevel';
  
  // 设置日志级别，例如只显示error和warn
  log.setLevel(log.levels.WARN);
  
  // 可选：自定义日志输出格式
  const originalFactory = log.methodFactory;
  log.methodFactory = function (methodName, logLevel, logger) {
    const rawMethod = originalFactory(methodName, logLevel, logger);
  
    return function () {
      const messages = Array.prototype.slice.call(arguments);
      messages.unshift(`[${new Date().toISOString()}]`);
      rawMethod.apply(undefined, messages);
    };
  };
  log.enableAll();
  
  export default log;

  然后，在你的Vue组件中使用它：

  <template>
    <div>
      <button @click="handleClick">点击我</button>
    </div>
  </template>
  
  <script>
  import log from './logger';
  
  export default {
    methods: {
      handleClick() {
        log.debug('按钮被点击了');
        log.info('这是一个信息');
        log.warn('这是一个警告');
        log.error('发生了一个错误');
        try {
          throw new Error('测试错误');
        } catch (e) {
          log.error('捕获到一个错误:', e);
        }
      }
    }
  };
  </script>

  这样，你就可以在控制台中看到各种级别的日志了。

• 1.4 日志级别划分

  合理划分日志级别非常重要，可以让你快速找到关键信息。loglevel 提供了以下几种级别：

  日志级别	描述
  trace	最详细的日志，用于追踪代码执行流程。
  debug	用于调试的日志，例如变量值、函数调用等。
  info	用于记录一般信息的日志，例如用户登录、页面加载等。
  warn	用于记录警告信息的日志，例如即将发生的错误、不推荐的操作等。
  error	用于记录错误信息的日志，例如网络请求失败、数据验证失败等。
  silent	禁用所有日志输出。

• 1.5 生产环境的日志配置

  在生产环境中，通常不需要输出所有级别的日志，可以只输出 warn 和 error 级别的日志，以减少性能开销。

  // logger.js
  import * as log from 'loglevel';
  
  if (process.env.NODE_ENV === 'production') {
    log.setLevel(log.levels.WARN);
  } else {
    log.setLevel(log.levels.DEBUG);
  }
  
  export default log;

• 1.6 将日志发送到服务器

  仅仅在控制台打印日志是不够的，我们需要将日志发送到服务器，以便进行集中管理和分析。可以使用以下几种方式：

  • 自定义接口: 自己写一个接口，将日志数据发送到服务器。
  • 第三方日志服务: 使用现成的日志服务，例如Sentry, Loggly, Papertrail等。

  这里我们以自定义接口为例，演示如何将日志发送到服务器：

  // logger.js
  import * as log from 'loglevel';
  import axios from 'axios'; // 确保安装了axios
  
  const sendLogToServer = (level, ...messages) => {
    const logData = {
      level: level,
      message: messages.join(' '),
      timestamp: new Date().toISOString()
    };
  
    axios.post('/api/logs', logData)
      .catch(error => {
        console.error('Failed to send log to server:', error); // 避免日志发送失败导致死循环
      });
  };
  
  const originalFactory = log.methodFactory;
  log.methodFactory = function (methodName, logLevel, logger) {
    const rawMethod = originalFactory(methodName, logLevel, logger);
  
    return function () {
      const messages = Array.prototype.slice.call(arguments);
      messages.unshift(`[${new Date().toISOString()}]`);
      rawMethod.apply(undefined, messages);
  
      // 发送日志到服务器
      sendLogToServer(methodName, ...messages);
  
      rawMethod.apply(undefined, messages);
    };
  };
  log.enableAll();
  
  export default log;

  注意:

  • 你需要创建一个 /api/logs 接口，用于接收日志数据。
  • 在发送日志时，需要处理可能发生的错误，避免死循环。
  • 可以对日志数据进行格式化和压缩，以减少网络传输量。
  • 避免在日志中泄露敏感信息，例如用户密码。

第二部分：性能指标上报——给你的代码装个温度计和心率监测器

光知道发生了什么还不够，我们还需要知道应用运行得怎么样，也就是性能指标。

• 2.1 为什么要上报性能指标？

  • 监控应用性能: 可以实时监控应用的性能指标，例如页面加载时间、API响应时间、错误率等。
  • 发现性能瓶颈: 可以通过分析性能指标，找出性能瓶颈，例如慢查询、内存泄漏等。
  • 优化应用性能: 可以根据性能指标，优化应用性能，例如优化代码、升级硬件等。
  • 用户体验: 直接影响用户体验，一个缓慢的应用会降低用户满意度。

• 2.2 需要上报哪些性能指标？

  • 页面加载时间: 包括首屏加载时间、完全加载时间等。
  • API响应时间: 包括请求时间、响应时间、延迟等。
  • 错误率: 包括JavaScript错误、HTTP错误等。
  • 资源加载时间: 包括图片、CSS、JS等资源的加载时间。
  • 内存使用情况: 包括堆内存使用量、内存泄漏等。
  • CPU使用率:
  • FPS (Frames Per Second): 帧率，衡量动画流畅度。
  • 用户交互延迟: 例如点击事件响应时间。
  • Network Information: 网络类型，带宽等。

• 2.3 如何获取性能指标？

  • Performance API: 浏览器提供的API，可以获取页面加载时间、资源加载时间等。
  • window.onerror: 捕获JavaScript错误。
  • window.addEventListener('unhandledrejection'): 捕获Promise rejected错误。
  • 自定义代码: 可以通过自定义代码，获取API响应时间、内存使用情况等。
  • Vue Devtools: 浏览器扩展，用于调试Vue应用，可以查看组件性能、数据流等。

• 2.4 使用 Performance API 获取页面加载时间

  function getPageLoadTime() {
    if (window.performance) {
      const timing = window.performance.timing;
      const loadTime = timing.loadEventEnd - timing.navigationStart;
      return loadTime;
    } else {
      return null;
    }
  }
  
  // 在页面加载完成后调用
  window.addEventListener('load', () => {
    const loadTime = getPageLoadTime();
    if (loadTime) {
      console.log('页面加载时间:', loadTime, 'ms');
      // 上报到服务器
      sendMetricToServer('pageLoadTime', loadTime);
    }
  });

• 2.5 使用 Performance API 获取资源加载时间

  function getResourceLoadTime() {
    if (window.performance) {
      const entries = window.performance.getEntriesByType('resource');
      const resourceTimings = entries.map(entry => ({
        name: entry.name,
        duration: entry.duration,
        entryType: entry.entryType
      }));
      return resourceTimings;
    } else {
      return [];
    }
  }
  
  // 在页面加载完成后调用
  window.addEventListener('load', () => {
    const resourceTimings = getResourceLoadTime();
    console.log('资源加载时间:', resourceTimings);
    // 上报到服务器
    resourceTimings.forEach(timing => {
      sendMetricToServer('resourceLoadTime', timing.duration, { resourceName: timing.name, resourceType: timing.entryType });
    });
  });

• 2.6 捕获 JavaScript 错误

  window.onerror = function(message, source, lineno, colno, error) {
    console.error('JavaScript错误:', message, source, lineno, colno, error);
    // 上报到服务器
    sendErrorToServer({
      message: message,
      source: source,
      lineno: lineno,
      colno: colno,
      error: error ? error.stack : null // 包含堆栈信息
    });
    return true; // 阻止浏览器默认错误处理
  };
  
  window.addEventListener('unhandledrejection', function(event) {
    console.error('Promise rejected:', event.reason);
    // 上报到服务器
    sendErrorToServer({
      message: 'Promise rejected',
      reason: event.reason ? event.reason.stack || event.reason.message || event.reason : 'Unknown reason'
    });
  });

• 2.7 上报指标到服务器

  和日志类似，我们需要将性能指标发送到服务器，以便进行分析和可视化。可以使用以下几种方式：

  • 自定义接口: 自己写一个接口，将指标数据发送到服务器。
  • 第三方监控服务: 使用现成的监控服务，例如Prometheus, Grafana, New Relic等。

  这里我们以自定义接口为例，演示如何将指标发送到服务器：

  import axios from 'axios';
  
  const sendMetricToServer = (metricName, value, extra = {}) => {
    const metricData = {
      name: metricName,
      value: value,
      timestamp: new Date().toISOString(),
      ...extra
    };
  
    axios.post('/api/metrics', metricData)
      .catch(error => {
        console.error('Failed to send metric to server:', error);
      });
  };
  
  const sendErrorToServer = (errorData) => {
    axios.post('/api/errors', errorData)
      .catch(error => {
        console.error('Failed to send error to server:', error);
      });
  };

  注意:

  • 你需要创建 /api/metrics 接口，用于接收指标数据。
  • 你需要创建 /api/errors 接口，用于接收错误数据。
  • 可以对指标数据进行聚合和采样，以减少网络传输量。
  • 可以使用不同的监控服务，根据自己的需求选择。

• 2.8 使用 Vue Router 的导航守卫进行页面性能监控

  在单页应用中，页面切换是通过 Vue Router 实现的。我们可以使用导航守卫来监控页面切换的性能。

  // router.js
  import Vue from 'vue';
  import VueRouter from 'vue-router';
  import Home from './components/Home.vue';
  import About from './components/About.vue';
  
  Vue.use(VueRouter);
  
  const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ];
  
  const router = new VueRouter({
    routes
  });
  
  router.beforeEach((to, from, next) => {
    // 开始计时
    window.performance.mark('routeStart');
    next();
  });
  
  router.afterEach((to, from) => {
    // 结束计时
    window.performance.mark('routeEnd');
    window.performance.measure('routeChange', 'routeStart', 'routeEnd');
  
    const routeChangeTime = window.performance.getEntriesByName('routeChange')[0].duration;
    console.log(`页面切换时间: ${routeChangeTime}ms`);
    sendMetricToServer('routeChangeTime', routeChangeTime, { to: to.path, from: from.path });
  
    // 清除 Performance API 的 entries
    window.performance.clearMarks('routeStart');
    window.performance.clearMarks('routeEnd');
    window.performance.clearMeasures('routeChange');
  });
  
  export default router;

• 2.9 性能监控的注意事项

  • 避免过度监控: 不要上报过多的指标，只关注关键指标。
  • 考虑性能开销: 监控本身也会带来性能开销，需要进行权衡。
  • 保护用户隐私: 避免收集敏感信息，例如用户ID、IP地址等。
  • 使用采样: 对数据进行采样，以减少数据量。
  • 数据可视化: 使用图表和仪表盘，将数据可视化，方便分析和监控。

第三部分：构建完整的可观测性体系——打造你的代码监控室

有了日志和性能指标，我们就可以构建一个完整的可观测性体系。这个体系包括：

• 数据采集: 使用各种方法采集日志和性能指标。
• 数据传输: 将数据传输到服务器。
• 数据存储: 将数据存储到数据库或日志服务中。
• 数据分析: 对数据进行分析，找出问题和瓶颈。
• 数据可视化: 使用图表和仪表盘，将数据可视化，方便监控和分析。
• 告警: 当指标超过阈值时，发送告警通知。

一个简单的可观测性体系架构：

[Vue Application] --> [Logger & Metrics Collector] --> [Data Transport (e.g., HTTP)] --> [Backend Server (API)] --> [Data Storage (e.g., Database, Log Service)] --> [Data Analysis & Visualization (e.g., Grafana, Kibana)] --> [Alerting System]

• 选择合适的工具和服务

  • 日志服务: Sentry, Loggly, Papertrail, ELK Stack (Elasticsearch, Logstash, Kibana)
  • 监控服务: Prometheus, Grafana, New Relic, Datadog
  • 数据库: InfluxDB, TimescaleDB

• 制定告警策略

  根据业务需求，制定合理的告警策略。例如：

  指标	阈值	告警级别	通知方式
  页面加载时间	> 3秒	警告	Email, Slack
  API 响应时间	> 1秒	警告	Email, Slack
  JavaScript 错误率	> 1%	错误	Email, Slack
  CPU 使用率	> 80%	警告	Email, Slack
  内存使用量	> 90%	警告	Email, Slack

• 持续优化

  可观测性体系不是一蹴而就的，需要不断优化和完善。

  • 定期审查告警策略， 避免误报和漏报。
  • 优化数据采集和传输， 减少性能开销。
  • 更新工具和服务， 保持技术领先。
  • 培训团队成员， 提高可观测性意识。

好了，今天的分享就到这里。希望大家能够通过今天的学习，给自己的Vue应用装上眼睛和耳朵，打造一个强大的可观测性体系，让你的代码乖乖地汇报工作，让你轻松掌握应用的运行状况。 记住，代码写得好，不如监控做得好！ 谢谢大家！