Как добавить исходную карту в React Native для производства?

Ответ 1

Для сопоставления источника здесь я об этом говорю:

В моей команде bundle для моей сборки сборки я говорю ей, чтобы создать исходную карту:

IOS:

react-native bundle --platform ios --entry-file index.ios.js --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios --sourcemap-output ./sourcemap.js

Android - мне пришлось на самом деле изменить файл android/app/react.gradle, чтобы получить исходные карты, генерируемые при компиляции выпуска. Там может быть более простой способ, но в основном вы найдете, где он создает команду bundle в методе bundleReleaseJsAndAssets и добавляет к ней бит исходной карты:

if (Os.isFamily(Os.FAMILY_WINDOWS)) {
    commandLine "cmd","/c", "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file",
        entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease, "--sourcemap-output", file("$buildDir/../../../sourcemap.js")
} else {
    commandLine "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file",
        entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease, "--sourcemap-output", file("$buildDir/../../../sourcemap.js")
}

Выходной путь выглядит несколько нечетным, но это ставит его на ваш корневой уровень (то же самое место, что и iOS. Я так хотел, вы можете его поместить).

Затем, как только у вас есть ошибка с номером строки, это ничего не значит, что вы запускаете ее через пакет NPM с исходной картой. Вероятно, вы могли бы очень тщательно изучить свой подход, но я просто пошел с:

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

fs.readFile('./sourcemap.js', 'utf8', function (err, data) {
    var smc = new sourceMap.SourceMapConsumer(data);

    console.log(smc.originalPositionFor({
        line: 16,
        column: 29356
    }));
});

Если строка и столбец должны быть заменены на номер строки и столбца из выведенного выше примера.

Это, очевидно, лучше всего работает, если у вас есть исходные карты, хранящиеся где-то, когда номера строк и столбцов меняются от сборки для сборки по мере изменения вашего кода. Он должен быть довольно близок, хотя, если вы можете использовать настройку управления исходным кодом, чтобы вернуться к фиксации, которая была использована для сборки рассматриваемого приложения, и повторно сгенерировать пакет с дополнительными битами в команду для создания исходной карты.

Ответ 2

Android вдохновлен ответом @chetstone

Начиная с v0.32 для android, вы можете изменить ваш android/app/build.gradle для достижения этой цели. Ищите линию

apply from: "../../node_modules/react-native/react.gradle"

Чуть выше вы увидите что-то вроде:

project.ext.react = [
    entryFile: "index.js",
]

Измените это, чтобы соответствовать следующему

project.ext.react = [
    entryFile: "index.js",
    extraPackagerArgs: ["--sourcemap-output", file("$buildDir/../../../sourcemap.android.js")]
]

На iOS

Перейдите к этапам сборки в Xcode для фазы "Bundle React Native code and images" и добавьте:

export EXTRA_PACKAGER_ARGS="--sourcemap-output sourcemap.ios.js"

Ответ 3

Как уже отмечалось, нет очевидного способа сгенерировать файл sourcemap для React Native на iOS. Команда bundle вызывается react-native-xcode.sh, и нет никаких условий для добавления параметров в командную строку bundle. Но я нашел чистый способ сделать это.

react-native-xcode.sh использует переменную окружения BUNDLE_CONFIG чтобы указать файл конфигурации. Если вы создаете пустой файл конфигурации, это не имеет никакого эффекта, а затем вы можете добавить дополнительные параметры CLI.

Создайте пустой файл конфигурации.

touch null_config

Установите BUNDLE_CONFIG вашем конфигурационном файле и --sourcemap-output параметр --sourcemap-output.

export BUNDLE_CONFIG="null_config --sourcemap-output./sourcemap.js.map"

При sourcemap.js.map будет создан файл sourcemap.js.map.

Ответ 4

Я добавляю сбои в мое реагирующее нативное приложение. Но в выпуске, подписанном apk, отчеты о сбоях показывают имена компонентов, в которых сбой произошел по-разному. Неустранимое исключение: com.facebook.react.common.JavascriptException: ReferenceError: ReferenceError: Невозможно найти переменную: Текст, показывающий ошибку, похож на эту. Эта ошибка находится по адресу: в n в s в RCTView в RCTView в RCTView в f в S в n in E в RCTView in n в RCTView in H in L в RCTView in h in v in h in _ in N в RCTView в RCTView in c