评论

[生存指南]面试题(3): 如何做前端sentry性能监控中的错误和数据采集

sentry.oi 代码大家都会部署,数据捕捉才是关键

随着 “大前端” 近两年愈演愈烈(juan),需要我们掌握的技能也越来越多,延伸而来的就是各种前端性能和异常监控框架。

市面上有很多种开源的框架,如 Sentry、Rollbar 等,大厂也会自己建立一套完整的监控体系,有时候还会配合后端的ELK系统一起使用,无论用什么框架,最关键的一步就是:前期的 数据采集和错误捕获, 这里为大家简单分享下一些主流的方式。

1、代码异常捕获 try-catch

try {
    // Some code that may throw an error
} catch (error) {
    //发送错误信息
    console.log(error);
    //sendError(error)
}

相信大家在一些关键的同步请求的时候,会用上try-catch,避免因为报错,导致整个功能弹出,这也是常规用来捕捉错误日志的方法。

在前端中使用try-catch语句可以帮助开发人员及时发现和解决错误,提高应用程序的健壮性和稳定性。同时,使用第三方错误监控工具可以自动化地收集和汇总错误信息,减少手动调试和排查错误的工作量。

2、页面监控window.onerror

 /** 
   * @param {String} errorMessage  错误信息 
   * @param {String} scriptURI   出错的文件 
   * @param {Long}  lineNumber   出错代码的行号 
   * @param {Long}  columnNumber  出错代码的列号 
   * @param {Object} errorObj    错误的详细信息,Anything 
   */ 
  window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) { 
    console.log("错误信息:" , errorMessage); 
    console.log("出错文件:" , scriptURI); 
    console.log("出错行号:" , lineNumber); 
    console.log("出错列号:" , columnNumber); 
    console.log("错误详情:" , errorObj); 
  } 

这种错误监听,可以获取同步和异步的方法,也是比较实用,且常规的一种错误监听的方法,此外,还能提供详尽的数据位置,地址等

3、异常捕获(addEventListener)

window.addEventListener(“error”)

// 监听 JavaScript 异常
window.addEventListener('error', function(event) {
    // 收集错误信息
    const error = {
        message: event.message,
        filename: event.filename,
        lineno: event.lineno,
        colno: event.colno,
        error: event.error,
    };
    //发送错误信息
});

