reactjs - react native web example

¿Cómo agregar sourcemap en React Native for Production?

Question

Recibí un registro de errores como el siguiente mientras la aplicación fallaba:

Excepción fatal: com.facebook.react.modules.core.JavascriptException: onSelect index.android.bundle: 20: 7148 onPress index.android.bundle: 20: 2435

Pero no es realmente útil para mí solucionar problemas. ¿Cómo podría habilitar el mapa de origen para poder localizar dónde está el problema?

ACTUALIZACIÓN 2018 https://docs.expo.io/versions/latest/guides/using-sentry.html Parece prometedor!

Answer 1

Como se señaló, no hay una forma obvia de generar el archivo de sourcemap para React Native en iOS. El comando de bundle se llama desde react-native-xcode.sh , y no hay ninguna disposición para agregar parámetros a la línea de comandos del bundle . Pero encontré una forma limpia de hacerlo.

react-native-xcode.sh usa la variable de entorno BUNDLE_CONFIG para especificar un archivo de configuración. Si crea un archivo de configuración vacío, no tiene ningún efecto, y luego puede agregar parámetros CLI adicionales.

Crear un archivo de configuración vacío.

touch null_config

Establezca BUNDLE_CONFIG con su archivo de configuración, y --sourcemap-output parámetro --sourcemap-output .

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

Cuando construyas, se sourcemap.js.map el archivo sourcemap.js.map .

Answer 2

Para el mapeo de origen aquí está la forma en que lo hago:

En el comando de mi paquete para mi compilación de producción, le digo que genere un mapa de origen:

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: tuve que modificar el archivo android / app / react.gradle para obtener los mapas fuente que se generan al compilar el lanzamiento. Puede haber una forma más fácil, pero básicamente encuentra dónde construye el comando de paquete en el método bundleReleaseJsAndAssets y le agrega el bit de mapa de origen:

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")
}

La ruta de salida parece un poco extraña, pero eso lo coloca en su nivel de raíz (el mismo lugar que iOS. Lo quería de esa manera. Obviamente, puede ponerlo en cualquier lugar).

Luego, una vez que tenga un error con el número de línea, eso significa que nada lo ejecutará a través del paquete NPM "mapa de origen". Probablemente podrías llegar a ser muy elaborado con tu enfoque, pero simplemente fui con:

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
    }));
});

Donde la línea y la columna deben reemplazarse con el número de línea y columna de la salida de ejemplo anterior.

Obviamente, esto funciona mejor si tiene los mapas de origen almacenados en algún lugar, ya que los números de línea y columna cambian de compilación a compilación a medida que cambia su código. Sin embargo, debería acercarse bastante si puede usar la configuración de control de origen de su elección para volver a la confirmación que se utilizó para crear la aplicación en cuestión y volver a generar el paquete con los bits adicionales al comando para generar el mapa de origen.

Answer 3

Android inspirado en la respuesta de @chetstone

A partir de v0.32 para Android, puede modificar su android / app / build.gradle para lograr esto. Busca la linea

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

Justo encima de esto, verá algo como:

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

Modifíquelo para que coincida con lo siguiente

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

En iOS

Vaya a sus fases de compilación en Xcode para la fase "Bundle React Native code and images" y agregue:

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