写在前面

先说概念

Error objects are thrown when runtime errors occur. The Error object can also be used as a base object for user-defined exceptions. 

  
  
    

   
   
     

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

   
   
     
   
   
     
try {  const 123variable = 2;} catch(e) {  console.log('捕获到了：', e)}
  
  
    
  
  
    

   
   
     
  
  
    

  
  
    

   
   
     

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

   
   
     
   
   
     
<script>  function throwSomeError() {    throw new Error('抛个异常玩玩');    console.log('我估计是凉了，不会执行我了！');  }
  throwSomeError();  console.log('那么我呢？')</script>
<script>  console.log('大家猜猜我会执行吗？');</script>
  
  
    
  
  
    

   
   
     
  
  
    

// 获取分页数据const getPagedData = (pageIndex, pageSize) => {  if(pageIndex < 0 || pageSize < 0 || pageSize > 1000) {    throw new RangeError(`pageIndex 必须大于0, pageSize必须在0和1000之间`);  }    return [];}
// 转换时间格式const dateFormat = (dateObj) => {  if(dateObj instanceof Date) {    return 'formated date string';  }    throw new TypeError('传入的日期类型错误');}

  
  
    

   
   
     

    
    
      

    
    
      

   
   
     
   
   
     
new Error('出错了！');console.log('我吃嘛嘛香,喝嘛嘛棒！'); // 正常输出 '我吃嘛嘛香,喝嘛嘛棒！'
  
  
    
  
  
    

   
   
     
  
  
    

  
  
    

   
   
     

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

   
   
     
   
   
     
// badthrow '出错了';throw 123;throw [];throw null;
  
  
    
  
  
    

   
   
     
  
  
    

  
  
    

   
   
     

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

   
   
     
   
   
     
try {  // 要运行的代码，可能引发异常  doSomethingMightThrowError();} catch (error) {  // 处理异常的代码块，当发生异常时将会被捕获，如果不继续throw则不会再向上传播  // error为捕获的异常对象  // 这里一般能让程序恢复的代码  doRecovery();}finally {  // 无论是否出现异常，始终都会执行的代码  doFinally();}
  
  
    
  
  
    

   
   
     
  
  
    

  
  
    

   
   
     

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

   
   
     
   
   
     
// Timeouttry {  setTimeout(() => {    throw Error("定时器出错了!");  }, 1000);} catch (error) {  console.error(error.message);}
// Eventstry {  window.addEventListener("click", function() {    throw Error("点击事件出错了!");  });} catch (error) {  console.error(error.message);}
  
  
    
  
  
    

   
   
     
  
  
    

  
  
    

   
   
     

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

   
   
     
   
   
     
const promiseA = new Promise((resolve,reject)=>{   throw new Error('Promise出错了！');});
const doSomethingWhenResolve = () => {};
const doSomethingWhenReject = (error) => {  logger.log(error)}
// 使用catch捕获const promiseB = promiseA.then(doSomethingWhenResolve).catch(doSomethingWhenReject);// 等价于const promiseB = promise.then(doSomethingWhenResolve, doSomethingWhenResolve);
promiseB.then(() => {  console.log('我又可以正常进到then方法了！');}).catch(()=>{  console.log('不会来这里！');})
  
  
    
  
  
    

   
   
     

  
  
    
  
  
    

   
   
     

  
  
    

如何处理异常

1、业务流程更加清晰易读，我们把异常和业务流程理解为两个不同的问题，可以分开去处理；

2、分开来的两个逻辑都更加聚焦，代码更简洁；

  
  
    

   
   
     

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

   
   
     
   
   
     
// Dirtyclass Laptop {  sendShutDown() {    const deviceID = getID(DEVICE_LAPTOP);    if (deviceID !== DEVICE_STATUS.INVALID) {      pauseDevice(deviceID);      clearDeviceWorkQueue(deviceID);      closeDevice(deviceID);    } else {      logger.log('Invalid handle for: ' + DEVICE_LAPTOP.toString());    }  }  getID(status) {    ...    // 总是会返回deviceID，无论是不是合法有效的    return deviceID;  }}// Cleanclass Laptop {  sendShutDown() {    try {      tryToShutDown();    } catch (error) {      logger.log(error);    }  }    tryToShutDown() {    const deviceID = getID(DEVICE_LAPTOP);    pauseDevice(deviceID);    clearDeviceWorkQueue(deviceID);    closeDevice(deviceID);  }
  getID(status) {    ...    throw new DeviceShutDownError('Invalid handle for: ' + deviceID.toString());    ...    return deviceID;  }}
  
  
    
  
  
    

   
   
     
  
  
    

  
  
    

   
   
     

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

   
   
     
   
   
     
