Skip to content

Generate source maps for iOS and Android #9596

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
kidroca wants to merge 5 commits into from
Closed

Generate source maps for iOS and Android #9596

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2c1da88
Create `scripts/source-map.sh`
kidroca Jun 28, 2022
d1b6fbd
Add source-map and symbolicate scripts
kidroca Jun 28, 2022
baee99a
Add sample stack traces
kidroca Jun 28, 2022
f02c26e
Delete sample stack traces
kidroca Jun 28, 2022
28eb9c4
Cleanup scripts/source-map.sh
kidroca Jun 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,11 @@
"gh-actions-build": "./.github/scripts/buildActions.sh",
"gh-actions-validate": "./.github/scripts/validateActionsAndWorkflows.sh",
"analyze-packages": "ANALYZE_BUNDLE=true webpack --config config/webpack/webpack.common.js --env.envFile=.env.production",
"check-metro-bundler-port": "node config/checkMetroBundlerPort.js"
"check-metro-bundler-port": "node config/checkMetroBundlerPort.js",
"source-map:android": "scripts/source-map.sh android",
"source-map:ios": "scripts/source-map.sh ios",
"symbolicate:android": "npx metro-symbolicate index.android.bundle.map",
"symbolicate:ios": "npx metro-symbolicate index.ios.bundle.packager.map"

@kidroca kidroca Jun 28, 2022

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For some reason iOS only works with the .package.map file - it does not work with the combined map file from the packager and the hermes (hbc) map files (produces null:null:null results)

It could be the stacktrace samples are already decoded partially from crashlytics

},
"dependencies": {
"@formatjs/intl-getcanonicallocales": "^1.5.8",
Expand Down
67 changes: 67 additions & 0 deletions scripts/source-map.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
#!/bin/bash
set -e
# Source map generating script for android and ios js bundles

PLATFORM=$1

if [[ ! $PLATFORM =~ ^(ios|android)$ ]]; then
error "Unsupported platform '$PLATFORM', possible options are: 'android' or 'ios'"
exit 1
fi

SCRIPTS_DIR=$(dirname "${BASH_SOURCE[0]}")
LOCAL_PACKAGES=$(npm bin)
NODE_MODULES="$SCRIPTS_DIR/../node_modules"
source "$SCRIPTS_DIR/shellUtils.sh";

title "Generating $PLATFORM Source Map File"

info ""
info "1. Generating packager map"
info ""

"$LOCAL_PACKAGES/react-native" bundle \
--platform $PLATFORM \
--dev false \
--entry-file index.js \
--bundle-output index.$PLATFORM.bundle \
--sourcemap-output index.$PLATFORM.bundle.packager.map \
--reset-cache \
--minify false

OS_BIN=""

case "$OSTYPE" in
darwin*) OS_BIN=osx-bin ;;
linux*) OS_BIN=linux64-bin ;;
msys*) OS_BIN=win64-bin ;;
cygwin*) OS_BIN=win64-bin ;;
*) error "unknown: $OSTYPE" ;;
esac

if [ -z "$OS_BIN" ]; then
error "Failed to match hermes OS-BIN"
exit 1;
fi

info ""
info "2. Generating hermes map"
info ""
info "Using hermes OS-BIN: '$OS_BIN'"
info ""

# In react native 0.69 this path needs to change to NODE_MODULES/react-native/sdks/hermesc/$OS_BIN/hermesc
"$NODE_MODULES/hermes-engine/$OS_BIN/hermesc" -O -emit-binary -output-source-map -out=index.$PLATFORM.bundle.hbc index.$PLATFORM.bundle
Comment on lines +32 to +54

@kidroca kidroca Jun 28, 2022 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This script was created following

It's easier to locate a Hermes cli bin from node_modules vs installing pods and then using the cli from pods

The OSTYPE check is necessary because I suspect this script would be run by both linux and mac users
Otherwise we can just set OS_BIN=osx-bin


info ""
Comment thread
roryabraham marked this conversation as resolved.
info "3. Merging source maps"
info ""

node "$NODE_MODULES/react-native/scripts/compose-source-maps.js" \
index.$PLATFORM.bundle.packager.map \
index.$PLATFORM.bundle.hbc.map \
-o index.$PLATFORM.bundle.map

Comment on lines +60 to +64

@kidroca kidroca Jun 28, 2022

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This combines the regular source map (package) file together with the bite code source map file

For some reason we only need the combined source map for Android stack traces while for ios the packager source map is enough

I'm still confirming and finding out why

success ""
success "Result ready: 'index.$PLATFORM.bundle.map'"
success ""