编程技术-前端性能监控、异常监控的一些记录

在前端开发中，异常监控是一个重要的环节，它可以帮助开发者及时发现和修复应用中的问题，提升用户体验。

常见异常类型

• 请求异常： 请求异常通常发生在客户端与服务器进行数据交互时，比如网络问题、服务器错误、API请求异常、资源请求异常等
• JS异常： JS异常是指在JavaScript代码执行过程中出现的异常，这可能包括语法错误、运行时错误、类型错误等。
• 环境异常 ： 环境异常是指由于客户端环境的不同（如不同的浏览器、设备、操作系统）导致的异常，这可能包括兼容性问题、性能问题、小程序、容器等。
• 业务异常 ： 业务异常是指在执行特定业务逻辑时出现的错误，这可能包括用户输入错误、数据处理错误、业务流程错误等等。

---

常用的一些异常监控的方法

window.error

window.error 用于捕获和处理JavaScript运行时错误，提供更详细的错误堆栈信息，例如脚本执行报错，
但需要注意的是，它可能无法捕获所有类型的资源加载错误，比如某些跨域资源的错误。

window.onerror = function(message, source, lineno, colno, error) {
  // 构建错误信息对象
  const errorInfo = {
    message: message, // 错误消息
    source: source, // 错误发生的URL
    lineno: lineno, // 出错的行号
    colno: colno, // 列号
    error: error // 错误对象
  };

  // 上报错误信息到服务器或错误监控系统
  reportError(errorInfo);
};

window.addEventListener(‘error’)

window.addEventListener(‘error’)也可以用来捕获错误，但它只能捕获资源加载错误，例如<img>或<script>标签加载失败

window.addEventListener('error', function(event) {
  // 过滤出非JavaScript错误
  if (event.target instanceof HTMLScriptElement ||
      event.target instanceof HTMLLinkElement ||
      event.target instanceof HTMLImageElement) {
    // 构建错误信息对象
    const errorInfo = {
      target: event.target,
      message: event.message,
      // 其他需要的信息
    };

    // 上报错误信息到服务器或错误监控系统
    reportError(errorInfo);
  }
});

window.addEventListener(‘load’)

用来监听页面的加载状态。load事件在页面所有资源（如图片、样式表等）加载完成后触发

// 监听页面加载完成
window.addEventListener('load', function() {
  // 页面所有资源加载完成
  console.log('Page fully loaded.');
});

看到这个可能很多人会想到window.onload，他们还是有一些区别的：

• 触发时间： window.onload 事件是在页面及其所有资源（如图像和脚本）加载完毕后才触发，而 window.addEventListener(‘load’)则是在页面加载完毕后触发。
• 多次绑定： window.onload 只能绑定一个处理程序，而 window.addEventListener(‘load’) 可以绑定多个处理程序。
• 兼容性： window.onload 在 IE8 及以下版本的浏览器中不支持，而 window.addEventListener(‘load’) 兼容性更好

window.addEventListener(‘DOMContentLoaded’)

用于监听 DOMContentLoaded 事件的代码片段。当 HTML 文档已经被完全解析，并且所有延迟的脚本（例如 <script defer>）都已经加载和执行后，DOMContentLoaded 事件就会被触发，不等待样式表、图片和子框架的加载。

注意：由于 DOMContentLoaded 事件可能会在运行脚本之前就被触发，所以在添加监听器之前可以通过检查 document.readyState 是否为 “loading” 检查文档的状态，来判断是否应该添加监听器

function doSomething() {
  console.info("DOM loaded");
}

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", doSomething);
} else {
  doSomething();
}

window.performance

window.performance是一个全局属性，用于获取关于浏览器性能的信息。它返回一个Performance对象，你可以通过这个对象来收集有关当前上下文（例如 window 或 worker）的性能信息。可以用来监控页面加载性能，包括资源加载时间等。

window.performance很强大，api很多, 随便说几个

• performance.memory： 获取 JavaScript 对内存的占用情况，包括已使用的 JS 堆大小、总 JS 堆大小以及内存大小限制。

• performance.navigation： 提供有关网页导航的信息，例如重定向数量、页面是如何加载的等信息。

• performance.timing： 包含了一系列关于页面加载时间的详细信息，例如起始时间、DNS 查询开始时间、TCP 连接建立时间等

