通过SourceMap解析RN中的js异常

RN的js异常，上报的堆栈信息是包含转化后的行号和列号，但是没有具体的js文件信息，这样对于定位js的问题很难，我们需要通过在RN打包的时候导出sourcemap，然后通过sourcemap解析js的异常，定位到具体的js文件，从而帮助我们去解决js的问题

1. RN打包导出sourcemap

只需要在RN提供的bundle工具，加上命令选项--sourcemap-output，参数值传需要导出map的路径，eg：SourceMapPath='../main.sourcemap'

./node_modules/.bin/react-native bundle \
                --entry-file index.js \
                --bundle-output ${BundlePath} \
                --platform ios \
                --assets-dest ${AssetsPath} \
                --dev false \
                --sourcemap-output ${SourceMapPath}

2.解析js的异常

这里暂时只做了本地解析的流程。

传入收集到的js异常的line和column，解析出具体的文件信息，并打印同时输出到文件中

1. 收集到的js异常类似这样：

(evaluating 'n.inte..., stack: updateIndex@868:3366 onScrollEnd@868:2911 scrollResponderHandleMomentumScrollEnd@208:3066 g@47:296 invokeGuardedCallback@47:496 invokeGuardedCallbackAndCatchFirstError@47:611 A@47:2410 D@47:3172 F@47:2984 <unknown>@47:15122 batchedUpdates@47:65404 Ie@47:14473 ze@47:14968 receiveEvent@47:15409 value@19:3471 <unknown>@19:956 value@19:2898 value@19:928 

updateIndex@868:3366 @符号后面的就行和列

2. 根据行和列解析定位到具体的js parse_error.js

/**
 * node parse_error.js line column // 参数为行号列号
 */
var fs = require('fs');
var sourceMap = require('source-map');
var arguments = process.argv.splice(2);
console.log('所传递的参数是：', arguments);
function parseJSError(aLine, aColumn) {
    fs.readFile('./main.sourcemap', 'utf8', function (err, data) {
        var smc = new sourceMap.SourceMapConsumer(data);
        let parseData = smc.originalPositionFor({
            line: parseInt(aLine),
            column: parseInt(aColumn)
        });
        // 输出到控制台
        console.log(parseData);
        // 输出到文件中
        fs.appendFile('./parsed.txt', JSON.stringify(parseData) + '\n', 'utf8', function(err) {  
            if(err) {  
                console.log(err);
            }
        });  
    });
}

var line = arguments[0];
var column = arguments[1];
parseJSError(line, column);

fs.readFile('./main.sourcemap'注意这个地方修改为你本地的sourcemap的路径

• cd到parse_error.js所在的目录，执行node parse_error.js line column line传行，column传列号
• 执行结果如下

hechaodeMac-mini:脚本 hechao$ node parse_error.js 888 888
所传递的参数是： [ '888', '888' ]
{ source: '/Users/hechao/.jenkins/workspace/cassec-app-ios/RN/node_modules/react-native-vector-icons/node_modules/lodash/_copyArray.js',
  line: 17,
  column: 9,
  name: 'array' }

• 一步步解析，最后得到整个报错堆栈的解析后的文件(在js的同级目录下)

  
  图片.png

这里只讲了本地通过sourcemap解析js的异常；理想中应该是sourcemap上传到服务器、js异常上传到服务器，服务器进行异常解析，类似于bugly的功能