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

  • 时间:
  • 浏览:2

最方便的是,你直接点击崩溃栈的代码,会自动打开对应的 Js 文件。当然,机会是原先 Native 层的崩溃,觉得也会出红屏,有日后 点击难能可贵能跳转。

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

既然机会明确的知道,在 Release 下,会过滤掉许多关于源文件和行号的信息,就如同 Android 的混淆一样,那它是否是含晒 类似对照关系的 Mapping 文件,都时要帮助大伙儿 还原回去?

而机会你查阅文档,要我发现 react-native 命令,还有原先可配置的参数 —sourcemap-output,它可是我大伙儿 时要的。

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

使用命令,都时要直接安装原先 Release 版本到设备上。

这里大伙儿 直接在命令行里运行如下代码,就都时要自动重新生成原先 index.android.bundle 文件,有日后 一起也会生产原先对应关系的 map 文件。

删剪的说明,要我在三种 网站上找到资料:

觉得也如 map.js 脚本输出的一样。

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

此时,大伙儿 再运行它就会直接因为崩溃,来看看崩溃的 Log 输出。

就都时要看完当前 Debug 模式,App 所运行的 JS 代码。大伙儿 直接根据出错代码,精准定位一下。

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

本文的分析就有基于最新的 ReactNative (v0.49) 版原先分析。

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

最近开新项目,准备尝试一下 ReactNative,所日后期做了许多调研工作,ReactNative 的优点非常的明显,都时要做到跨平台,除了少帕累托图 UI 效果机会时要对不同的平台进行单独适配,其中的核心逻辑代码,就有都时要重用的。所以有机会最终用 ReactNative 句子,都时要省出某一端的客户端开发人员。而我这里调研的主要方向,可是我它对国内第三方 SDK 的支持。

前面有点痛 长,这里总结一下本小结的内容。

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

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

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

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

从三种 崩溃栈要我发现,觉得下面 Java 的栈,基本上那么 任何信息。这里主可是我阅读里面 TypeError 里面的信息。这里描述了 Js 层崩溃的所有信息,含晒 错误和崩溃栈。

有日后 正是机会 ReactNative 会在 Debug 模式下,Hook 住大伙儿 的崩溃栈,从而会因为 Bugly SDK 无法搜集到对应的崩溃也就无法进行上报。

都时要很清晰的看完,在 Debug 和 Release ,分别使用的不同的辦法 ,加载 JS 文件的。这里为哪几种要说到 ReactNative App 的编译模式呢?觉得和里面的逻辑有关系。

原先的崩溃栈,觉得学会英语来,可读性非常的差,有日后 难能可贵是不可读的。

很尴尬的是,觉得崩溃栈也被输出出来了,和前面红屏的截图对比一下,也能发现它们觉得是原先内容。有日后 ,哪几种代码被混淆过了,机会 Native App 一样,混淆过的代码,反编译来看会变成 a.b.c ,这里的效果也是类似的。

再来对照大伙儿 的源代码验证一下。

Bugly 的注册那么 哪几种门槛,这里直接使用我每每各人 QQ 号就都时要登录,创建原先专门为 ReactNative 测试的 App,有日后 根据文档绑定对应的 AppID 即可。

ReactNative 在 Debug 的清况 下,觉得还是很贴心的,机会出显崩溃的 Bug,会直接出红屏,提示你崩溃的栈的具体信息,哪几种内容都时要帮助你快速的定位问題。

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

这里觉得是两行命令,先进入到 android 项目的目录,有日后 运行 ./gradlew installRelease 三种 没哪几种好说的,机会运行失败,注意一下当前 shell 环境的目录路径。

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

Release 包的 Js 一定是经过混淆的,会剥离掉许多必要的信息,哪几种被剥离的信息,因为大伙儿 无法精准定位到代码的源文件上。

ReactNative App 的打包,删剪借助了 react.gradle 三种 文件,要我在 Android 工程的 build.gradle 文件中找到它。

到此,大伙儿 是否是完成了 ReactNative App,崩溃分析的原先删剪的链路逻辑,大伙儿 只时要我每每各人写个脚本工具,就都时不多我们精准定位了。

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

这也可是我大伙儿 无法精准定位出错代码和锁在源文件的根本因为。

本文说是 ReactNative 集成 Bugly 的许多坑,实际上讲的更多的是在生产环境下,咋样分析 ReactNative 的崩溃栈。哪几种被搜集的原始信息,咋样被还原成大伙儿 时要的信息。

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

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

在国内,开发 App,一般就有会集成许多第三方服务的,类似:升级、崩溃分析、数据统计等等。而哪几种第三方服务,提供的 SDK ,通常非要 Native 层的,类似 Android 可是我使用 Java 写的。而 ReactNative 有三种 JavaScript 和 Native 层(Java层)的通信,觉得机会做的很好了,所以有大帕累托图清况 下,大伙儿 只时要对哪几种 SDK 做原先简单的封装就都时要正常使用它了。