// 获取页面加载总耗时
var duration = window.performance.timing.loadEventEnd - window.performance.timing.navigationStart;
console.log('页面加载总耗时: ' + duration + 'ms');

// 获取DNS查询耗时
const dnsQueryTime = window.performance.timing.domainLookupEnd - window.performance.timing.domainLookupStart;
console.log('DNS查询耗时: ' + dnsQueryTime + 'ms');

// 获取TCP连接耗时
const tcpConnectionTime = window.performance.timing.connectEnd - window.performance.timing.connectStart;
console.log('TCP连接耗时: ' + tcpConnectionTime + 'ms');

// 获取页面重定向耗时
const redirectTime = window.performance.timing.redirectEnd - window.performance.timing.redirectStart;
console.log('页面重定向耗时: ' + redirectTime + 'ms');

// 获取首次渲染时间
const renderTime = window.performance.timing.responseStart - window.performance.timing.fetchStart;
console.log('首次渲染时间: ' + renderTime + 'ms');

// 获取下载服务端返回数据的时间
const downloadTime = window.performance.timing.responseEnd - window.performance.timing.responseStart;
console.log('下载服务端返回数据的时间: ' + downloadTime + 'ms');

// 获取解析DOM树耗时
const domParseTime = window.performance.timing.domComplete - window.performance.timing.domInteractive;
console.log('解析DOM树耗时: ' + domParseTime + 'ms');

navigator.sendBeacon

navigator.sendBeacon() 是一个在Web API中用于异步发送HTTP POST请求的方法，通常用于向服务器发送小量数据，它允许你在页面卸载时发送异步请求，这对于上报错误或性能数据非常有用，因为它不会阻塞页面的卸载过程。

特性

• 发出的是异步请求，并且是POST请求，后端解析参数时，需要注意处理方式；
• 发出的请求，是放到浏览器任务队列执行的，脱离了当前页面，所以不会阻塞当前页面的卸载和后面页面的加载过程，用户体验较好；
• 只能判断出是否放入浏览器任务队列，不能判断是否发送成功

注意

• 发送的数据大小有限制，具体数值可能因浏览器不同而有所差异。当数据长度达到一定值时，异步请求可能会进入浏览器发送队列失败。
• 存在兼容性问题，除了IE，大部分浏览器都已经支持。如果不支持，可以用同步的xhr来替代

// 上报错误信息
function reportError(error) {
  const url = 'https://your-error-reporting-endpoint.com';
  const data = new URLSearchParams({
    error: error.message,
    stack: error.stack
  });
  navigator.sendBeacon(url, data);
}

// 在捕获到错误时调用
reportError(error);

1*1像素gif

在前端监控中，1x1像素的GIF图像通常被用作跟踪像素或Web Beacon。这种技术通过在页面中嵌入一个极小的透明GIF图像，来记录用户的访问行为和页面性能数据。当用户访问页面时，这个小图像会向服务器发送一个请求，从而收集用户行为数据或页面性能指标。

1x1像素的GIF图像有几个优点：

• 体积小： 1x1像素的GIF图像文件体积非常小，通常只需要几十个字节，这有助于减少网络传输数据量，提高数据上报的效率。

• 透明性： GIF图像可以设置为完全透明，这样即使在页面上显示，也不会对用户体验造成干扰。

• 兼容性： GIF格式支持动画和透明，且被所有主流浏览器支持，因此可以确保监控数据的准确上报。

• 不阻塞页面加载： 由于文件体积小，1x1像素的GIF图像不会对页面加载速度产生影响。

• 易于隐藏： 由于尺寸极小，这种图像可以轻松地隐藏在页面的角落或边缘，用户几乎无法察觉。

axios 请求/响应拦截器

// 设置请求拦截器
axios.interceptors.request.use(config => {
  // 请求前的异常检查
  return config;
}, error => {
  // 请求错误处理
  return Promise.reject(error);
});

// 设置响应拦截器
axios.interceptors.response.use(response => {
  // 响应成功的处理
  return response;
}, error => {
  // 响应错误处理
  // 这里可以将错误信息上报给异常监控系统
  console.error('Axios Response Error:', error);
  return Promise.reject(error);
});

Vue的errorHandler

在Vue 2中，使用Vue.config.errorHandler来自定义错误处理。

// main.js
Vue.config.errorHandler = (err, vm, info) => {
  // 错误处理逻辑
  console.error('Vue 2 Error:', err, info);
  // 上报错误到监控系统
};

