javascript 异常处理的一些经验

写在前面

先说概念

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('不会来这里！');})

如何处理异常

// 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. 聊一聊分布式锁的设计模型

2. 阿里10年沉淀｜那些技术实战中的架构设计方法