React Native for Production에서 소스 맵을 추가하는 방법

React Native for Production에서 소스 맵을 추가하는 방법

앱 크래시 중에 다음과 같은 에러 로그를 받았습니다.

치명적인 예외: com.facebook.react.modules.core.자바스크립트예외: onindex.android를 선택합니다.번들:20:7148 onPress index.android.번들: 20:2435

하지만 트러블 슈팅을 하는 것은 저에게 별로 도움이 되지 않습니다.문제의 위치를 추적할 수 있도록 소스 맵을 활성화하려면 어떻게 해야 합니까?

UPDATE 2018 https://docs.expo.io/versions/latest/guides/using-sentry.html 가 유망해 보입니다!

소스 매핑은 다음과 같습니다.

프로덕션 빌드에 대한 번들 명령어로 소스 맵을 생성하도록 지시합니다.

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 파일을 수정하여 릴리스 컴파일 시 생성되는 소스 맵을 얻어야 했습니다.보다 쉬운 방법이 있을 수 있지만 기본적으로 bundleReleaseJsAndAssets 메서드에서 bundle 명령어 작성 위치를 찾아 소스 맵비트를 추가합니다.

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와 같은 지점)에 있습니다.난 그렇게 되길 원했다.어디에나 설치할 수 있습니다.)

그 후 행 번호에 아무런 의미가 없는 오류가 발생하면 "source-map" 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
    }));
});

여기서 행과 열은 위의 출력 예에서 행과 열 번호로 대체해야 합니다.

코드 변경에 따라 라인 및 열 번호가 빌드 간에 변경됨에 따라 소스 맵이 어딘가에 저장되어 있는 경우 이 방법이 가장 효과적입니다.소스 제어 설정을 사용하여 해당 앱을 빌드하기 위해 사용되었던 커밋으로 돌아가서 소스 맵을 생성하기 위한 명령어에 추가 비트를 추가하여 번들을 다시 생성할 수 있다면 상당히 가까워질 것입니다.

@chetstone의 답변에서 영감을 얻은 Android

v0.32 for 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의 빌드 단계로 이동하여 "네이티브 코드와 이미지 번들" 단계를 수행하고 다음을 추가합니다.

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

전술한 바와 같이, 이 데이터를 생성하는 명확한 방법은 없습니다.sourcemapi의 OS(Respect Native)의 리액트 네이티브.bundle는 is령는 command command에서 됩니다.react-native-xcode.sh 이 때 할 수 이 없습니다.bundle할 수 을 찾았다.하지만 나는 그것을 할 수 있는 깔끔한 방법을 찾았다.

react-native-xcode.sh는 합니다.BUNDLE_CONFIG설정 파일을 지정합니다.빈 컨피규레이션파일을 작성해도 아무런 영향이 없습니다.그 후 CLI 파라미터를 추가할 수 있습니다.

빈 구성 파일을 만듭니다.

touch null_config

★★BUNDLE_CONFIG하여 "()"을 합니다.--sourcemap-output파라미터를 지정합니다.

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

시 " " " " "sourcemap.js.map성됩니니다다

iOS 전용입니다.

스텝 1: 다음 명령을 사용하여 sourcemap.js 파일을 생성합니다.

이 행을 패키지에 추가합니다.json 파일

 "bundle:ios": "mkdir -p ios/{Bundle,source-map}; react-native bundle --platform ios --entry-file index.js --dev false --bundle-output ios/Bundle/main.jsbundle --assets-dest ios/Bundle --sourcemap-output ios/source-map/sourcemap.js" 

sourcemap이 "sourcemap.js" 아래에 됩니다.$PROJECT_DIR/ios/source-map/ 표시

$ yarn bundle:ios

2: "sourcemap-decoder." 아래에 .$PROJECT_DIR/ios/source-map/

$ cd ios/source-map/

$ touch sourcemap-decoder.js

sourcemap-decoder.js의 내용은 다음과 같습니다.

const sourceMap = require('source-map'); //(install- npm i source-map)
const fs = require('fs');
const path = require('path');

fs.readFile(path.resolve(__dirname, 'sourcemap.js'), 'utf8', async (err, data) => {
  if (err) {
    console.log('err', err,);
  }
  const consumer = await new sourceMap.SourceMapConsumer(JSON.parse(data));

  console.log(consumer.originalPositionFor({
    line: 1408,
    column: 7762
  }));
});

스텝 3: 디코딩을 위한 스크립트 실행

$ node ios/source-map/sourcemap-decoder.js

언급URL : https://stackoverflow.com/questions/34715106/how-to-add-sourcemap-in-react-native-for-production