// 组件中使用
try {
  // 可能会抛出错误的代码
} catch (error) {
  // 捕获异常并调用全局错误处理函数
  Vue.config.errorHandler(error, this, 'Error in Component');
}

Vue 3中，你可以使用app.config.errorHandler来处理异常

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.config.errorHandler = (err, instance, info) => {
  // 错误处理逻辑
  console.error('Vue 3 Error:', err, info);
  // 上报错误到监控系统
};

app.mount('#app');

React的ErrorBoundary

import React, { Component } from 'react';

class MyComponent extends Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    // 更新state使下一次渲染能够显示降级后的UI
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // 你也可以将错误日志上报给服务器
    console.error('React Error:', error, info);
  }

  render() {
    if (this.state.hasError) {
      // 你可以渲染任何自定义的降级UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default MyComponent;

try…catch

try…catch语句只能捕获同步错误，对于异步错误（如Promise和setTimeout）则无法捕获

try {
  // 这里放置可能会引发错误的代码
} catch (error) {
  // 这里是错误被捕获的地方，你可以在这里处理错误
  console.log('Error caught:', error);
}

Sentry

Sentry是一个开源的监控系统，能支持服务端与客户端的监控，还有个强大的后台错误分析、报警平台。主要用于如何快速的发现故障。支持几乎所有主流开发语言和平台，并提供了现代化UI，它专门用于监视错误和提取执行适当的事后操作所需的所有信息，官方提供了多个语言的SDK。让开发者第一时间获悉错误信息，并方便的整合进自己和团队的工作流中。

在vue项目里的使用大概步骤，具体可能会有些出入，根据实际应用看吧：
1、安装 Sentry
通过 npm 或 yarn 来安装 Sentry SDK

npm install --save @sentry/vue

2、配置 Sentry
在你的 Vue 项目的入口文件（通常是 main.js 或 main.ts）中，引入 Sentry 并使用你的 DSN 进行初始化：

import { createApp } from 'vue';
import App from './App.vue';
import * as Sentry from '@sentry/vue';
import { Integrations } from '@sentry/tracing';

const app = createApp(App);

Sentry.init({
  app,
  dsn: '你的DSN',
  integrations: [new Integrations.BrowserTracing()],
  tracesSampleRate: 1.0,
});

app.mount('#app');

3、环境配置
在开发环境中，你可能不希望将错误报告发送到 Sentry，以避免泄露敏感信息。你可以通过环境变量来控制 Sentry 的行为：

const isProduction = import.meta.env.MODE === 'production';

if (isProduction) {
  Sentry.init({
    app,
    dsn: '你的DSN',
    integrations: [new Integrations.BrowserTracing()],
    tracesSampleRate: 1.0,
  });
}

4、上传 SourceMap
为了能够更准确地定位到错误发生的源头，你需要配置SourceMap。你可以使用vite-plugin-sentry插件来自动上传SourceMap文件

yarn add @sentry/tracing vite-plugin-sentry

import viteSentry from 'vite-plugin-sentry';

export default defineConfig({
  plugins: [
    viteSentry({
      // 你的Sentry DSN
      url: 'https://publickey@hostname/1234567890abcdef',
      authToken: 'yourAuthToken',
      org: 'yourOrgName',
      project: 'yourProjectName',
      release: 'yourReleaseVersion',
      deploy: {
        env: 'production',
      },
      setCommits: {
        auto: true,
      },
      sourceMaps: {
        include: ['./src'],
        ignore: ['node_modules'],
        urlPrefix: '~/',
      },
    }),
  ],
  build: {
    sourcemap: true,
  },
});

5、错误处理
在 Vue 3 中，你可以使用 ErrorHandler 来捕获应用程序中的错误：

import { createApp } from 'vue';
import App from './App.vue';
import { createErrorHandler } from '@sentry/vue';

const app = createApp(App);

app.config.errorHandler = createErrorHandler({
  Vue,
  dsn: '你的DSN',
  development: false
});

app.mount('#app');

6、Sentry 还提供了性能监控功能，你可以使用 BrowserTracing 集成来追踪页面加载和用户交互的性能数据等等

---

还有一些其他的Fundebug、FrontJS、New Relic、Bugsnag、TrackJS、烛龙等等，，，听说过没用过，具体用的话再去查资料吧。