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

  • 时间:
  • 浏览:0
  • 来源:5分3DAPP下载_5分3DAPP官网

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

本文说是 ReactNative 集成 Bugly 的一些坑,实际上讲的更多的是在生产环境下,如可分析 ReactNative 的崩溃栈。哪些地方地方被搜集的原始信息,如可被还原成你们你们你们你们你们你们你们你们前要的信息。

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

只有你们你们你们你们你们你们你们你们就前要找到 index.android.bundle 你这些 文件,是如可产生的。

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

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

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

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

注意看这里指定的 804 行 1133 列,你们你们你们你们你们你们你们你们运行一下,看看输出。

好多好多 ,因为 你在 ReactNative 项目内,集成了 Bugly 之后。造的崩溃只有得到上报,检查一下其他人所有 编译模式,一定要切换到 Release 模式下。

注意我这里一种生活项目因此一三个白 Demo 项目,代码量比较少,还能准确的定位到问提,因为 是一三个白 实际的项目,在打 Release 包的之后,会将所有的 JS 文件完整性打包到 index.android.bundle 文件中去。在你这些 例子中,因为  props.username.name 这段代码,我在好多好多 地方都用到得话,筛选它也是非常麻烦的。

Bugly 的注册没哪些地方地方门槛,这里直接使用其他人所有 QQ 号就都前要登录,创建一三个白 专门为 ReactNative 测试的 App,因此根据文档绑定对应的 AppID 即可。

从你这些 崩溃栈我应该 发现,我我虽然下面 Java 的栈,基本上只有任何信息。这里主因此阅读里面 TypeError 里面的信息。这里描述了 Js 层崩溃的所有信息,饱含错误和崩溃栈。

使用命令,都前要直接安装一三个白 Release 版本到设备上。

前面的内容因为 认真想看 ,应该不能自己发现此处因此对 JS 崩溃输出的格式化拉平成一行了,好多好多 因为 你们你们你们你们你们你们你们你们要针对 Bugly 的崩溃栈编写解析脚本,就前要考虑到哪些地方地方具体情况。

我希望 Release 和 Debug 一样,都前要有只有清晰的崩溃栈,我我虽然问提就因为 得到外理。因此当你使用 Release 包来触发一三个白 崩溃的之后,你就会发现,它并回会 一样的。

另一三个白 面的内容都前要了解到,Release 包同样也是都前要定位到出错的代码的。因此,你依然前要全文的搜索这段代码,无法精准定位到具体出错代码所在的源文件,这是为哪些地方?

在 Debug 模式下,运行你们你们你们你们你们你们你们你们的 Packager Server ,因此在浏览器中访问:

Bugly 为了方便开发者查看,会将相似崩溃栈的崩溃,整合成一三个白 ,因此进行计数统计,只显示当前崩溃了十有几个 次和影响的人数。

这里你们你们你们你们你们你们你们你们直接在命令行里运行如下代码,就都前要自动重新生成一三个白 index.android.bundle 文件,因此同时也会生产一三个白 对应关系的 map 文件。

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

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

很尴尬的是,我虽然崩溃栈也被输出出来了,和前面红屏的截图对比一下,都能否发现它们我我虽然是一三个白 内容。因此,哪些地方地方代码被混淆过了,因为 Native App 一样,混淆过的代码,反编译来看会变成 a.b.c ,这里的效果也是相似的。

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

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

之后也提到,Debug 模式下,因为 触发了崩溃,会直接进入红屏具体情况,显示当前崩溃栈的信息。你这些 功能,在你们你们你们你们你们你们你们你们开发阶段,非常的好用,能快速定位问提。

只有接下来来看看如可定位到你这些 崩溃的真实代码,value@804:1133 这里,因此线索。你们你们你们你们你们你们你们你们把 Apk 解压,拿到其内 assets/index.android.bundle 文件,它其内因此你们你们你们你们你们你们你们你们 ReactNative 编译好的 Js 文件,都前要想看 它的第 804 行 1133 列,因此你们你们你们你们你们你们你们你们前要定位的出了问提的代码。

