javascript 异常处理的一些经验

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('我吃嘛嘛香,喝嘛嘛棒！'); // 正常输出 '我吃嘛嘛香,喝嘛嘛棒！'

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

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

// Timeout
try {
  setTimeout(() => {
    throw Error("定时器出错了!");
  }, 1000);
} catch (error) {
  console.error(error.message);
}
// Events
try {
  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('不会来这里！');
})

// Dirty
class 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;
  }
}
// Clean
class 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;
  }
}

// bad
try {
  doSomethingMightThrowError();
} catch (error) {
  console.log(error);
}
// good
try {
  doSomethingMightThrowError();
} catch (error){
  console.error(error);
  message.error(error.message);
  logger.log(error);
}

// bad
fetchData().then(doSomethingMightThrowError).catch(console.log);
// good
fetchData()
 .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('账户已存在！');
}

import { Result } from 'antd';
import type { ErrorInfo } from 'react';
import React from 'react';
// eslint-disable-next-line @typescript-eslint/ban-types
class 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)