前端异常处理方法汇总

主动捕获

try-catch

   try {
       doSomething()
   } catch (error) {
       log(error)
   }

处理全局运行异常

未被js处理的错误，window触发error事件：

window.addEventListener(
    'error',
    (e) => {
        log(e)
    }
)

处理资源加载失败，触发error

const img = new Image()
img.addEventListener(
    'error',
    (e) => {
        log(e)
    }
)

异步代码

let promise = new Promise()
promise().then(res, rej)
promise().catch(error)

promise没有处理的话，window会触发unhandledrejection事件

window.addEventListener(
    'unhandledrejection',
    (e) => {
        log(e)
    }
)

用axios接口的拦截器可以处理

axios.interceptors.response.use(function (response) {
  return response;
}, err => {
  // 报错处理
  if(err.response) {
    switch (err.response.status) {
      case 400: err.message = '请求错误(400)'; break;
      case 500: err.message = '服务器错误(500)'; break;
      // ...
    }
  }
  return Promise.reject(error);
})

vue的异常处理

app.config.errorHandler = (err, vm, info) => {
    // 处理异常
}

React的异常处理

react的生命周期函数 ComponentDidCatch 可以捕获子组件的异常。因此，可以在根组件包裹一个组件来处理错误。

class ErrorBoundary extends React.Component {
    componentDidCatch (error, info) {
        // 处理异常
    }
}

<ErrorBoundary>
  <App />
</ErrorBoundary>