我我虽然到这里,因为 离你们你们你们你们你们你们你们你们的答案,更近一步了,Android 混淆的 Mapping 文件,也回会 你们你们你们你们你们你们你们你们肉眼能清晰看懂的,你们你们你们你们你们你们你们你们接下来只前要找到它的解析规则就都前要了。

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

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

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

这里我我虽然是两行命令,先进入到 android 项目的目录,因此运行 ./gradlew installRelease 你这些 没哪些地方好说的,因为 运行失败,注意一下当前 shell 环境的目录路径。

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

这也因此你们你们你们你们你们你们你们你们无法精准定位出错代码和锁在源文件的根本因为 。

这偏离 内容没哪些地方好说的,回会 标准话的流程。接下来你们你们你们你们你们你们你们你们来看看集成它将面临的坑。

而因为 你查阅文档,我应该 发现 react-native 命令,还有一三个白 可配置的参数 —sourcemap-output,它因此你们你们你们你们你们你们你们你们前要的。

Bugly 的集成,非常的简单。因为 之后用过 Bugly 的,因此阅读 ReactNative 和 原生通信 这偏离 文档得话,差很多十分钟就都前要集成完毕。

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

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

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

解析你这些 source-map ,NodeJs 为你们你们你们你们你们你们你们你们提供了一三个白 专门的库来解析,这里很多解释,直接上代码。

到此,你们你们你们你们你们你们你们你们是否是完成了 ReactNative App,崩溃分析的一三个白 完整性的链路逻辑,你们你们你们你们你们你们你们你们只前要其他人所有 写个脚本工具,就都前要帮你们你们你们你们你们你们你们你们精准定位了。

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

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

我我虽然也如 map.js 脚本输出的一样。

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

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

既然因为 明确的知道,在 Release 下,会过滤掉一些关于源文件和行号的信息,就如同 Android 的混淆一样,那它是否是饱含相似对照关系的 Mapping 文件,都前要帮助你们你们你们你们你们你们你们你们还原回去?

这里看一三个白 崩溃,第一三个白 占据 在 Js 层,第八个占据 在 Native 层。

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

都前要很清晰的想看 ,在 Debug 和 Release ,分别使用的不同的土辦法 ,加载 JS 文件的。这里为哪些地方要说到 ReactNative App 的编译模式呢?我我虽然和里面的逻辑有关系。

再来对照你们你们你们你们你们你们你们你们的源代码验证一下。

完整性的说明,我应该 在你这些 网站上找到资料:

本文的分析回会 基于最新的 ReactNative (v0.49) 版另一三个白 分析。

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

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

本期就来分享一下,如可在 ReactNative 的基础之上,集成 Bugly。这里主因此看它的崩溃搜集,这也是 Bugly 的主要功能。对于崩溃的埋点,我主要关心一三个白 偏离 :

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

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

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

最方便的是,你直接点击崩溃栈的代码,会自动打开对应的 Js 文件。当然,因为 是一三个白 Native 层的崩溃,我虽然也会出红屏,因此点击从只有跳转。

最近开新项目,准备尝试一下 ReactNative,所之后期做了一些调研工作,ReactNative 的优点非常的明显,都前要做到跨平台,除了少偏离 UI 效果因为 前要对不同的平台进行单独适配,其中的核心逻辑代码,回会 都前要重用的。好多好多 因为 最终用 ReactNative 得话,都前要省出某一端的客户端开发人员。而我这里调研的主要方向,因此它对国内第三方 SDK 的支持。

