RN Metro打包流程以及sentry代码监控

文章目录

• • • RN Metro打包流程
    • • 流程
      • 涉及到的包
      • react-native bundle 打包命令
      • sourcemap格式
    • sentry代码监控

RN Metro打包流程

参考：react-native bundle 到 bundle 生成到底发生了什么(metro 打包流程简析)

流程

metro 打包的整个流程大致分为:

• 命令参数解析
• metro 打包服务启动
• 打包 js 和资源文件
• 解析，转化和生成
• 停止打包服务

涉及到的包

• @react-native-community（react-native bundle命令封装处）解析命令参数
• metro中进行解析、转换、生成

metro-source-map/src/source-map.js文件：

const SourceMap = require("source-map");
function toBabelSegments(sourceMap) {
  const rawMappings = [];
  new SourceMap.SourceMapConsumer(sourceMap).eachMapping(map => {
    rawMappings.push({
      generated: {
        line: map.generatedLine,
        column: map.generatedColumn
      },
      original: {
        line: map.originalLine,
        column: map.originalColumn
      },
      source: map.source,
      name: map.name
    });
  });
  return rawMappings;
}

node运行source-map.js脚本可以定位到错误代码（x行x列），大概像这样子：

react-native bundle 打包命令

执行react-native bundle 打包命令会生成一个android.main.bundle文件和android.main.bundle.map；

react-native bundle \
  --dev false \
  --platform android \
  --entry-file index.android.js \
  --bundle-output android.main.bundle \
  --sourcemap-output android.main.bundle.map

打包后的文件：

命令参数：

--dev ： false： product包   true： dev包

--platform： 对应的平台

--entry-file：入口文件

--config： 额外配置

--bundle-output：生成的bundle文件输出位置

--assets-dest： 图片等资源输出的位置

--sourcemap-output： 映射文件输出的位置

sourcemap格式

{
    version : 3,
    file: "out.js",
    sourceRoot : "",
    sources: ["foo.js", "bar.js"],
    names: ["src", "maps", "are", "fun"],
    mappings: "AAgBC,SAAQ,CAAEA"
}

整个文件就是一个JavaScript对象，可以被解释器读取。它主要有以下几个属性：

具体sourcemap格式参考：JavaScript Source Map 详解

sentry代码监控

sentry是一个基于Django构建的现代化的实时事件日志监控、记录和聚合平台,主要用于如何快速的发现故障。

sentry上传sourcemap文件命令（sentry-cli）：React Native集成Sentry之SourceMap

sentry-cli releases -o pika -p react-native files com.reactnative_sentry_demo@test+3  upload-sourcemaps \
--dist 3 \
--url-prefix "app:///" \
--rewrite path/to/index.android.bundle path/to/index.android.bundle.map

sentry介绍：Sentry介绍与使用