//图片加载错误监听
image.addEventlistener("error",e => (
    e.preventDefault();
    //发送错误信息
    console.log(e);
}
// 监听 JavaScript 文件的加载状态
const script = document.createElement('script');

script.addEventListener('load', function(event) {
  // JavaScript 文件加载完成
  console.log('JavaScript file loaded');
});

script.addEventListener('error', function(event) {
  // JavaScript 文件加载失败
  console.error('JavaScript file failed to load');
});

script.src = 'path/to/javascript/file.js';
document.head.appendChild(script);

// 监听 CSS 文件的加载状态
const link = document.createElement('link');

link.addEventListener('load', function(event) {
  // CSS 文件加载完成
  console.log('CSS file loaded');
});

link.addEventListener('error', function(event) {
  // CSS 文件加载失败
  console.error('CSS file failed to load');
});

link.rel = 'stylesheet';
link.href = 'path/to/css/file.css';
document.head.appendChild(link);

也可以用另外一个省代码的写法

// 监听处理js/css
window .addEventListener("error", function (e) {
    var typeName = e.target.localName;
    var sourceUrl = "";
    if(typeName === "link"){
        sourceUrl = e.target.href;
    }else if(typeName === 'script'){
        sourceUrl = e.target.src;
    }
    //发送错误信息
});

使用 addEventListener 来监听 JavaScript 和 CSS 文件的加载状态可以帮助开发者及时发现和解决加载问题,提高应用程序的稳定性和可靠性,从而提升用户体验和满意度。

window.addEventListener(“unhandledrejection”)

window.addEventListener("unhandledrejection", function(event) {
  // 阻止默认行为,防止 Promise 异常被浏览器捕获并输出到控制台
  event.preventDefault();

  // 收集 Promise 异常信息
  const error = {
    message: event.reason.message,
    stack: event.reason.stack,
  };

  // 将异常信息发送到服务器或其他地方进行分析和报告
  sendErrorData(error);
});

在上面的代码中,我们使用 window.addEventListener(“unhandledrejection”) 方法来监听未处理的 Promise 异常,并收集异常信息。当 Promise 被拒绝时,会触发 unhandledrejection 事件,并将异常信息作为事件参数传递给回调函数。然后我们将异常信息发送到服务器或其他地方进行分析和报告。

需要注意的是,当 Promise 对象被拒绝时,浏览器会默认输出异常信息到控制台。为了防止 Promise 异常被浏览器捕获并输出到控制台,我们需要在回调函数中调用 event.preventDefault() 方法,阻止默认行为的发生。

使用 window.addEventListener(“unhandledrejection”) 方法来监听 JavaScript Promise 的拒绝状态可以帮助开发者及时发现和解决异常问题,提高应用程序的稳定性和可靠性,从而提升用户体验和满意度。

4、性能监听(Performance)

可以使用 Performance API 来做监听

// 初始化 Performance API
const perf = window.performance;

// 创建一个新的性能条目
const entry = perf.mark('start');

// 在某个时间点开始执行某段代码
const startTime = performance.now();

// 在某个时间点结束执行某段代码
const endTime = performance.now();

// 收集性能数据
const data = {
  duration: endTime - startTime,
  // 其他性能指标,如占用 CPU 时间、内存使用等等
};

// 将性能数据发送到服务器或其他地方进行分析和报告

Performance API 是浏览器提供的一组 API,用于监测前端应用程序的性能指标,帮助开发者发现性能问题并进行优化。Performance API 提供了多个方法和属性,可以监测页面加载时间、资源加载时间、代码执行时间、内存使用情况、帧率等等性能指标。

以下是 Performance API 中常用的一些方法和属性:

  • performance.mark(name):创建一个新的性能条目,并在当前时间点标记该条目。
  • performance.measure(name, startMarkName,endMarkName):在两个标记点之间测量性能,并创建一个新的性能条目。
  • performance.getEntries():返回所有的性能条目。
  • performance.getEntriesByName(name):返回指定名称的性能条目。
  • performance.now():返回当前时间点的时间戳,精度为毫秒。
  • performance.timing:返回页面加载时间的性能指标,包括 DNS 查询时间、TCP 连接时间、请求时间、响应时间等等。

5、框架层面的错误捕获

VUE: Vue.config.errorHandler

Vue.config.errorHandler 是 Vue.js 提供的一个全局错误处理器,用于捕获 Vue.js 应用程序中的未处理异常。以下是一个例子,演示如何使用 Vue.config.errorHandler 捕获 Vue.js 应用程序中的未处理异常:

Vue.config.errorHandler = function(err, vm, info) {
 // 收集异常信息
 const errorData = {
   message: err.message,
   stack: err.stack,
   info: info,
 };

 // 将异常信息发送到服务器或其他地方进行分析和报告
 sendError(errorData)
};

React: ErrorBoundary

React 的 ErrorBoundary 是 React 提供的一个组件,用于捕获 React 应用程序中的未处理异常。以下是一个例子,演示如何使用 ErrorBoundary 捕获 React 应用程序中的未处理异常:

class MyErrorBoundary extends React.Component {
 constructor(props) {
   super(props);
   this.state = { hasError: false };
 }

 static getDerivedStateFromError(error) {
   return { hasError: true };
 }

 componentDidCatch(error, info) {
   // 收集异常信息
   const errorData = {
     message: error.message,
     stack: error.stack,
     info: info,
   };

   // 将异常信息发送到服务器或其他地方进行分析和报告
   sendError(errorData);
 }

 render() {
   if (this.state.hasError) {
     return <h1>出错了!</h1>;
   }

   return this.props.children;
 }
}

我们使用 ErrorBoundary 组件来捕获 React 应用程序中的未处理异常,并收集异常信息。当 React 应用程序发生未处理异常时,会触发 componentDidCatch 事件,并将异常信息作为事件参数传递给回调函数。然后我们将异常信息发送到服务器或其他地方进行分析和报告。

最后一次编辑于  2023-07-25  
点赞 4
收藏
评论

1 个评论

  • 青寒
    青寒
    2023-07-25

    代码:你对我做了什么!!!

    2023-07-25
    赞同
    回复 1
    • 游戏人生
      游戏人生
      2023-07-25
      扒底裤ing。。。
      2023-07-25
      回复
登录 后发表内容