性能優化竟白屏，難道真是我的鍋？
本文轉載自微信公眾號「DYBOY」，作者DYBOY。轉載本文請聯系DYBOY公眾號。
隨著項目日漸“強壯”，優化首屏加載渲染速度迫在眉睫，其中就采用了 React 框架提供的 Reat.lazy() 按需加載的方式，測試過程中，在我們的埋點監控平臺上，發現了很多網絡請求錯誤的日志，大部分來自分包資源下載失敗!難道我的優化變成負優化了?
通過我們的統計平臺量化數據可知，用戶網絡加載失敗的概率還是比較大，實驗發現，沒法兒使用 try{}catch{} 捕獲組件渲染錯誤，查詢官方文檔，有一個 Error Boundaries 的組件引入眼簾，提供了解決方法，那我們拿到了 demo 應該怎么完善并應用到我們的項目中，以及如何解決按需加載組件失敗的場景。
背景
某天我在開發了某個功能組件時，發現這個組件引用了一個非常大的三方庫，大概100kb，這么大，當然得使用按需加載啦，當我理所當然地覺得這一手“按需加載”的優化很穩，就交給測試同學測試了。
沒過多久測試同學反饋，你這個功能咋老白屏?—— 怎么可能?我的代碼不可能有BUG!
來到“事故現場”，稍加思索，打開瀏覽器控制臺，發現按需加載的遠程文件下載失敗了。
emmm～，繼續狡辯，這肯定是公司基建不行啊，網絡這么不穩，這鍋我不背!雖然極力狡辯，可是測試同學就不相信，就認定了是我的問題...
凡事講證據，冷靜下來想一想，萬一真的是我的問題，豈不是很尷尬?
為了挽回局面，于是強裝鎮定說到：“這個問題是網絡波動導致，雖然咱們的基建環境不太好，但是為了盡可能提升用戶體驗，我這嘗試下看看如何優化，可通過增加錯誤監控重試機制，增強用戶體驗，追求極致!”，趕緊溜回去看看咋解決吧...
一、Error Boundaries
React官方對于“Error Boundaries”的介紹：https://reactjs.org/docs/error-boundaries.html
A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an “error boundary”.
簡單翻譯，在 UI 渲染中發生的錯誤不應該阻塞整個應用的運行，為此，React 16 中提供了一種新的概念“錯誤邊界”。
也就是說，我們可以用“錯誤邊界”來優雅地處理 React 中的 UI 渲染錯誤問題。
React 中的懶加載使用Suspense包裹，其下的子節點發生了渲染錯誤，也就是下載組件文件失敗，并不會拋出異常，也沒法兒捕獲錯誤，那么用 ErrorBoundary 就正好可以決定再子節點發生渲染錯誤(常見于白屏)時候的處理方式。
注意：Error boundaries 不能捕獲如下類型的錯誤:
- 事件處理(了解更多)
- 異步代碼 (例如 setTimeout 或 requestAnimationFrame 回調)
- 服務端渲染
- 來自ErrorBoundary組件本身的錯誤 (而不是來自它包裹子節點發生的錯誤)
二、借鑒
老夫作為“CV工程師”，自然是信手拈來：
- class ErrorBoundary extends React.Component {
- constructor(props) {
- super(props);
- this.state = { hasError: false };
- }
- static getDerivedStateFromError(error) {
- // Update state so the next render will show the fallback UI.
- return { hasError: true };
- }
- componentDidCatch(error, errorInfo) {
- // You can also log the error to an error reporting service
- logErrorToMyService(error, errorInfo);
- }
- render() {
- if (this.state.hasError) {
- // You can render any custom fallback UI
- return <h1>Something went wrong.</h1>;
- }
- return this.props.children;
- }
- }
使用方法：
- <ErrorBoundary>
- <MyWidget />
- </ErrorBoundary>
- static getDerivedStateFromError(error)：在 render phase 階段，子節點發生UI渲染拋出錯誤時候執行，return 的 {hasError: true} 用于更新 state 中的值，不允許包含副作用的代碼，觸發重新渲染(渲染fallback UI)內容。
- componentDidCatch(error, errorInfo)：在commit phase 階段，捕獲子節點中發生的錯誤，因此在該方法中可以執行有副作用的代碼，例如用于打印上報錯誤日志。
官方案例在線演示地址：https://codepen.io/gaearon/pen/wqvxGa?editors=0010
與此同時官方的建議：
In the event of an error, you can render a fallback UI with componentDidCatch() by calling setState, but this will be deprecated in a future release. Use static getDerivedStateFromError() to handle fallback rendering instead.
推薦大家在 getDerivedStateFromError() 中處理 fallback UI，而不是在 componentDidCatch() 方法中，componentDidCatch() 在未來的 React 版本中可能會被廢棄，當然只是推薦，僅供參考。
三、修飾
官方的 demo 組件如果要嵌入業務代碼中，還是有一些簡陋，為了更好地適應業務代碼以及更加通用，我們一步步來改造。
3.1 支持自定義fallback以及error callback
目標：滿足些場景下，開發者需要自行設置 fallback 的UI，以及自定義錯誤處理回調
實現也非常簡單，基于 TypeScript，再加上一些類型聲明，一個支持自定義fallback 和錯誤回調的 ErrorBoundary 就OK了!
- type IProps = {
- fallback?: ReactNode | null;
- onError?: () => void;
- children: ReactNode;
- };
- type IState = {
- isShowErrorComponent: boolean;
- };
- class LegoErrorBoundary extends React.Component<IProps, IState> {
- static getDerivedStateFromError(error: Error) {
- return { isShowErrorComponent: true };
- }
- constructor(props: IProps | Readonly<IProps>) {
- super(props);
- this.state = { isShowErrorComponent: false };
- }
- componentDidCatch(error: Error) {
- this.props.onError?.();
- }
- render() {
- const { fallback, children } = this.props;
- if (this.state.isShowErrorComponent) {
- if (fallback) {
- return fallback;
- }
- return <>加載失敗，請刷新重試！</>;
- }
- return children;
- }
- }
- export default LegoErrorBoundary;
3.2 支持錯誤手動重試
我們的按需加載組件就像局部組件更新一樣，當組件按需加載的渲染失敗時候，理論上我們應該給用戶提供手動/自動重試機制
手動重試機制，簡單的做法就是，在 fallback UI 中設置重試按鈕
- static getDerivedStateFromError(error: Error) {
- return { isShowErrorComponent: true };
- }
- constructor(props) {
- super(props);
- this.state = { isShowErrorComponent: false };
- + this.handleRetryClick = this.handleRetryClick.bind(this);
- }
- + handleRetryClick() {
- + this.setState({
- + isShowErrorComponent: false,
- + });
- + }
- render() {
- const { fallback, children } = this.props;
- if (this.state.isShowErrorComponent) {
- if (fallback) {
- return fallback;
- }
- + return (
- + <div>
- + {/* CSS重置下按鈕樣式 */}
- + <button className="error-retry-btn" onClick={this.handleRetryClick}>
- + 渲染錯誤，請點擊重試！
- + </button>
- + </div>
- + );
- }
- return children;
- }
寫一個普通的Counter(計數器)組件：
- import React, { useState } from 'react';
- const Counter = (props) => {
- const [count, setCount] = useState(0);
- const handleCounterClick = () => {
- setCount(count+1);
- }
- const thr = () => {
- throw new Error('render error')
- }
- return (
- <div>
- {count === 3 ? thr() : ''}
- 計數器：{count}
- <br/>
- <button onClick={handleCounterClick}>點擊+1</button>
- </div>
- )
- }
- export default Counter;
我們使用這個 LegoErrorBoundary 組件包裹 Counter 計數器組件，Counter 組件中在第三次點擊時候拋出一個異常，來看看 ErrorBoundary 的捕獲處理情況!
表現效果：
如果咱不處理這個錯誤，就會導致“白屏”，也不利于研發同學排查問題，特別是涉及到一些異步渲染的問題。
3.3 支持發生錯誤自動重試渲染有限次數
手動重試，會增加用戶的一個操作，這會增加用戶的操作成本，為了更加便捷用戶使用軟件，提升用戶體驗，來瞅瞅采用自動重試有限次數的機制應該如何實現。
實現思路：
重試次數統計變量：retryCount，記錄重試渲染次數，超過次數則使用兜底渲染“錯誤提示”UI。
改造如下：
- type IState = {
- isShowErrorComponent: boolean;
- + retryCount: number;
- };
- class LegoErrorBoundary extends React.Component<IProps, IState> {
- - static getDerivedStateFromError(error: Error) {
- - return { isShowErrorComponent: true };
- - }
- constructor(props: IProps | Readonly<IProps>) {
- super(props);
- + this.state = { isShowErrorComponent: false, retryCount: 0 };
- + this.handleErrorRetryClick = this.handleErrorRetryClick.bind(this);
- }
- componentDidCatch(error: Error) {
- + if (this.state.retryCount > 2) {
- + this.setState({
- + isShowErrorComponent: true,
- + })
- + } else {
- + this.setState({
- + retryCount: this.state.retryCount + 1,
- + });
- + }
- }
- render() {
- const { fallback, children } = this.props;
- if (this.state.isShowErrorComponent) {
- if (fallback) {
- return fallback;
- }
- + return <>重試3次后，展示兜底錯誤提示！</>;
- }
- return children;
- }
- }
- export default LegoErrorBoundary;
來看看效果：
自動重試3次
改改Counter組件的代碼，看看能否處理好異步錯誤的問題：
- import React, { useEffect, useState } from 'react';
- const Counter = (props) => {
- const [count, setCount] = useState(0);
- const handleCounterClick = () => {
- setCount(count + 1);
- }
- const thr = () => {
- throw new Error('render error')
- }
- useEffect(() => {
- setTimeout(() => {
- setCount(3)
- }, 1000);
- }, []);
- return (
- <div>
- { count === 3 ? thr() : '' }
- 計數器：{ count }
- <br />
- <button onClick={ handleCounterClick }>點擊+1</button>
- </div>
- )
- }
- export default Counter;
表現：
處理異步發生的錯誤
也是OK的!這說明，屬于業務邏輯的代碼比如：網絡數據請求、異步執行導致渲染出錯的情況，“錯誤邊界”組件都是可以攔截并處理。
當前結論：使用 Errorboundary 組件包裹，能夠 handle 住子組件發生的渲染 error。
四、異步加載組件網絡錯誤
4.1 嘗試處理
把 App.js 中的 Counter 組件引用改為按需加載，然后在瀏覽器中模擬分包的組件下載失敗情況，看看是否能夠攔住!
- const LazyCounter = React.lazy(() => import('./components/counter/index'));
- function App() {
- return (
- <div className="App">
- <header className="App-header">
- <img src={ logo } className="App-logo" alt="logo" />
- <ErrorBoundary>
- <LazyCounter></LazyCounter>
- </ErrorBoundary>
- </header>
- </div>
- );
- }
結果白屏了!也可以看到 ErrorBoundary 組件中打印了捕獲到的錯誤信息:
- ChunkLoadError: Loading chunk 3 failed.
- (error: http://localhost:5000/static/js/3.18a27ea8.chunk.js)
- at Function.a.e ((index):1)
- at App.js:7
- at T (react.production.min.js:18)
- at Hu (react-dom.production.min.js:269)
- at Pi (react-dom.production.min.js:250)
- at xi (react-dom.production.min.js:250)
- at _i (react-dom.production.min.js:250)
- at vi (react-dom.production.min.js:243)
- at fi (react-dom.production.min.js:237)
- at Gi (react-dom.production.min.js:285)
攔截到了，但是沒有觸發3次重試，componentDidCatch 中的 console.log('發生錯誤!', error); 只打印了一次錯誤日志，就掛了，看到大家的推薦做法是，發生一次錯誤就能夠處理到，所以嘗試把 retryCount 為 0 的時候就設置 isShowErrorComponent 的值，
- this.setState({
- isShowErrorComponent: true,
- })
這時能夠顯示錯誤的fallback UI：
但沒法兒實現自動重試有限次數異步組件的渲染，否則如果還按照之前的方案，就會繼續向上拋出錯誤，如果沒有后續 catch 處理錯誤，頁面就會白屏!
然后嘗試主動觸發重新渲染，發現并沒有發起二次請求，點擊重試只是捕獲到了錯誤～
4.2 定位原因
不生效，于是想到聲明引入組件的代碼如下：
const LazyCounter = React.lazy(() => import('./components/counter/index'));
經過測試驗證，的確打印了錯誤日志，而只發起了一次網絡請求的原因是，該 LazyCounter 組件并沒有在組件中聲明，重新渲染的時候，LazyCounter 組件作為組件外的全局變量，不受 rerender 影響。
4.3 解決方案
因此，想要解決網絡加載錯誤問題并重試，就得在聲明代碼 import 的時候處理，因為import 返回的是一個Promise，自然就可以用 .catch 捕獲異常。
- - const LazyCounter = React.lazy(() => import('./components/counter/index'));
- + const LazyCounter = React.lazy(() => import('./components/counter/index').catch(err => {
- + console.log('dyboy:', err);
- + }));
而 import() 代碼執行的時候才會觸發網絡請求拉取分包資源文件，所以我們可以在異常捕獲中重試，并且可以重試一定次數，所以需要實現一個工具函數，統一處理 import() 動態引入可能失敗的問題。
該工具函數如下：
- /**
- *
- * @param {() => Promise} fn 需要重試執行的函數
- * @param {number} retriesLeft 剩余重試次數
- * @param {number} interval 間隔重試請求時間，單位ms
- * @returns Promise<any>
- */
- export const retryLoad = (fn, retriesLeft = 5, interval = 1000) => {
- return new Promise((resolve, reject) => {
- fn()
- .then(resolve)
- .catch(err => {
- setTimeout(() => {
- if (retriesLeft === 1) {
- // 遠程上報錯誤日志代碼
- reject(err);
- // coding...
- console.log(err)
- return;
- }
- retryLoad(fn, retriesLeft - 1, interval).then(resolve, reject);
- }, interval);
- });
- });
- }
使用的時候只需要將 import() 包一下：
- const LazyCounter = React.lazy(() => retryLoad(import('./components/counter/index')));
與此同時，為了多次請求下，“錯誤邊界”組件能夠捕獲到錯誤，同時能夠觸發兜底渲染邏輯，把 ErrorBoundary 組件發生錯誤時候直接處理展示兜底邏輯，不做重復渲染。則將 ErrorBoundary 中的重渲染計數邏輯代碼刪除即可。
- componentDidCatch(error) {
- console.log('發生錯誤！', error);
- this.setState({
- isShowErrorComponent: true,
- });
- }
另外，如果我們既想要渲染出錯后的重試，還需要保證多次網絡出錯后能有錯誤上報，那么只需要在 retryLoad 工具函數中增加錯誤日志遠程上報邏輯，然后不拋出 reject()。
4.4 表現效果
處理如下三種情況的效果：
- 正常按需加載組件成功
- 網絡原因一直下載失敗，展示兜底錯誤
- 網絡原因，中途恢復，展示正常功能
