關(guān)于一次線上出錯的思考--如何規(guī)避線上程序崩盤

LiuRhoRamen 發(fā)布于2019-08-22 17:57 / 2819人閱讀

摘要：近日在工作中由于疏忽問題導(dǎo)致某個客戶的系統(tǒng)直接崩盤，極大的影響了用戶使用產(chǎn)品的體驗(yàn)。在經(jīng)過修改之后，不得不思考下在日常開發(fā)中的一些壞習(xí)慣以及如何規(guī)避這些日常問題了。同時由于我們未能對錯誤進(jìn)行好的處理，導(dǎo)致程序直接卡死。

近日在工作中由于疏忽問題導(dǎo)致某個客戶的系統(tǒng)直接崩盤，極大的影響了用戶使用產(chǎn)品的體驗(yàn)。在經(jīng)過修改之后，不得不思考下在日常開發(fā)中的一些壞習(xí)慣以及如何規(guī)避這些日常問題了。

在日常開發(fā)中，我們往往會有很多不好的習(xí)慣，寫出一些非常不健壯的代碼，導(dǎo)致由于數(shù)據(jù)和條件的多樣性，程序未能作出很好的預(yù)判。同時由于我們未能對錯誤進(jìn)行好的處理，導(dǎo)致程序直接卡死。雖然這些問題可能是非常“低級”的錯誤，但也是非常常見的錯誤，所以有必要拿出來說一說。

1.為鍵值匹配設(shè)定默認(rèn)值

針對以下這種鍵值匹配，我們往往并不能對所有的可能進(jìn)行枚舉，建議對其設(shè)置通用的默認(rèn)值，也避免了在業(yè)務(wù)邏輯中進(jìn)行重復(fù)的處理。避免為匹配到正確的值而報錯。

const map = (obj, defaultValue) => {
  return new Proxy(obj, {
    get (target, key) {
      // 你可以在這里進(jìn)行其他處理
      return Reflect.get(target, key, receiver) || defaultValue
    }
  })
}
const typeValueMap = map({
  a: {
    color: "red",
    desc: "紅色"
  },
  b: {
    color: "blue",
    desc: "藍(lán)色"
  }
}, {
  color: "ccc",
  desc: "灰色"
})

const result = typeValueMap[type]

2.當(dāng)css-modules不能正確匹配時，不直接throw

css-modules會針對未能匹配的樣式名，直接拋出問題，使整個模塊崩掉。在生產(chǎn)環(huán)境中，個人覺得這種做法可能過于激進(jìn)了，當(dāng)然官方也提供了handleNotFoundStyleName參數(shù)，用于設(shè)置未匹配時，是直接throw, warn還是忽略。在此我們可以進(jìn)行統(tǒng)一的處理：

import cssmodules from "react-css-modules"

export default (style, allowMutiple = false) => cssmodules(style, {
  allowMultiple,
  handleNotFoundStyleName: "log"
})

3.對未知的事件進(jìn)行try/catch

程序的執(zhí)行過程中，我們往往無法保證傳入的數(shù)據(jù)是我們想要的，因此我們需要對一些不能保證的過程進(jìn)行try/catch，防止程序卡死。這也是很基礎(chǔ)的一個內(nèi)容了，但是保持良好的代碼風(fēng)格還是很重要的！

let ret
try {
  ret = JSON.parse(json)
} catch (error) {
  // 錯誤處理，錯誤上報
}

4.使用ErrorBoundary對錯誤進(jìn)行友好提示，保證其他模塊的可用性

類似try/catch，在react 16中也提供了對組件內(nèi)部異常進(jìn)行捕獲的機(jī)制。我們可以利用這個機(jī)制，對錯誤進(jìn)行友好的提示，避免整個程序卡死，保證其他模塊是可用的，同時可以進(jìn)行錯誤上報等操作。

export default class ErrorBoundary extends Component {
  state = {
    error: false
  }

  componentDidCatch(error, info) {
    const { onError = report, children, ...others } = this.props
    this.setState({
      error: {
        error,
        info,
        prop: others
      }
    })
    onError(error, info, others)
  }

  render() {
    const { error } = this.state

    if (error) {
      return 
    }
    return this.props.children
  }
}

5.及時進(jìn)行錯誤回傳，監(jiān)控平臺的穩(wěn)定性

通過配合類似sentry這樣的平臺錯誤上報與收集，可以很方便的拿到用戶的錯誤信息，錯誤時的props等數(shù)據(jù)，方便定位問題，拿到重要的反饋信息。

6.總結(jié)

總的來說，很多情況下錯誤的誕生還是由于我們代碼的“不健壯”導(dǎo)致的，所以在使用其他方案進(jìn)行規(guī)避的同時，如何提升代碼質(zhì)量，保證代碼穩(wěn)定運(yùn)行，是我們需要不斷追求與提升的。