在国内,开发 App,一般回会 会集成一些第三方服务的,相似:升级、崩溃分析、数据统计等等。而哪些地方地方第三方服务,提供的 SDK ,通常只有 Native 层的,相似 Android 因此使用 Java 写的。而 ReactNative 一种生活 JavaScript 和 Native 层(Java层)的通信,我我虽然因为 做的很好了,好多好多 大偏离 具体情况下,你们你们你们你们你们你们你们你们只前要对哪些地方地方 SDK 做一三个白 简单的封装就都前要正常使用它了。

因此正因为 ReactNative 会在 Debug 模式下,Hook 住你们你们你们你们你们你们你们你们的崩溃栈,从而会因为 Bugly SDK 无法搜集到对应的崩溃也就无法进行上报。

另一三个白 的逻辑被封塞进去 ReactInstanceManager 类的 recreateReactContextInBackgroundInner() 土辦法 中,有兴趣都前要自行看看。

运行效果如下:

不过哪些地方地方,还是期待国内环境下,更多第三方 SDK 能支持到 ReactNative,毕竟官方团队支持的肯定要比你们你们你们你们你们你们你们你们其他人所有 写补丁脚另一三个白 的方便实用。

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

另一三个白 的崩溃栈,我我虽然读懂来,可读性非常的差,因此并回会 不可读的。

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

我我虽然主要工作卡在了后者,接下来你们你们你们你们你们你们你们你们你们具体看看问提。

因此,因为 你这些 崩溃是占据 在 Js 层得话,它最终会把崩溃抛到 Native 层,同样也是都前要统计的的。因此哪些地方地方崩溃会被封装成一三个白 JavascriptException 抛出来,从而因为 它们被简单的归为了 JavascriptException 。因为 它们描述的是不同的 Bug,因此却被归位一类,另一三个白 之后查阅起来,就前要人工进行筛选。

ReactNative App 的打包,完整性借助了 react.gradle 你这些 文件,我应该 在 Android 工程的 build.gradle 文件中找到它。

而在 ReactNative 项目中,因为 是 Native 层出显的崩溃,那我我虽然没哪些地方地方差别,崩溃信息和你们你们你们你们你们你们你们你们平时开发常规 App 一样。

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

点开看看,完整性看不懂,随便截个图你们你们你们你们你们你们你们你们你们感受一下。

ReactNative 在 Debug 的具体情况下,我我虽然还是很贴心的,因为 出显崩溃的 Bug,会直接出红屏,提示你崩溃的栈的具体信息,哪些地方地方内容都前要帮助你快速的定位问提。

猜你喜欢

阿里巴巴数据中心双11守夜人:把机器当“媳妇”,愿做亿万网友背后的男人

相比跟人的交流,布赫与机器“对话”的时间更久。虽说有了“智能设备大脑”随时监控情况汇报,但布赫还是老会 会用最古老的“望布赫看不都都可否 互联网盛宴肩头的亿万网民,甚至体

2020-02-18

游客77bx3by63sngw的主页

云栖号小编在此^o^文章:253丨粉丝:1052丨话题:0TA还没法发布过内容~暂未提供暂无

2020-02-18

和前男友分手了,他不删我微信,但朋友圈把我屏蔽了,发微信也不回,这是什么意思?

下载百度知道APP,抢鲜体验他几块意思我想知道,怎么才能 让我亲身经历过有十个 多和你说的一模一样,也不 把你当备胎,一面搂着现女友秀恩爱,一面知道不你都时需彻底

2020-02-18

科学在别人的心里也最重要的英文

下载百度知道APP,抢鲜体验为你推荐:展开完整性Scienceisthemostimportantinotherpeople'sheart.怪怪的推荐可选中有一一两个 或多个

2020-02-18

我女朋友手机不给我看,她说有秘密,我该怎么办?

好奇心不要 了不好啊,呵呵即使她有了你男人,她都不 她的隐私。她有权力拒绝你查看手机。你对什儿 回答的评价是?相爱就要信任,你你们信任你才告诉你她有秘密,也不不信任你她

2020-02-18