点开看看,删剪看不懂,随便截个图我要们感受一下。

这帕累托图内容没哪几种好说的,就有标准话的流程。接下来大伙儿 来看看集成它将面临的坑。

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

觉得主要工作卡在了后者,接下来我要们具体看看问題。

而在 Release 模式下,ReactNative 会将 JS 代码,整体打包,有日后 装进去 assets 目录下,有日后 从这里去加载 JS 代码。

那么 接下来来看看咋样定位到三种 崩溃的真实代码,value@504:1133 这里,可是我线索。大伙儿 把 Apk 解压,拿到其内 assets/index.android.bundle 文件,它其内可是我大伙儿 ReactNative 编译好的 Js 文件,都时要看完它的第 504 行 1133 列,可是我大伙儿 时要定位的出了问題的代码。

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

日后也提到,Debug 模式下,机会触发了崩溃,会直接进入红屏清况 ,显示当前崩溃栈的信息。三种 功能,在大伙儿 开发阶段,非常的好用,能快速定位问題。

有日后 ,机会三种 崩溃是地处在 Js 层句子,它最终会把崩溃抛到 Native 层,同样也是都时要统计的的。有日后 哪几种崩溃会被封装成原先 JavascriptException 抛出来,从可是我因为它们被简单的归为了 JavascriptException 。机会它们描述的是不同的 Bug,有日后 却被归位一类,原先日后查阅起来,就时要人工进行筛选。

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

前面的内容机会认真看完,应该真难发现此处可是我对 JS 崩溃输出的格式化拉平成一行了,所以有机会大伙儿 要针对 Bugly 的崩溃栈编写解析脚本,就时要考虑到哪几种清况 。

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

而在 ReactNative 项目中,机会是 Native 层出显的崩溃,那觉得那么 哪几种差别,崩溃信息和大伙儿 平时开发常规 App 一样。

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

不过哪几种,还是期待国内环境下,更多第三方 SDK 能支持到 ReactNative,毕竟官方团队支持的肯定要比大伙儿 我每每各人写补丁脚原先的方便实用。

而有日后现在同样的代码,使用 Release 模式句子,则会直接崩溃了。

那么 大伙儿 就时要找到 index.android.bundle 三种 文件,是咋样产生的。

而在 ReactNative 的任务管理器中,实际上运行的是 Js 的代码,而它也是分 Debug 和 Release 的。

原先的逻辑被封装进去 ReactInstanceManager 类的 recreateReactContextInBackgroundInner() 辦法 中,有兴趣都时要自行看看。

所以有,机会你在 ReactNative 项目内,集成了 Bugly 日后。造的崩溃那么 得到上报,检查一下我每每各人编译模式,一定要切换到 Release 模式下。

觉得到这里,机会离大伙儿 的答案,更近一步了,Android 混淆的 Mapping 文件,可是我是大伙儿 肉眼能清晰看懂的,大伙儿 接下来只时要找到它的解析规则就都时要了。

原先面的内容都时要了解到,Release 包同样也是都时要定位到出错的代码的。有日后 ,你依然时要全文的搜索这段代码,无法精准定位到具体出错代码所在的源文件,这是为哪几种?

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

注意我这里有三种项目可是我原先 Demo 项目,代码量比较少,还能准确的定位到问題,机会是原先实际的项目,在打 Release 包的日后,会将所有的 JS 文件删剪打包到 index.android.bundle 文件中去。在三种 例子中,机会 props.username.name 这段代码,我在所以有地方都用到句子,筛选它也是非常麻烦的。

本期就来分享一下,咋样在 ReactNative 的基础之上,集成 Bugly。这里主可是我看它的崩溃搜集,这也是 Bugly 的主要功能。对于崩溃的分派,我主要关心原先帕累托图:

运行效果如下:

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

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

在 Debug 模式下,运行大伙儿 的 Packager Server ,有日后 在浏览器中访问:

解析三种 source-map ,NodeJs 为大伙儿 提供了原先专门的库来解析,这里不多解释,直接上代码。

这里看原先崩溃,第原先地处在 Js 层,第六个地处在 Native 层。

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

请确保你的 Packager Server 保持运行的清况 下访问。

有日后 Release 和 Debug 一样,都时要有那么 清晰的崩溃栈,觉得问題就机会得到外理。有日后 当你使用 Release 包来触发原先崩溃的日后,你就会发现,它难能可贵是一样的。

Bugly 的集成,非常的简单。机会日后用过 Bugly 的,有日后 阅读 ReactNative 和 原生通信 这帕累托图文档句子,差不多十分钟就都时要集成完毕。

注意看这里指定的 504 行 1133 列,大伙儿 运行一下,看看输出。