Set up a front-end anomaly monitoring system

At a minimum, backend projects can log errors through log files, but front-end projects lack the means to log online errors after release. If an unexpected error occurs and cannot be located in time, it may result in abnormal product function. Here are two ways to build a front-end exception monitoring system: one is to manually build a simple internal project, and the other is to privatize the deployment community open source Sentry.

Build a simple front-end monitoring system

The system consists of two parts: Collecting global error information, sending requests to record errors or sending warning emails to report exceptions; Display a list of exceptions and associated stack information in the monitoring system, or projects packaged with WebPack can upload sourceMap files to the monitoring system for error location.

• There are many kinds of front-end errors, and we need to use different methods to catch errors. All errors are caught according to the same origin policy
  • Try-catch and promise-catch actively handle errors

  // try-catch
  try {
    let a
    console.log(a.length)
  } catch (e) {
    console.log(e)
  }
  // promise-catch
  Promise.then(() => {
    let a
    console.log(a.length)
  }).catch(e => {
    console.log(e)
  })
  Copy the code

  • Window.onerror (window.addeventListener (‘error’, () => {})) the catch method needs to be handled on the code that catches the exception. Using this method entirely will result in a bloated page and is not suitable for the entire project. Window. onerror provides global listening for exceptions. Window. onerror provides error information, error file, error line number, and error stack information. Most errors can be caught globally in this way, but promise errors and cross-domain errors cannot be caught in this way.

  let a
  console.log(a.length)
  window.onerror = function() {
    console.log(arguments)
  }
  Copy the code

  • Window. Onunhandledrejection (window. AddEventListener (‘ unhandledrejection ‘, () => {})) An uncaught promise will throw an unhandledrejection event when an exception occurs.

  Promise.then(() => {
    let a
    console.log(a.length)
  })
  window.onunhandledrejection = function() {
    console.log(arguments)
  }
  Copy the code

  • ErrorBoundary React16 later provides the componentDidCatch method to catch errors that occur in components

  class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }
    componentDidCatch(error, info) {
      // Display fallback UI
      this.setState({ hasError: true });
      // You can also log the error to an error reporting service
      logErrorToMyService(error, info);
    }
    render() {
      if (this.state.hasError) {
        // You can render any custom fallback UI
        return <h1>Something went wrong.</h1>;
      }
      returnthis.props.children; }} // Then wrap the component that needs to be handled <ErrorBoundary> <App /> </ErrorBoundary>Copy the code

  • Vue. Config. errorHandler The Vue component processes exception errors by default and does not throw them. If you want to report them, you need to use errorHandler to report them

  Vue.config.errorHandler = function(err, vm, info) {// Handle error // 'info' is Vue specific error information, such as the lifecycle hook where the error occurred // only available in 2.2.0+}Copy the code

• To locate problems, we need error information, error line, error stack, browser information, and project information. If the code is confused, we need to use sourceMap to parse out the real line information. Due to the complexity of the information data, the POST method of XHR request is adopted for reporting, and only GET can be used to transmit simple data for image reporting
• Parsing sourceMap
  
  The backend uses Node.js to provide the servicesource-mapThe plugin can easily parse sourceMap to get the file path and column information before the confusion
  

  

Deploy the Sentry

Sentry is a log aggregation platform for real-time events. It specializes in detecting errors and extracting all useful information for analysis. Sentry deployment requires two steps, backend Docker deployment, front-end integration ReactSDK.