SourceMap 設定¶
SourceMap(ソースマップ)は、本番環境の圧縮コードを元のソースコードにマッピングするために使用します。RUM はこのソースコードファイル情報のマッピングをサポートしており、対応するシンボルテーブルファイルを zip 圧縮してパッケージ化し、アップロードすることで、報告された error メジャーメントデータを自動的に変換できます。
Zip パッケージ化の説明¶
js ファイルを webpack で難読化および圧縮した後に生成される .map ファイルを zip 圧縮してパッケージ化します。この圧縮パッケージを解凍した後のファイルパスが、error_stack 内の URL のパスと一致している必要があります。以下のような error_stack を想定します。
ReferenceError
at a.hideDetail @ http://localhost:8080/static/js/app.7fb548e3d065d1f48f74.js:1:1037
at a.showDetail @ http://localhost:8080/static/js/app.7fb548e3d065d1f48f74.js:1:986
at <anonymous> @ http://localhost:8080/static/js/app.7fb548e3d065d1f48f74.js:1:1174
変換が必要なパスは /static/js/app.7fb548e3d065d1f48f74.js であり、対応する sourcemap のパスは /static/js/app.7fb548e3d065d1f48f74.js.map です。この場合、対応する圧縮パッケージを解凍した後のディレクトリ構造は次のとおりです。
変換後の error_stack_source は次のとおりです。
Web のパッケージ化方法と基本的に同じです。
Android には現在 2 種類の sourcemap ファイルがあります。1 つは Java バイトコードが R8/Proguard で圧縮・難読化された後に生成される mapping ファイル、もう 1 つは C/C++ ネイティブコードのコンパイル時にシンボルテーブルとデバッグ情報が削除されていない(unstripped).so ファイルです。Android アプリに両方の sourcemap ファイルが含まれている場合は、これらのファイルを両方とも zip パッケージに含める必要があります。zip パッケージ解凍後のディレクトリ構造は次のようになります。
sourcemap.zip
├── mapping.txt
├── armeabi-v7a/
│ ├── libgameengine.so
│ ├── libothercode.so
│ └── libvideocodec.so
├── arm64-v8a/
│ ├── libgameengine.so
│ ├── libothercode.so
│ └── libvideocodec.so
├── x86/
│ ├── libgameengine.so
│ ├── libothercode.so
│ └── libvideocodec.so
└── x86_64/
├── libgameengine.so
├── libothercode.so
└── libvideocodec.so
デフォルトでは、mapping ファイルは <プロジェクトフォルダー>/<Module>/build/outputs/mapping/<build-type>/ に配置されます。.so ファイルは、CMake でプロジェクトをコンパイルする場合 <プロジェクトフォルダー>/<Module>/build/intermediates/cmake/debug/obj/ に、NDK でコンパイルする場合(debug ビルド)は <プロジェクトフォルダー>/<Module>/build/intermediates/ndk/debug/obj/ に、(release ビルド)は <プロジェクトフォルダー>/<Module>/build/intermediates/ndk/release/obj/ に配置されます。
変換の効果は次のとおりです。
変換前 error_stack :
java.lang.ArithmeticException: divide by zero
at prof.wang.activity.TeamInvitationActivity.o0(Unknown Source:1)
at prof.wang.activity.TeamInvitationActivity.k0(Unknown Source:0)
at j9.f7.run(Unknown Source:0)
at java.lang.Thread.run(Thread.java:1012)
変換後 error_stack_source :
変換前 error_stack :
backtrace:
#00 pc 00000000000057fc /data/app/~~Taci3mQyw7W7iWT7Jxo-ag==/com.ft-Q8m2flQFG1MbGImPiuAZmQ==/lib/arm64/libft_native_exp_lib.so (xc_test_call_4+12)
#01 pc 00000000000058a4 /data/app/~~Taci3mQyw7W7iWT7Jxo-ag==/com.ft-Q8m2flQFG1MbGImPiuAZmQ==/lib/arm64/libft_native_exp_lib.so (xc_test_call_3+8)
#02 pc 00000000000058b4 /data/app/~~Taci3mQyw7W7iWT7Jxo-ag==/com.ft-Q8m2flQFG1MbGImPiuAZmQ==/lib/arm64/libft_native_exp_lib.so (xc_test_call_2+12)
#03 pc 00000000000058c4 /data/app/~~Taci3mQyw7W7iWT7Jxo-ag==/com.ft-Q8m2flQFG1MbGImPiuAZmQ==/lib/arm64/libft_native_exp_lib.so (xc_test_call_1+12)
#04 pc 0000000000005938 /data/app/~~Taci3mQyw7W7iWT7Jxo-ag==/com.ft-Q8m2flQFG1MbGImPiuAZmQ==/lib/arm64/libft_native_exp_lib.so (xc_test_crash+112)
...
変換後 error_stack_source :
backtrace:
Abort message: 'abort message for ftNative internal testing'
#00 0x00000000000057fc /data/app/~~Taci3mQyw7W7iWT7Jxo-ag==/com.ft-Q8m2flQFG1MbGImPiuAZmQ==/lib/arm64/libft_native_exp_lib.so (xc_test_call_4+12)
xc_test_call_4
/Users/Brandon/Documents/workplace/working/StudioPlace/xCrash/xcrash_lib/src/main/cpp/xcrash/xc_test.c:65:9
#01 0x00000000000058a4 /data/app/~~Taci3mQyw7W7iWT7Jxo-ag==/com.ft-Q8m2flQFG1MbGImPiuAZmQ==/lib/arm64/libft_native_exp_lib.so (xc_test_call_3+8)
xc_test_call_3
/Users/Brandon/Documents/workplace/working/StudioPlace/xCrash/xcrash_lib/src/main/cpp/xcrash/xc_test.c:73:13
#02 0x00000000000058b4 /data/app/~~Taci3mQyw7W7iWT7Jxo-ag==/com.ft-Q8m2flQFG1MbGImPiuAZmQ==/lib/arm64/libft_native_exp_lib.so (xc_test_call_2+12)
xc_test_call_2
/Users/Brandon/Documents/workplace/working/StudioPlace/xCrash/xcrash_lib/src/main/cpp/xcrash/xc_test.c:79:13
#03 0x00000000000058c4 /data/app/~~Taci3mQyw7W7iWT7Jxo-ag==/com.ft-Q8m2flQFG1MbGImPiuAZmQ==/lib/arm64/libft_native_exp_lib.so (xc_test_call_1+12)
xc_test_call_1
/Users/Brandon/Documents/workplace/working/StudioPlace/xCrash/xcrash_lib/src/main/cpp/xcrash/xc_test.c:85:13
#04 0x0000000000005938 /data/app/~~Taci3mQyw7W7iWT7Jxo-ag==/com.ft-Q8m2flQFG1MbGImPiuAZmQ==/lib/arm64/libft_native_exp_lib.so (xc_test_crash+112)
xc_test_crash
/Users/Brandon/Documents/workplace/working/StudioPlace/xCrash/xcrash_lib/src/main/cpp/xcrash/xc_test.c:126:9
...
iOS プラットフォームの sourcemap ファイルは、デバッグ情報を含むシンボルテーブルファイルで、拡張子は .dSYM です。通常、プロジェクトのコンパイル後、.app ファイルと同じディレクトリに配置されます。以下に例を示します。
$ ls -l Build/Products/Debug-iphonesimulator/
total 0
drwxr-xr-x 6 zy staff 192 8 9 15:27 Fishing.app
drwxr-xr-x 3 zy staff 96 8 9 14:02 Fishing.app.dSYM
drwxr-xr-x 15 zy staff 480 8 9 15:27 Fishing.doccarchive
drwxr-xr-x 6 zy staff 192 8 9 13:55 Fishing.swiftmodule
XCode の Release ビルドではデフォルトで .dSYM ファイルが生成されますが、Debug ビルドではデフォルトでは生成されないため、XCode で以下の設定を行う必要があります。
Build Settings -> Code Generation -> Generate Debug Symbols -> Yes
Build Settings -> Build Option -> Debug Information Format -> DWARF with dSYM File
zip パッケージ化する際は、該当する .dSYM ファイルを zip パッケージに含めます。プロジェクトに複数の .dSYM ファイルが含まれる場合は、それらをすべて zip パッケージにまとめる必要があります。zip パッケージ解凍後のディレクトリ構造は次のようになります(.dSYM ファイルは本質的にディレクトリであり、macOS の実行可能プログラム .app ファイルと同様です)。
React Native の sourcemap には、ネイティブ iOS、Android、および js 部分が含まれ、合計 3 種類のソースマップがあります。
ネイティブ iOS および Android の sourcemap の取得方法については、対応するパッケージ化の説明を参照してください。
js 部分の sourcemap の取得方法は次のとおりです。
Android ではソースマップがデフォルトで有効になっています。ソースマップファイルは android/app/build/generated/sourcemaps/react/release/index.android.bundle.map にあります。
iOS ではソースマップ生成を有効にするために追加の設定が必要です。Xcode を開き、build phase の "Bundle React Native code and images" を編集します。他のエクスポート項目の上に、必要な出力パスを指定した SOURCEMAP_FILE エントリを追加します。
With Hermes, React Native <0.71
set -e
# output source maps
export SOURCEMAP_FILE="./main.jsbundle.map";
# React Native 0.70, you need to set USE_HERMES to true if Hermes is used, otherwise the source maps won't be generated.
export USE_HERMES=true
# keep the rest of the script unchanged
# When React Native (0.69, 0.71) and using Hermes
# add these lines to compose the packager and compiler source maps into one file
REACT_NATIVE_DIR=../node_modules/react-native
if [ -f "$REACT_NATIVE_DIR/scripts/find-node-for-xcode.sh" ]; then
source "$REACT_NATIVE_DIR/scripts/find-node-for-xcode.sh"
else
# Before RN 0.70, the script was named find-node.sh
source "$REACT_NATIVE_DIR/scripts/find-node.sh"
fi
source "$REACT_NATIVE_DIR/scripts/node-binary.sh"
"$NODE_BINARY" "$REACT_NATIVE_DIR/scripts/compose-source-maps.js" "$CONFIGURATION_BUILD_DIR/main.jsbundle.map" "$CONFIGURATION_BUILD_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH/main.jsbundle.map" -o "../$SOURCEMAP_FILE"
js の sourcemap ファイルを取得したら、そのビルドプラットフォームに対応するネイティブの sourcemap と一緒に、以下の形式で zip パッケージ化します。
source-map-visualization などのソースマップ可視化ツールを使用して、ファイルの可用性を検証できます。
アップロード方法¶
現在、以下の 3 種類の SourceMap アップロード方法をサポートしています。
- フロントページからのアップロード:手動での SourceMap ファイルのアップロードと削除に適しています。
- スクリプトによるアップロード:パブリックネットワークの DataWay 環境での自動アップロードに適しています。
- ビルド段階のプラグインによるアップロード:Web プロジェクトのパッケージ化段階での SourceMap の自動アップロードに適しています。
フロントページからのアップロードと削除¶
設定とパッケージ化が完了したら、フロントページの [ユーザーアクセス監視(RUM)] > [アプリケーションリスト] > [アップロードするアプリケーションの右上にあるその他のアイコンをクリック] > [SourceMap] に移動して、ファイルのアップロードと削除を行うことができます。現在のアカウントに「編集」以上の権限があることを確認してください。
🔍 バーの下で、アップロード済みのファイル名とアプリケーションタイプを確認できます。ファイル名を入力して検索することもできます。 をクリックすると、現在のファイルを削除できます。
アップロード時の注意事項:
- ファイルサイズは 500M を超えないようにしてください。
- ファイル形式は
.zipである必要があります。 - 圧縮パッケージを解凍した後のファイルパスが、
error_stack内の URL のパスと一致していることを確認してください。 - 複数のファイルを同時にアップロードすることはできません。
- 同名のファイルをアップロードすると、上書き確認が表示されますのでご注意ください。
スクリプトによるアップロード¶
現在のアプリケーションがパブリックネットワークの DataWay 接続方式を採用している場合は、スクリプトを使用して OpenAPI 経由でパッケージ化された sourcemap.zip ファイルをアップロードすることもできます。
詳細については、スクリプトによる SourceMap のアップロード を参照してください。
ビルド段階のプラグインによるアップロード¶
Web プロジェクトの場合、フロントページからのアップロードやスクリプトによるアップロードに加えて、プロジェクトのビルド段階でプラグインを使用して SourceMap ファイルを自動的にアップロードすることもできます。
現在、以下の方法をサポートしています。
SourceMap のアップロードが完了すると、エラースタックの解析に使用できるようになります。

