ReactNative系列之三十三sourcemap错误分析

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yeputi1015/article/details/82762297

nodejs 提供了source-map库,方便我们进行异常的分析。我们一起来看一下分析的流程

1.当有JS有异常时,客户端可能会闪退,通过控制台,或后台统计的日志是这样的:

首先源码造个异常:


注意标红的位置,上面的.aa一般就可以指出在某个文件中的具体错误位置。下面的红框则可以通过sourcemap来定位298:963的具体位置。298指的是bundle中的行数,963指的是bundle中的列数。当然我们可以直接的打开bundle文件来定位错误的文件名及错误位置。我实测了一下,行号是准确的,列号定位的具体位置不一定准确。但通过上面的红框的提示位置是没问题的。

js异常日志

2.map文件的生成,可以使用bundle命令,举个栗子:

--sorcemap-output

react-native bundle --platform android --dev false --entry-file index.js  --bundle-output android/app/src/main/assets/index.android.bundle  --assets-dest android/app/src/main/res/ --sourcemap-output  android/app/src/main/assets/index.android.bundle.map

3.在一般情况下,有了错误的行号,我们打开bundle通过大概的内容也有可能会猜到是哪个js文件出现错误了。但我们还可以使用sourcemap来准确的定位。可以直接将行数和列数作为参入传入。

var sourceMap = require('source-map');
var fs = require('fs');

console.log("yeputi_wk------------>init");

fs.readFile('./index.android.bundle.map', 'utf8', function (err, data) {
	console.log("yeputi_wk------------>callback-----");
    var smc = new sourceMap.SourceMapConsumer(data);

    console.log(smc.originalPositionFor({
        line: 298,
        column: 963
    }));
});

4.执行执行node xx即可查看结果:

sourcemap运行结果

有疑问可以留言哦~

猜你喜欢

转载自blog.csdn.net/yeputi1015/article/details/82762297