而當取得貼文資料發生錯誤，Timeline 壞掉時，Switch Tab 和輸入框應該還是要顯示在畫面上，並正常運作。

所以 Timeline 就是「當壞掉時，不會影響其他在元件樹上同層的元件運作的元件」，所以我們應該要用 <ErrorBoundary /> <errorboundary> 把它包起來。</errorboundary>

聽到這裡你可能會想，那為什麼不要乾脆直接把每個元件都用 <ErrorBoundary /> <errorboundary> 包起來就好。</errorboundary>

這乍聽之下是個很安全的做法，我們盡量最小化了每個元件發生錯誤時的影響，但實際上這樣做會有一些問題。

第一個是並不是所有元件都會需要包，像是 UI 類的元件，有些在渲染時一定不會發生錯誤，例如一個單純只是顯示使用者頭像的元件，這種的就不需要包 <ErrorBoundary /><errorboundary>。</errorboundary>

第二個是會影響效能。如果你每個元件都包 <errorboundary> ，元件樹的深度就和節點數量會變兩倍。雖然在一些小專案可能不會有感覺，但如果在大型專案的話可能就會影響到效能。</errorboundary>

最後是可能會造成不好的使用者體驗。

壞一半的 UI === 全壞爛的 UX

為什麼將所有元件都用 <ErrorBoundary /> <errorboundary> 包起來會對影響使用者體驗呢？我們來看下面這個例子。</errorboundary>

當付款資訊發生非預期的錯誤時，使用者還是可以看到購物車的資訊，並按下按鈕嘗試結帳。那當他按下按鈕時會用什麼付款方式，是信用卡、轉帳還是貨到付款？那如果是信用卡的話，是用哪張信用卡付款？開發者自己可能都不會知道，更不用說是使用者了。

由此可見，當一組 UI 中只有壞掉的元件消失或顯示錯誤訊息，但其他部分還顯示在畫面上並且可以正常使用時，會讓使用者感到困惑，帶來不好的使用者體驗。

那我們該怎麼判斷呢？

我們可以遍歷整顆元件樹，並對每個元件問這個問題。

當這個元件壞掉時，其他同層的元件該跟著消失嗎？

讓我們以 X 為例子模擬一遍吧！

這個頁面大概可以切成幾個元件，像是左下方的使用者資訊，中間的 Timeline，跟右邊的 Trends for you 和其他的元件。基本上這幾個元件之中的任意一個壞掉，都不會影響其他元件使用。所以代表這幾個元件就算有的壞掉，其他的應該也要繼續顯示在頁面上，並且能被正常使用，而不是直接跳一個錯誤頁面出來。所以這些元件應該每個都要包 <ErrorBoundary /> 。

<ErrorBoundary fallback={<ErrorMessage />}>
  <ComponentMightOccurError />
</ErrorBoundary>

try {
  // do something...
} catch (error) {
  Sentry.captureException(error);
}

import * Sentry as "@sentry/react";

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

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
   Sentry.captureException(error);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }

    return this.props.children;
  }
}

import * as Sentry from "@sentry/react";

export const request = (url, options) => {
  return fetch(url, options)
           .then((response) => response.json())
           .catch((error) => {
             Sentry.captureException(error);
             return Promise.reject(error);
           });
};

export const get = (url) => request(url);

export const post = (url, options) => {
  return request(url, {
    ...options,
    method: "POST",
  });
}

// Other HTTP Methods...

import * as Sentry from "@sentry/react";
import axios from "axios";

const handleError = (error) => {
  Sentry.captureException(error);
  throw error;
};

const instance = axios.create();

instance.interceptors.request.use(null, handleError);
instance.interceptors.response.use(null, handleError);

export default instance;