在 ReactNative 的 App 中,集成 Bugly 你会遇到的一些坑

  • 时间:
  • 浏览:3

日后的逻辑被封塞进 ReactInstanceManager 类的 recreateReactContextInBackgroundInner() 最好的方式中,有兴趣都须要自行看看。

这每种内容没哪些地方好说的,也有标准话的流程。接下来亲戚亲戚当当我们 当当我们 来看看集成它将面临的坑。

在国内,开发 App,一般也有会集成有些第三方服务的,这类:升级、崩溃分析、数据统计等等。而哪些地方地方第三方服务,提供的 SDK ,通常还才能了 Native 层的,这类 Android 却说使用 Java 写的。而 ReactNative 一种生活生活 JavaScript 和 Native 层(Java层)的通信,实在可能做的很好了,所以 大每种情况报告下,亲戚亲戚当当我们 当当我们 只须要对哪些地方地方 SDK 做1个简单的封装就都须要正常使用它了。

本文转自承香墨影博客园博客,原文链接:http://www.cnblogs.com/plokmju/p/7825865.html,如需转载请自行联系原作者

http://reactnative.cn/docs/0.49/native-modules-android.html#content

ReactNative 在 Debug 的情况报告下,实在还是很贴心的,可能出先崩溃的 Bug,会直接出红屏,提示你崩溃的栈的具体信息,哪些地方地方内容都须要帮助你快速的定位现象。

最方便的是,你直接点击崩溃栈的代码,会自动打开对应的 Js 文件。当然,可能是1个 Native 层的崩溃,实在也会出红屏,却说点击不须能跳转。

而在 ReactNative 的系统进程中,实际上运行的是 Js 的代码,而它也是分 Debug 和 Release 的。

不清楚的都须要查阅 Bugly 的文档:

还不了解 ReactNative 和原生通信内容的,建议先阅读一下本文档了解一下。

就都须要看后当前 Debug 模式,App 所运行的 JS 代码。亲戚亲戚当当我们 当当我们 直接根据出错代码,精准定位一下。

而可能你查阅文档,我想要发现 react-native 命令,还有1个可配置的参数 —sourcemap-output,它却说亲戚亲戚当当我们 当当我们 须要的。

--sourcemap-output 命令非常的简单,只须要配置1个输出的文件名就都须要了。

在这里,就都须要很清晰的看后,它有1个 fileName 和 lineNumber 1个属性,分别用来记录当前源码的文件和这段代码所在的行数。而回忆一下日后 Release 版本的 JS 代码,我想要发现关于源文件和行号的信息,被剥离了。

这里看1个崩溃,第1个发生在 Js 层,第3个发生在 Native 层。

首先,ReactNative 中 JavaScript 和 Native 层的通信,官方文档可能写的非常清楚了。在官方文档中,举了1个 Toast 模块的例子,写的很清晰,这里就不再赘述了,还不了解的,都须要先看看文档。

到此,亲戚亲戚当当我们 当当我们 不是完成了 ReactNative App,崩溃分析的1个删改的链路逻辑,亲戚亲戚当当我们 当当我们 只须要另一方写个脚本工具,就都须要帮亲戚亲戚当当我们 当当我们 精准定位了。

都须要看后它实际上是通过 react-native bundle 命令,通过增加参数的形式,输出 index.android.bundle 文件的。

这里亲戚亲戚当当我们 当当我们 直接在命令行里运行如下代码,就都须要自动重新生成1个 index.android.bundle 文件,却说同時 也会生产1个对应关系的 map 文件。

却说正是可能 ReactNative 会在 Debug 模式下,Hook 住亲戚亲戚当当我们 当当我们 的崩溃栈,从而会是因为 Bugly SDK 无法搜集到对应的崩溃也就无法进行上报。

注意这段命令,须要在 ReactNative 目录的根目录下执行,否者会提示你找还才能了 node_module 。执行完成,就都须要在 ReactNative 项目目录下,看后输出的 android-release.bundle.map 文件了。

实在主要工作卡在了后者,接下来让亲戚亲戚当当我们 当当我们 具体看看现象。

注意我这里一种生活生活项目却说1个 Demo 项目,代码量比较少,还能准确的定位到现象,可能是1个实际的项目,在打 Release 包的日后,会将所有的 JS 文件删改打包到 index.android.bundle 文件中去。在有些例子中,可能 props.username.name 这段代码,我在所以 地方都用到话语,筛选它也是非常麻烦的。

