Depuración de builds de lanzamiento

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Simbólicar un stack trace

Si una aplicación de React Native lanza una excepción no controlada en un build de lanzamiento, la salida puede estar ofuscada y ser difícil de leer.

shell

07-15 10:58:25.820 18979 18998 E AndroidRuntime: FATAL EXCEPTION: mqt_native_modules
07-15 10:58:25.820 18979 18998 E AndroidRuntime: Process: com.awesomeproject, PID: 18979 07-15 10:58:25.820 18979 18998 E AndroidRuntime: com.facebook.react.common.JavascriptException: Failed, js engine: hermes, stack:
07-15 10:58:25.820 18979 18998 E AndroidRuntime: p@1:132161
07-15 10:58:25.820 18979 18998 E AndroidRuntime: p@1:132084
07-15 10:58:25.820 18979 18998 E AndroidRuntime: f@1:131854
07-15 10:58:25.820 18979 18998 E AndroidRuntime: anonymous@1:131119

En el stack trace anterior, entradas como p@1:132161 son nombres de funciones minificados y offsets de bytecode. Para depurar estas llamadas, debemos traducirlas a archivo, línea y nombre de función, ej. AwesomeProject/App.js:54:initializeMap. Esto se conoce como simbólicación.

Puedes simbólicar nombres de funciones minificados y bytecode como los anteriores pasando el stack trace y un source map generado a metro-symbolicate.

Habilitar source maps

Los source maps son necesarios para simbólicar stack traces. Asegúrate de que estén habilitados en la configuración de build para la plataforma objetivo.

Android

información

On Android, source maps are enabled by default.

To enable source map generation, ensure the following hermesFlags are present in android/app/build.gradle.

groovy

react {
    hermesFlags = ["-O", "-output-source-map"]
}

If done correctly you should see the output location of the source map during Metro build output.

text

Writing bundle output to:, android/app/build/generated/assets/react/release/index.android.bundle
Writing sourcemap output to:, android/app/build/intermediates/sourcemaps/react/release/index.android.bundle.packager.map

iOS

información

On iOS, source maps are disabled by default. Use the following instructions to enable them.

To enable source map generation:

• Open Xcode and edit the build phase "Bundle React Native code and images".
• Above the other exports, add a SOURCEMAP_FILE entry with the desired output path.

diff

+ export SOURCEMAP_FILE="$(pwd)/../main.jsbundle.map"
  WITH_ENVIRONMENT="../node_modules/react-native/scripts/xcode/with-environment.sh"

If done correctly you should see the output location of the source map during Metro build output.

text

Writing bundle output to:, Build/Intermediates.noindex/ArchiveIntermediates/application/BuildProductsPath/Release-iphoneos/main.jsbundle
Writing sourcemap output to:, Build/Intermediates.noindex/ArchiveIntermediates/application/BuildProductsPath/Release-iphoneos/main.jsbundle.map

Usar metro-symbolicate

Con los source maps generados, ahora podemos traducir nuestros stack traces.

shell

# Print usage instructions
npx metro-symbolicate

# From a file containing the stack trace
npx metro-symbolicate android/app/build/generated/sourcemaps/react/release/index.android.bundle.map < stacktrace.txt

# From adb logcat (Android)
adb logcat -d | npx metro-symbolicate android/app/build/generated/sourcemaps/react/release/index.android.bundle.map

Notas sobre source maps

• Pueden generarse múltiples source maps durante el proceso de build. Asegúrate de usar el que esté en la ubicación mostrada en los ejemplos.

• Verifica que el source map que uses corresponda al commit exacto de la aplicación que falló. Pequeños cambios en el código fuente pueden causar grandes diferencias en los offsets.

• Si metro-symbolicate termina inmediatamente con éxito, asegúrate de que la entrada provenga de un pipe o redirección y no de una terminal.