ReactNative のグローバルエラーハンドリング

一括でエラー処理はどうやるんだろう、と調べてみた。

global.ErrorUtils.setGlobalHandler での処理

名前の通りのグローバルハンドラ。

• https://github.com/facebook/react-native/blob/23331df5a40ad8ddff58f561af24d7401b62e330/Libraries/Core/ErrorUtils.js

global.ErrorUtils.setGlobalHandler((error, isFatal) => {
});

で一括でハンドリングできる。なお __DEV__ のとき赤いモーダルエラー画面がでるのはここでハンドリングしてるからなので、上書きしたらそのエラーは無くなってしまう。

Promise での reject されたけど、だれもキャッチしないエラー処理

require('Promise'); // make sure the default rejection handler is installed
const rejectionTracking = require('promise/setimmediate/rejection-tracking');

rejectionTracking.enable({
  allRejections: true,
  onUnhandled: (id, error) => {
    console.log('promise error');
    console.error(error);
  },
});

で一括処理できる。ただ、これだとすべてのエラーをハンドリングしてしまうことになってしまう。ので whitelist にエラークラスを指定することで、特定の処理だけをハンドリングすることが出来る。

が、このハンドラーも一つしかセットできないので、エラーごとにハンドラーをセットは出来ず、whitelist にハンドリングするクラスを増やしていく感じになってしまうと思う。

import ExtendableError from 'es6-error';
class NetworkError extends ExtendableError {
  constructor(message = 'Network Error') {
    super(message);
  }
}

require('Promise'); // make sure the default rejection handler is installed
const rejectionTracking = require('promise/setimmediate/rejection-tracking');

rejectionTracking.enable({
  allRejections: false,
  whitelist: [NetworkError],
  onUnhandled: (id, error) => {
    console.log('Network Error');
    console.log(error);
  },
});

(async () => {
  throw new NetworkError();
})();

使いどころ

ここをハンドリングしてうまくアプリを作っていくのはなんか間違ってる感が強いので、エラーのロギング以外では使わない方が良い。