前端错误监控与日志收集实践

前端错误监控与日志收集是确保应用程序稳定性和用户体验的关键部分。今天我们来聊聊前端常用的前端错误监控与日志收集方法：

使用try-catch捕获错误

在可能出现错误的代码块中，使用try-catch结构捕获错误：

   try {
     // 可能会抛出错误的代码
   } catch (error) {
     // 捕获到的错误
     console.error('An error occurred:', error);
     // 将错误报告给后端日志服务
     reportErrorToBackend(error);
   }

在reportErrorToBackend函数中，你可以使用fetch或axios等库将错误信息发送到服务器。

使用浏览器的window.onerror事件

全局错误处理器可以捕获未被捕获的错误：

   window.onerror = function(errorMessage, fileName, lineNumber, columnNumber, error) {
     // 记录错误信息
     console.error(errorMessage, fileName, lineNumber, columnNumber, error);
     // 发送到后端
     reportErrorToBackend(errorMessage, fileName, lineNumber, columnNumber, error);
     // 返回true表示已处理，防止浏览器默认行为
     return true;
   };

使用第三方库如TrackJS

TrackJS提供了一种自动化的方式来收集和分析错误：

   <script src="https://cdn.trackjs.com/track.js"></script>
   <script>
   TrackJS.configure({
     token: 'your_token_here',
     application: 'your_application_name',
   });
   </script>

使用Error Boundary in React

如果使用React，可以利用Error Boundaries捕获和处理组件内的错误：

   class ErrorBoundary extends React.Component {
     constructor(props) {
       super(props);
       this.state = { hasError: false, errorInfo: null };
     }

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

     componentDidCatch(error, errorInfo) {
       // 记录错误
       reportErrorToBackend(error, errorInfo);
     }

     render() {
       if (this.state.hasError) {
         return <h1>Something went wrong.</h1>;
       }
       return this.props.children; // Normally, re-render children
     }
   }

   // 使用错误边界包裹可能出错的组件
   <ErrorBoundary>
     <MyComponentThatMayThrow />
   </ErrorBoundary>

使用Vue.js的错误捕获

Vue.js提供了全局错误处理和组件错误处理：

   // 全局错误处理
   Vue.config.errorHandler = function(error, instance, info) {
     console.error(error, instance, info);
     reportErrorToBackend(error, info);
   };

   // 或者在组件中
   export default {
     created() {
       this.$onErrorCapture = (error, instance, info) => {
         console.error(error, instance, info);
         reportErrorToBackend(error, info);
       };

},
   };

使用Angular的ErrorHandler

Angular 提供了一个ErrorHandler服务，可以用来处理全局错误：

   import { ErrorHandler, Injectable } from '@angular/core';

   @Injectable()
   export class CustomErrorHandler implements ErrorHandler {
     handleError(error) {
       console.error('An error occurred:', error);
       reportErrorToBackend(error);
     }
   }

并在AppModule中注册这个错误处理器：

   @NgModule({
     providers: [{ provide: ErrorHandler, useClass: CustomErrorHandler }],
     // ...
   })
   export class AppModule {}

使用 Sentry Sentry

是一个流行的错误跟踪服务，它提供了详细的错误报告、上下文信息和堆栈追踪：

   <script src="https://browser.sentry-cdn.com/5.16.4/minimal@sentry.io/dist/sentry.min.js"
     crossorigin="anonymous"></script>
   <script>
     Sentry.init({
       dsn: 'your_sentry_dsn',
       release: 'your_app@version',
       integrations: [new Sentry.Integrations.BrowserTracing()],
       tracesSampleRate: 0.5, // 可以调整采样率
     });
   </script>

使用 LogRocket LogRocket

提供了用户行为录制和错误追踪的功能：

   <script>
     !function(LR){var t;t=document.createElement("script"),
     t.setAttribute("src","https://logs-01.logrocket.io/ln.js?projectid=your_project_id"),
     t.setAttribute("data-logrocket","true"),t.setAttribute("async","true"),
     document.body.appendChild(t)}();
   </script>

使用Loggly

Loggly 是一个云日志管理服务：

   <script src="https://js.loggly.com/inputs/your_loggly_key.js" async></script>
   <script>
     logglyTracker.push(['log', 'An error occurred', { error: errorObject }]);
   </script>

本地日志文件

你还可以选择将错误信息记录到本地日志文件，然后定期上传到服务器。这在离线环境或者不希望实时发送错误报告的情况下很有用：

    function writeLocalLogFile(error) {
      const timestamp = new Date().toISOString();
      const logEntry = `${timestamp}: ${JSON.stringify(error)}`;
      localStorage.setItem('errorLog', (localStorage.getItem('errorLog') || '') + '\n' + logEntry);
    }

    // 使用时
    try {
      // 你的代码
    } catch (error) {
      writeLocalLogFile(error);
      reportErrorToBackend(error); // 如果网络可用，尝试发送
    }

客户端错误报告

为了提高用户体验，可以添加一个用户反馈机制，让用户可以选择是否报告错误：

    function showReportErrorDialog(error) {
      const dialogResult = confirm('Do you want to report this error?');
      if (dialogResult) {
        reportErrorToBackend(error);
      }
    }

    try {
      // 你的代码
    } catch (error) {
      showReportErrorDialog(error);
    }

2500G计算机入门到高级架构师开发资料超级大礼包免费送！