ReactNative错误采集原理在Android中如何实现


今天小编给大家分享一下ReactNative错误采集原理在Android中如何实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。Error是错误基类,其他错误继承自Error,Error对象有两个主要属性,name和message语法错误是一种常见的错误,在所有编程语言中都存在,表示不符合编程语言规范。一类是词法、语法分析转换生成语法树时发生,此类异常一旦发生,导致整个js文件无法执行,而其他异常发生在代码运行时,在错误出现的那一行之前的代码不受影响另一类是运行中出现的语法错误,如开发中常见的json解析错误,参数传入非标准json字符引用了一个不能存在的变量,变量未声明就引用了变量或参数不是有效类型超出有效范围时发生异常,常见的是数组长度超出范围调用URI相关函数中出现,包括encodeURI、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()我们可以继承Error类,实现自定义的错误RN错误处理包括JS和native两部分,由JS捕获,抛给Native处理Native和JS通信的消息队列, 负责Native和JS通讯, 包括渲染、交互、各种互相调用等。所有的通信都会经过_guard函数处理,在_guard中会被try-catch住,出现异常后调用ErrorUtils处理注:react-native/Libraries/BatchedBridge/MessageQueue.jsErrorUtils用于处理RN中所有的异常,它对暴露异常处理拦截接口异常上报收到异常后调用_globalHandler处理异常异常处理所有异常通过_globalHandle函数处理,默认情况下_globalHandler会直接将错误抛出,ErrorUtils对外提供了setGlobalHanlder做错误拦截处理,RN重写_globalHandler来做错误收集和处理注:react-native/Libraries/polyfills/error-guard.jsExceptionsManager是RN中异常管理模块,负责红屏处理、console.error、并将异常传给Native侧异常处理器设置调用ErrorUtils.setGlobalHandler,把错误处理实现交给ExceptionsManager.handleExceptionconsole.error处理:调用ExceptionsManager.installConsoleErrorReporter重写console.error注:react-native/Libraries/Core/setUpErrorHandling.jsExceptionsManager处理异常构建Error:如果错误不是Error类型,构造一个SyntheticError,方便日志输出和展示调用错误处理NativeExceptionsManager调用native模块上报错误console.error处理上述提到调用ExceptionsManager.installConsoleErrorReporter处理console.error,处理成非fatal异常注:react-native/Libraries/Core/ExceptionsManager.js注:跟进上述源码可知,红屏是通过isHandledByLogBox参数可以禁止native红屏弹窗,isHandledByLogBox是通过global.__unstable_isLogBoxEnabled控制,可以通过下面方式禁止native红屏展示,但是还是会展示js红屏来提示错误上面讲述了JS处理异常后将异常抛给native处理,ExceptionsManagerModule是native处理异常模块,导出给JS类名为ExceptionsManagerExceptionsManagerModule异常处理问题:fatal错误抛出异常后为什么应用为什么没有退出呢?DevSupportManager处理红屏Handle捕获异常RN引擎创建的时候会初始化三个线程,UiThread、NativeModulesThread、JSThread,这些线程通过MessageQueueThreadHandler处理消息队列,MessageQueueThreadHandler重写了Handle的dispatchMessage函数,函数通过try-catch包裹防止应用直接退出,出现异常时调用QueueThreadExceptionHandler处理(引擎实现此接口),这里能拦截所有的异常,包括上述js捕获传到native手动抛出的、yoga布局过程中的等等引擎处理异常在引擎(CatalystInstanceImpl)的内部类NativeExceptionHandler中,实现了QueueThreadExceptionHandler接口,在引擎创建时初始化,出现异常时调用NativeModuleCallExceptionHandler处理,并销毁引擎注:com.facebook.react.bridge.CatalystInstanceImpl(引擎实现类)默认处理方式上述讲到引擎捕获异常后会调用NativeModuleCallExceptionHandler.handleException处理,它是个接口,引擎提供了默认实现类,默认实现类收到异常后是直接抛出,会导致应用退出自定义异常处理为了防止默认处理方式将异常直接抛出导致crash,业务可以实现自定义的NativeModuleCallExceptionHandler接口来处理异常,将异常上报,并展示错误兜底页面基于上述源码解析可知,RN错误采集流程由JS侧中MessageQueue发起,经过一系列处理和封装,传到native侧,再经过native一系列转发,最终交给由引擎(CatalyInstanceImple)处理,整体流程如下图所示页面出现异常后,对异常状态兜底是一种保障线上质量的常规手段。当页面发生严重 JS 错误(FatalError)时,会展示错误页面无法继续使用。这种方式在一些业务场景下并不友好。比如:页面上某一个次要模块发生异常,并不影响核心功能的使用,这种情况下展示出错页面有些不必要React 16 中引入了一个新概念——错误边界(Error Boundaries)。错误边界是一种 React 组件,这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误,并且它会渲染出备用 UI,而不是渲染那些崩溃了的子组件树。错误边界能在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误基于这个特性,业务能够自定义控制接收到JSError的行为,能更优雅地处理错误兜底及展示错误边界是一种 React 组件,这种组件可以捕获并打印发生在其子组件树任何位置的 JS 错误,并且它会渲染出备用 UI,而不是渲染那些崩溃了的子组件树。错误边界能在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误错误边界是通过 try-catch 方式捕获异常的,它在哪里进行捕获异常的呢?React 有三个重要组成模块,错误边界在 Reconciliation 中对异常进行捕获。React基础模块(这个模块定义了React的基础API及组件相关内容。对应我们开发页面时引入的 ‘react’ 模块)渲染模块(这个模块对于不同类型的应用,采用不同的渲染方式。对应我们开发页面时引入的 ‘react-dom’ 模块)Reconciliation 模块(又叫“协调模块”,这个模块是上面两个模块的基础,主要负责任务协调、生命周期函数管理等)Reconciliation模块是React三个重要模块之一,又叫“协调模块”,这个模块是上面两个模块的基础,主要负责任务协调、生命周期函数管理等,它分为render和commit两个阶段render阶段:简单来说就是找到需要更新的工作,通过 Diff Fiber Tree 找出要做的更新工作,这是一个js计算过程,计算结果可以被缓存,计算过程可以被打断,也可以恢复执行。commit阶段:提交更新并调用对应渲染模块(react-dom)进行渲染,为了防止页面抖动,该过程是同步且不能被打断注:源码rea免费云主机域名ct-native/Libraries/Renderer/ReactFabric-dev.js错误边界不支持hooks组件,因为错误边界的实现借助了this.setState可以传递callback的特性,useState无法传入回调,所以无法完全对标前面提到错误边界捕获异常之后会交给特定的方法处理,如果一个组件重写了特定的方法,这个组件就是一个错误边界组件。定义:如果一个类组件定义了生命周期方法中的任何一个(或两个)static getDerivedStateFromError() 或 componentDidCatch(),那么它就成了一个错误边界。 使用static getDerivedStateFromError()在抛出错误后渲染回退UI。 使用 componentDidCatch() 来记录错误信息。如下:将要捕获的组件用错误边界组件包裹事件处理:点击事件异步代码:setTimeout 或 requestAnimationFrame 回调函数等错误边界自身抛出的错误将影响整体页面展示逻辑的模块使用错误边界包裹并设置宽高,防止其他模块计算出错将非核心模块包裹,保障在非核心模块出错时核心模块展示不受影响包裹外部依赖的组件,防止意外的错误包裹独立展示模块,如广告,活动弹窗等以上就是“ReactNative错误采集原理在Android中如何实现”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注百云主机行业资讯频道。

相关推荐: Springboot2中如何集成pagehelper

这篇文章主要介绍“Springboot2中如何集成pagehelper”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Springboot2中如何集成pagehelper”文章能帮助大家解决问题。1、pom.xml2. …

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 05/16 15:42
下一篇 05/16 16:30

相关推荐