// badtry {  doSomethingMightThrowError();} catch (error) {  console.log(error);}
// goodtry {  doSomethingMightThrowError();} catch (error){  console.error(error);  message.error(error.message);  logger.log(error);}
  
  
    
  
  
    

   
   
     
  
  
    

  
  
    

   
   
     

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

   
   
     
   
   
     
// badfetchData().then(doSomethingMightThrowError).catch(console.log);
// goodfetchData() .then(doSomethingMightThrowError) .catch(error => {   console.error(error);   message.error(error.message);   logger.log(error); });

  
  
    
  
  
    

   
   
     
  
  
    

  
  
    

   
   
     

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

   
   
     
   
   
     
export class RequestException extends Error {  constructor(message) {    super(`RequestException: ${mesage}`);   }}
export class AccountException extends Error {  constructor(message) {    super(`AccountException: ${message}`);  }}
const AccountController = {  getAccount: (id) => {    ...    throw new RequestException('请求账户信息失败！');    ...  }}
// 客户端代码，创建账户const id = 1;const account = AccountController.getAccount(id);if(account){  throw new AccountException('账户已存在！');}
  
  
    
  
  
    

   
   
     
  
  
    

React中的建议

错误边界是一种 React 组件，这种组件可以捕获发生在其子组件树任何位置的 JavaScript 错误，并打印这些错误，同时展示降级 UI，而并不会渲染那些发生崩溃的子组件树。错误边界可以捕获发生在整个子组件树的渲染期间、生命周期方法以及构造函数中的错误。

  
  
    

   
   
     

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

   
   
     
   
   
     
import { Result } from 'antd';import type { ErrorInfo } from 'react';import React from 'react';
// eslint-disable-next-line @typescript-eslint/ban-typesclass ErrorBoundary extends React.Component<  { children?: React.ReactNode },  { hasError: boolean; errorInfo: string }> {  state = { hasError: false, errorInfo: '' };
  static getDerivedStateFromError(error: Error) {    return { hasError: true, errorInfo: error.message };  }
  componentDidCatch(error: any, errorInfo: ErrorInfo) {    // You can also log the error to an error reporting service    // eslint-disable-next-line no-console    console.log(error, errorInfo);  }
  render() {    if (this.state.hasError) {      // You can render any custom fallback UI      return <Result status="error" title="Something went wrong." extra={this.state.errorInfo} />;    }    return this.props.children;  }}
export { ErrorBoundary };
  
  
    
  
  
    

   
   
     
  
  
    

异常的全局上报

  
  
    

   
   
     

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

    
    
      

   
   
     
   
   
     
// message：错误信息（字符串）。// source：发生错误的脚本URL（字符串）// lineno：发生错误的行号（数字）// colno：发生错误的列号（数字）// error：Error对象（对象）window.onerror = function(message, source, lineno, colno, error) {   logger.log('捕获到异常：',{ message, source, lineno, colno, error });}
  
  
    
  
  
    

   
   
     
  
  
    

  
  
    

   
   
     

    
    
      

    
    
      

    
    
      

   
   
     
   
   
     
 window.addEventListener('unhandledrejection', (e) => {   console.error('catch', e) }, true)
  
  
    
  
  
    

   
   
     
  
  
    

写在最后

1、将面向开发的异常信息转换成更友好的用户界面提示；

参考链接：

[1]https://developer.mozilla.org/zh-CN/Core_JavaScript_1.5_Reference/Global_Functions/eval

[2]https://reactjs.org/docs/error-boundaries.html