http://reactnative.cn/docs/0.49/native-modules-android.html#content

此时,亲戚亲戚当当我们 当当我们 再运行它就会直接是因为崩溃,来看看崩溃的 Log 输出。

Release 包的 Js 一定是经过混淆的,会剥离掉有些必要的信息,哪些地方地方被剥离的信息,是因为亲戚亲戚当当我们 当当我们 无法精准定位到代码的源文件上。

而在 Release 模式下,ReactNative 会将 JS 代码,整体打包,却说放上 assets 目录下,却说从这里去加载 JS 代码。

这里给的例子,是1个 Js 层的崩溃,都须要看后它崩溃栈中,很清晰的看后 App.js 文件的第 48 行 21列,会有1个 ReferenceError 的错误。

不过哪些地方地方,还是期待国内环境下,更多第三方 SDK 能支持到 ReactNative,毕竟官方团队支持的肯定要比亲戚亲戚当当我们 当当我们 另一方写补丁脚日后的方便实用。

这里实在是两行命令,先进入到 android 项目的目录,却说运行 ./gradlew installRelease 有些没哪些地方好说的,可能运行失败,注意一下当前 shell 环境的目录路径。

ReactNative App 的打包,删改借助了 react.gradle 有些文件,我想要在 Android 工程的 build.gradle 文件中找到它。

http://localhost:60 81/index.android.bundle?platform=android&dev=true

解析有些 source-map ,NodeJs 为亲戚亲戚当当我们 当当我们 提供了1个专门的库来解析,这里不多解释,直接上代码。

运行效果如下:

Bugly 为了方便开发者查看,会将这类崩溃栈的崩溃,整合成1个,却说进行计数统计,只显示当前崩溃了有几个次和影响的人数。

删改的说明,我想要在有些网站上找到资料:

从有些崩溃栈我想要发现,实在下面 Java 的栈,基本上还才能了 任何信息。这里主却说阅读上边 TypeError 上边的信息。这里描述了 Js 层崩溃的所有信息,富含错误和崩溃栈。

最近开新项目,准备尝试一下 ReactNative,所日后期做了有些调研工作,ReactNative 的优点非常的明显,都须要做到跨平台,除了少每种 UI 效果可能须要对不同的平台进行单独适配,其中的核心逻辑代码,也有都须要重用的。所以 可能最终用 ReactNative 话语,都须要省出某一端的客户端开发人员。而我这里调研的主要方向,却说它对国内第三方 SDK 的支持。

这也却说亲戚亲戚当当我们 当当我们 无法精准定位出错代码和锁在源文件的根本是因为。

我这里把关键信息截图出来看着更清晰。

日后面的内容都须要了解到,Release 包同样也是都须要定位到出错的代码的。却说,你依然须要全文的搜索这段代码,无法精准定位到具体出错代码所在的源文件,这是为哪些地方?

很尴尬的是,实在崩溃栈也被输出出来了,和前面红屏的截图对比一下,才能发现它们实在是1个内容。却说,哪些地方地方代码被混淆过了,可能 Native App 一样,混淆过的代码,反编译来看会变成 a.b.c ,这里的效果也是这类的。

既然可能明确的知道,在 Release 下,会过滤掉有些关于源文件和行号的信息,就如同 Android 的混淆一样,那它不是富含这类对照关系的 Mapping 文件,都须要帮助亲戚亲戚当当我们 当当我们 还原回去?

否则我我 Release 和 Debug 一样,都须要有还才能了 清晰的崩溃栈,实在现象就可能得到处置。却说当你使用 Release 包来触发1个崩溃的日后,你就会发现,它并也有一样的。

Native 层的崩溃,和常规 App 一样,没哪些地方好说的。这里只看 Js 层的崩溃信息。

Bugly 的注册没哪些地方地方门槛,这里直接使用另一方 QQ 号就都须要登录,创建1个专门为 ReactNative 测试的 App,却说根据文档绑定对应的 AppID 即可。

实在也如 map.js 脚本输出的一样。

所以 ,可能你在 ReactNative 项目内,集成了 Bugly 日后。造的崩溃还才能了 得到上报,检查一下另一方编译模式,一定要切换到 Release 模式下。

在 Debug 模式下,会从本地开启1个 Packager 服务,却说 App 运行起来日后,直接从服务里拉取最新的编译后的 JS 代码,日后都须要在开发阶段,做到代码实时更新的效果,只须要在设备上,重新 Load 一下即可。

