React Native 異常處理

react native頁面出現錯誤時：

1、開發模式下，會出現紅色背景的頁面，展示當前**錯誤資訊

2、bundle模式下，則會出現白屏或者閃退

開發模式

bundle模式

主要使用兩種方法對rn頁面的異常進行捕獲並處理：

1、react error boundaries (異常邊界元件)

2、react native errorutils 模組

react error boundaries (異常邊界元件)是react 16 引入的新概念，為了避免react的元件內的ui異常導致整個應用的異常

對react的異常邊界元件不熟悉的小夥伴可以看看我的文章：從原始碼看react異常處理

這裡簡單介紹下：

error boundaries（異常邊界）是react元件，用於捕獲它子元件樹種所有元件產生的js異常，並渲染指定的兜底ui來替代出問題的元件

它能捕獲子元件生命週期函式中的異常，包括建構函式（constructor）和render函式

而不能捕獲以下異常：

直接上**：

...
function witherrorboundary(
errorcallback: function,
allowedindevmode: boolean,
opt: object = {}) 
componentdidcatch(error: error, errorinfo: any) )
errorcallback && errorcallback(error, errorinfo)
}handleleft = () => 
render()  = opt
return (
this.state.visible && (allowedindevmode ? true : process.env.node_env !== 'development') ? (}}
}export default witherrorboundary;
複製**

上面是乙個react高階元件，返回的元件定義了componentdidcatch生命週期函式，當其子元件出現異常時，會執行此componentdidcatch生命週期函式，渲染兜底ui

...
import witherrorboundary from
'rn_components/exception_handler/with_error_boundary.js';
...class exceptionhandlerexample extends react.component 
catch = () => );
}render () 
return (
style=>
title=
handleleft=/>
style=>
onpress=>
click metext>
view>
touchableopacity>
view>
view>);}
}// 異常邊界元件的使用
export default witherrorboundary(exceptionhandlerexample, (error, errorinfo) => , true);
複製**

上面我們也說過，異常邊界元件能捕獲子元件生命週期函式中的異常，包括建構函式（constructor）和render函式

而不能捕獲以下異常：

所以需要使用 react native errorutils 模組對這些異常進行捕獲並處理

react native errorutils 是負責對rn頁面中異常進行管理的模組，功能很類似web頁面中的 window.onerror

首先我們看看怎麼利用 react native errorutils 進行非同步捕獲和處理，直接上**：

const noop = () => {};
export
const setj***ceptionhandler = (customhandler = noop, allowedindevmode = false
) => 
const allowed = allowedindevmode ? true : !__dev__;
if (allowed) 
};export
const getj***ceptionhandler = () => global.errorutils.getglobalhandler();
export
default ;
複製**

上面關鍵的**就兩行，在注釋中已標明

import  from
'./error_guard';
import  from
'react-native';
setj***ceptionhandler((e, isfatal) => ...`,[
}]);
} else 
}, true);
複製**

使用很簡單，下面我們來看看errorutils模組的原始碼

本文原始碼是2023年9月10日拉取的react native倉庫master分支上的**

error_guard.js

首先看看 errorutils 的定義，原始碼位置：libraries/polyfills/error_guard.js

let _inguard = 0;
let _globalhandler = function
onerror(e) ;
const errorutils = ,
getglobalhandler() ,
reporterror(error) ,
reportfatalerror(error) ,
...};global.errorutils = errorutils;
複製**

上面只展示了我們使用了的方法，我們可以看到我們改寫的console.error，即(message, error) => global.errorutils.reporterror(error)，最終是執行的_globalhandler

所以通過這種方法可以捕獲到所有使用了console.error的異常，我們來看看 react native 原始碼中什麼地方使用了 errorutils 來做異常捕獲和處理

messagequeue.js

來到messagequeue原始碼，位置：libraries/batchedbridge/messagequeue.js

__guard(fn: () =>
void)  else  catch (error) 
}}複製**

我們可以看到上面這個__guard方法中使用了try...catch...對函式的執行進行守護，當發生異常時，會呼叫errorutils.reportfatalerror(error);對錯誤進行處理

使用了__guard的地方這裡就不一一枚舉了，我們可以看看messagequeue這個模組在rn中處於什麼位置

因為沒有系統的看過rn的原始碼，在網上找了個介紹 native 和 js 之間通訊的圖，我們可以看到messagequeue在 native 和 js 之間通訊是很重要的模組

batchedbridge.js

來到batchedbridge原始碼，位置：libraries/batchedbridge/batchedbridge.js

'use strict';
const messagequeue = require('messagequeue');
const batchedbridge = new messagequeue();
object.defineproperty(global, '__fbbatchedbridge', );
module.exports = batchedbridge;
複製**

熟悉rn的同學應該知道，batchedbridge是 native 和 js 之間通訊的關鍵模組，從上面的原始碼我們可以知道，batchedbridge實際就是messagequeue例項

所以在messagequeue模組中使用 errorutils 能捕獲到所有通訊過程中的異常並呼叫_globalhandler處理

以上所有**可在個人開發的rn元件庫的專案中檢視到：rn_components exceptionhandler，元件庫現在才剛開始建設，後續會不斷完善

以上就是我對 react native 異常處理分享，希望能對有需要的小夥伴有幫助~~~

React Native 異常處理

react native專案中時間計算異常問題

struts 異常處理全域性異常處理

python異常處理 Python 異常處理

React Native 異常處理

react native專案中時間計算異常問題

struts 異常處理 全域性異常處理

python異常處理 Python 異常處理

相關推薦

struts 異常處理全域性異常處理