Sentry 的 RN 埋點分為兩種，React Native 分為兩種：

• sentry-react-native
• sentry-javascript，即raven.js

兩者的區別是 react-native-sentry 需要 native 的協助，需要安裝對應的客戶端依賴，能夠更好的捕獲RN導致的崩潰錯誤。raven.js 是純 js 的上報，純 js 的上報只能說夠用，不能定位到源碼的情況，但是從接口情況，以及頁面breadcrumb，也能夠大概定位到bug的位置。

對比 react-native-sentry 和 raven.js

react-native-sentry 的缺點

• 打包會涉及 source-map，體積會變大，不符合熱更新的需求。
• 判斷機型方面，ios 和 android 情況不太一樣。安卓功能受限，價值不大。

采用 raven.js 有一定道理，夠用，把 crash 的情況收集交給 native。如今市面上基本上都是混合 app，并不是純 RN 應用。如果錯誤的收集讓 App 的體積變大，顯然有點不合適。

如果是純RN應用，expo則會自帶react-native-sentry。

raven.js 的缺點

官方已經廢棄，考慮到sentry-javascript源碼有AsyncStorage，而且該 api 會在 RN 后續版本0.59中廢棄。所以如果日后 RN 版本升級后，考慮錯誤上報的公共代碼修改是必要的。建議如果60以后的RN版本建議更換成為sentry-react-native。

錯誤類型

錯誤的類型分為兩種：

• 渲染報錯
• JS 端報錯

渲染報錯是由 react 機制內控制，錯誤的信息會觸發生命周期getDerivedStateFromError, 所以在周期回收錯誤信息即可Raven.captureException(error)，參考React Error Boundaries。

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

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

  componentDidCatch(error, errorInfo) {
     // 嘗試過，但是并沒有在RN59觸發
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

JS 端報錯是在 react 機制外控制，需要調用Raven的 react-native plugin。原理是通過 react native 的官方 apiErrorUtils捕獲 JS 端的“紅屏”錯誤，詳情請參考sentry-javascript。使用方法如下：

var Raven = require('raven-js');
Raven.addPlugin(require('raven-js/plugins/react-native'));

做了這兩部操作基本完成了RN的代碼邏輯層的錯誤上報。

相關信息

在項目初始化的時候，Raven.setUserContext(params)會自動將用戶 App 相關信息回收，有利于線上問題的判斷，大家可以結合自己App的用戶數據進行處理。 而Raven.captureBreadcrumb是關鍵的錯誤信息點。關鍵錯誤信息點的流程有助于錯誤流程的區分。