常見的8個前端防護性編程方案

關於前端防護性編程

• 咱們大多數狀況可能遇到過，後端的因爲同時請求人數過多，或者數據量過大，又或者是由於異常致使服務異常，接口請求失敗，而後前端出現白屏或者報錯
• 還有一種狀況，是前端自身寫的代碼存在一些缺陷，整個系統不夠健壯，從而會出現白屏，或者業務系統異常，用戶誤操做等
• 那麼，就出現了前端防護性編程

常見的問題和防範

1.最多見的問題:

uncaught TypeError: Cannot read property 'c' of undefined

出現這個問題最根本緣由是：

當咱們初始化一個對象obj爲{}時候,obj.a這個時候是undefined.咱們打印obj.a能夠獲得undefined,可是咱們打印obj.a.c的時候，就會出現上面的錯誤。js對象中的未初始化屬性值是undefined,從undefined讀取屬性就會致使這個錯誤(同理，null也同樣)

如何避免?

js和ts目前都出現了一個可選鏈概念,例如：

const obj = {};
console.log(obj?.b?.c?.d)

上面的代碼並不會報錯，緣由是 ?.遇到是空值的時候便會返回undefined.

2.前端接口層面的錯誤機制捕獲

前端的接口調用，通常都比較頻繁，咱們這時候能夠考慮使用單例模式,將全部的axios請求都用一個函數封裝一層。統一能夠在這個函數中catch捕獲接口調用時候的未知錯誤，僞代碼以下：

function ajax(url,data,method='get'){
  const promise = axios[method](url,data)
  return  promise.then(res=>{
  }).catch(error){
  //統一處理錯誤
}
}

那麼只要發生接口調用的未知錯誤都會在這裏被處理了

3.錯誤邊界（Error Boundaries,前端出現未知錯誤時，展現預先設定的UI界面）

以React爲例

部分 UI 的 JavaScript 錯誤不該該致使整個應用崩潰，爲了解決這個問題，React 16 引入了一個新的概念 —— 錯誤邊界。

錯誤邊界是一種 React 組件，這種組件能夠捕獲並打印發生在其子組件樹任何位置的 JavaScript 錯誤，而且，它會渲染出備用 UI，而不是渲染那些崩潰了的子組件樹。錯誤邊界在渲染期間、生命週期方法和整個組件樹的構造函數中捕獲錯誤。

使用示例：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染可以顯示降級後的 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 你一樣能夠將錯誤日誌上報給服務器
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你能夠自定義降級後的 UI 並渲染
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

注意

• 錯誤邊界沒法捕獲如下場景中產生的錯誤：

  • 事件處理（瞭解更多）
  • 異步代碼（例如 setTimeout 或 requestAnimationFrame 回調函數）
  • 服務端渲染
  • 它自身拋出來的錯誤（並不是它的子組件）

4.前端複雜異步場景緻使的錯誤

• 這個問題可能遠不止這麼簡單，可是大道至簡，遵循單向數據流的方式去改變數據，例如：

  //test.js
  export const obj = {
    a:1,
    b:2
  }
  
  //使用obj
  import {obj} from './test.js';
  obj.a=3;

當你頻繁使用這個obj對象時，你沒法根據代碼去知道它的改變順序（即在某個時刻它的值是什麼）,並且這裏面可能存在很多異步的代碼，當咱們換一種方式，就能知道它的改變順序了,也更方便咱們debug

例如：

//test.js
export const obj = {
  a:1,
  b:2
}
export function setObj (key,value)  {
  console.log(key,value)
  obj[key] = value
}

這樣，咱們就作到了

5.前端專一「前端」

• 對於一些敏感數據，例如登陸態，鑑權相關的。前端應該是儘可能作無感知的轉發、攜帶（這樣也不會出現安全問題）

6.頁面作到可降級

• 對於一些剛上新的業務，或者有存在風險的業務模塊，或者會調取不受信任的接口，例如第三方的接口，這個時候就要作一層降級處理，例如接口調用失敗後，剔除對應模塊的展現，讓用戶無感知的使用

7.巧用loading和disabled

• 用戶操做後，要及時loading和disabled確保不讓用戶進行重複，防止業務側出現bug

8.慎用innerHTML

• 容易出現安全漏洞，例如接口返回了一段JavaScript腳本，那麼就會當即執行。此時腳本若是是惡意的，那麼就會出現不可預知的後果，特別是電商行業，尤爲要注意

❤️ 看完三件事

• 若是你以爲這篇內容對你挺有啓發，我想邀請你幫我三個小忙：
• 點個「贊」，讓更多的人也能看到這篇內容（喜歡不點在看，都是耍流氓 -_-）
• 關注我，讓咱們成爲長期關係
• 關注公衆號「前端巔峯」，持續爲你推送精選好文，也能夠加我爲好友，隨時聊騷。