还才能了 接下来来看看咋样定位到有些崩溃的真实代码,value@60 4:1133 这里,却说线索。亲戚亲戚当当我们 当当我们 把 Apk 解压,拿到其内 assets/index.android.bundle 文件,它其内却说亲戚亲戚当当我们 当当我们 ReactNative 编译好的 Js 文件,都须要看后它的第 60 4 行 1133 列,却说亲戚亲戚当当我们 当当我们 须要定位的出了现象的代码。

Bugly 的集成,非常的简单。可能日后用过 Bugly 的,却说阅读 ReactNative 和 原生通信 这每种文档话语,差不多十分钟就都须要集成完毕。

都须要很清晰的看后,在 Debug 和 Release ,分别使用的不同的最好的方式,加载 JS 文件的。这里为哪些地方要说到 ReactNative App 的编译模式呢?实在和上边的逻辑有关系。

本期就来分享一下,咋样在 ReactNative 的基础之上,集成 Bugly。这里主却说看它的崩溃搜集,这也是 Bugly 的主要功能。对于崩溃的下发,我主要关心1个每种:

https://docs.bugsnag.com/platforms/react-native/showing-full-stacktraces/

还才能了 亲戚亲戚当当我们 当当我们 就须要找到 index.android.bundle 有些文件,是咋样产生的。

本文的分析也有基于最新的 ReactNative (v0.49) 版日后分析。

前面的内容可能认真看后,应该很难发现此处却说对 JS 崩溃输出的格式化拉平成一行了,所以 可能亲戚亲戚当当我们 当当我们 要针对 Bugly 的崩溃栈编写解析脚本,就须要考虑到哪些地方地方情况报告。

再来对照亲戚亲戚当当我们 当当我们 的源代码验证一下。

却说,可能有些崩溃是发生在 Js 层话语,它最终会把崩溃抛到 Native 层,同样也是都须要统计的的。却说哪些地方地方崩溃会被封装成1个 JavascriptException 抛出来,从而是因为它们被简单的归为了 JavascriptException 。可能它们描述的是不同的 Bug,却说却被归位一类,日后日后查阅起来,就须要人工进行筛选。

而否则我我现在同样的代码,使用 Release 模式话语,则会直接崩溃了。

前面很重长,这里总结一下本小结的内容。

注意看这里指定的 60 4 行 1133 列,亲戚亲戚当当我们 当当我们 运行一下,看看输出。

日后的崩溃栈,实在搞掂来,可读性非常的差,却说并也有不可读的。

https://bugly.qq.com/docs/user-guide/instruction-manual-android/?v=20171060 170001

这段代码,会很清晰的输出对应的源文件名和行号,以及错的字段,还是很清晰的。

在 Debug 模式下,运行亲戚亲戚当当我们 当当我们 的 Packager Server ,也越来越 了浏览器中访问:

本文说是 ReactNative 集成 Bugly 的有些坑,实际上讲的更多的是在生产环境下,咋样分析 ReactNative 的崩溃栈。哪些地方地方被搜集的原始信息,咋样被还原成亲戚亲戚当当我们 当当我们 须要的信息。

继续最终 node/modules 下的 react.gradle 文件。

ReactNative 原生模块(中文文档):

日后的编译后的代码,查 Bug 查起来就非常的费时了,你首先须要根据当前版本发布出去的 Apk,却说根据其中的 index.android.bundle 文件,定位到具体的代码,日后再结合上下文全文搜索你的源代码,才能找到对应出错的代码。

请确保你的 Packager Server 保持运行的情况报告下访问。

实在到这里,可能离亲戚亲戚当当我们 当当我们 的答案,更近一步了,Android 混淆的 Mapping 文件,也也有亲戚亲戚当当我们 当当我们 肉眼能清晰看懂的,亲戚亲戚当当我们 当当我们 接下来只须要找到它的解析规则就都须要了。

点开看看,删改看不懂,随便截个图让亲戚亲戚当当我们 当当我们 感受一下。

而在 ReactNative 项目中,可能是 Native 层出先的崩溃,那实在没哪些地方地方差别,崩溃信息和亲戚亲戚当当我们 当当我们 平时开发常规 App 一样。

日后也提到,Debug 模式下,可能触发了崩溃,会直接进入红屏情况报告,显示当前崩溃栈的信息。有些功能,在亲戚亲戚当当我们 当当我们 开发阶段,非常的好用,能快速定位现象。

ReactNative 原生模块(中文文档):

使用命令,都须要直接安装1个 Release 版本到设备上。