ReactNative红屏报错，有时候都不知道是报了一些什么信息，没什么可读性，代码出现错误如果能够准确的定位到错误的位置，对解决问题有很大的帮助，在本地开始debug，在浏览器打断点跟踪代码报错位置？可行，但是太费劲，如果是线上报错就没法跟踪了
前一段时间看了看sentry 进行了配置上传了sourcemap进行代码监控（https://www.jianshu.com/p/31ddbb87f43c）一个人用还行，多人要开通商业版收费，搭建sentry管理端又耗费太大
ReactNative的错误捕获
RN的错误类型有两种，可以分别在ErrorUtils和componentDidCatch中捕获到
两个都有错误堆栈信息返回，此时主角就要登场了，进行错误堆栈信息的解析
在本地debug模式下
let parseErrorStack = require("parseErrorStack");
let stack = parseErrorStack(e);
let symbolicateStackTrace = require("symbolicateStackTrace");
symbolicateStackTrace(stack)
.then(prettyStack => {
console.log(prettyStack)
})
console.log(prettyStack)就是解析后的信息
特别注意的是symbolicateStackTrace，只有在在Debug 模式下，开启 Packager 服务的时候能用使用，因为-----
---------回顾下ReactNative的编译模式-----------
在 ReactNative 的程序中，实际上运行的是 Js 的代
在 Debug 模式下，会从本地开启一个 Packager 服务，然后 App 运行起来之后，直接从服务里拉取最新的编译后的 JS 代码，这样可以在开发阶段，做到代码实时更新的效果，只需要在设备上，重新 Load 一下即可。码，而它也是分 Debug 和 Release 的。
在 Release 模式下，ReactNative 会将 JS 代码，整体打包，然后放到 assets 目录下，然后从这里去加载 JS 代码。
ReactNative 在 Debug 的情况下，如果出现崩溃的 Bug，会直接出现红屏，提示你崩溃的栈的具体信息，这些内容可以帮助你快速的定位问题。如果在Release模式下，则出现闪退
附上源码：
symbolicateStackTrace
所以，release模式下不可使用，没关系RN内部有字段__DEV__可以进行区分debug模式和release模式，
debug模式下需要使用symbolicateStackTrace进行错误堆栈信息解析，release模式下不需要，直接上报stack信息就可以了，然后使用source-map进行下解析就能看到具体的报错文件以及行列
let parseErrorStack = require("parseErrorStack");
let stack = parseErrorStack(e);
if (__DEV__) {
let symbolicateStackTrace = require("symbolicateStackTrace");
symbolicateStackTrace(stack)
.then(prettyStack => {
if (prettyStack) {
console.log(prettyStack)
} else {
throw new Error("The stack is null");
}
})
.catch(error =>
console.warn(error.message)
);
} else {
//release模式下用接口把stack信息发送到服务端
}
网友评论