example 실행 실패

[bhtak]

example을 xcode에서 컴파일해서 실행하는데, 다음과 같은 에러가 발생합니다.

실행 환경 : iPhone 11, iOS 13.0

• npm install 후에 example.xcodeproj를 xcode에서 실행했습니다.

2019-09-30 23:31:57.831 [info][tid:main][RCTCxxBridge.mm:213] Initializing <RCTCxxBridge: 0x7fec086034a0> (parent: <RCTBridge: 0x600003b22290>, executor: (null))
2019-09-30 23:31:57.832298+0900 example[76573:5970225] Initializing <RCTCxxBridge: 0x7fec086034a0> (parent: <RCTBridge: 0x600003b22290>, executor: (null))
2019-09-30 23:31:57.877 [info][tid:main][RCTRootView.m:293] Running application example ({
    initialProps =     {
    };
    rootTag = 1;
})
2019-09-30 23:31:57.877341+0900 example[76573:5970225] Running application example ({
    initialProps =     {
    };
    rootTag = 1;
})
2019-09-30 23:31:57.972362+0900 example[76573:5970279] [] nw_socket_handle_socket_event [C4.1:1] Socket SO_ERROR [61: Connection refused]
2019-09-30 23:31:57.976947+0900 example[76573:5970279] [] nw_socket_handle_socket_event [C4.2:1] Socket SO_ERROR [61: Connection refused]
2019-09-30 23:31:57.979220+0900 example[76573:5970283] [] nw_connection_get_connected_socket [C4] Client called nw_connection_get_connected_socket on unconnected nw_connection
2019-09-30 23:32:19.218 [error][tid:main][RCTModuleMethod.mm:375] Unknown argument type '__attribute__' in method -[RCTAppState getCurrentAppState:error:]. Extend RCTConvert to support this type.
2019-09-30 23:32:19.217973+0900 example[76573:5970225] Unknown argument type '__attribute__' in method -[RCTAppState getCurrentAppState:error:]. Extend RCTConvert to support this type.
2019-09-30 23:32:19.225 [fatal][tid:main] Exception '*** -[__NSArrayM objectAtIndexedSubscript:]: index 1 beyond bounds [0 .. 0]' was thrown while invoking getCurrentAppState on target AppState with params (
    2,
    3
)
callstack: (
	0   CoreFoundation                      0x00007fff23b98bde __exceptionPreprocess + 350
	1   libobjc.A.dylib                     0x00007fff503b5b20 objc_exception_throw + 48
	2   CoreFoundation                      0x00007fff23c2af71 _CFThrowFormattedException + 194
	3   CoreFoundation                      0x00007fff23aacdd9 -[__NSArrayM objectAtIndexedSubscript:] + 169
	4   example                             0x000000010e949fff -[RCTModuleMethod processMethodSignature] + 13327
	5   example                             0x000000010e94edbd -[RCTModuleMethod invokeWithBridge:module:arguments:] + 189
	6   example                             0x000000010e9e9b87 _ZN8facebook5reactL11invokeInnerEP9RCTBridgeP13RCTModuleDatajRKN5folly7dynamicE + 791
	7   example                             0x000000010e9e9693 _ZZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEiENK3$_0clEv + 131
	8   example                             0x000000010e9e9609 ___ZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEi_block_invoke + 25
	9   libdispatch.dylib                   0x000000010f803df0 _dispatch_call_block_and_release + 12
	10  libdispatch.dylib                   0x000000010f804d64 _dispatch_client_callout + 8
	11  libdispatch.dylib                   0x000000010f812e1c _dispatch_main_queue_callback_4CF + 1500
	12  CoreFoundation                      0x00007fff23afb699 __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ + 9
	13  CoreFoundation                      0x00007fff23af62f9 __CFRunLoopRun + 2329
	14  CoreFoundation                      0x00007fff23af56b6 CFRunLoopRunSpecific + 438
	15  GraphicsServices                    0x00007fff3815cbb0 GSEventRunModal + 65
	16  UIKitCore                           0x00007fff47162a67 UIApplicationMain + 1621
	17  example                             0x000000010e877a10 main + 112
	18  libdyld.dylib                       0x00007fff5123bcf5 start + 1
)

[SoleeChoi]

안녕하세요 아임포트 기술지원팀입니다.

해당 이슈는 React Native 이슈로 파악되는데 혹시 Xcode 버전이 11이시면

iOS build fails to run in with Xcode 11.0 beta 이 링크가 도움이 되실 듯 합니다.

감사합니다.

[bhtak]

안녕하세요.

보내주신 자료대로 수정후 시뮬레이터에서 정상적으로 앱이 실행되는 것은 확인 했습니다.
그런데, 결제 테스트를 하면 아무런 동작 없이 빈 화면만 보여줍니다.

1. 앱 실행 후 모습
   

2. 결제 버튼 선택 전
   

3. 결제 버튼을 누르면 '잠시만 기다려주세요'라는 메시지가 사라진 후 빈 화면만 남아 있습니다.
   

XCode 로그 내용입니다.
맨 아래에 'on load end'는 onLoadEnd() 함수가 제대로 호출되는지 확인하기 위해 추가해본 것 입니다.

2019-10-01 12:25:41.566164+0900 example[89035:6590061] Running application "example" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
2019-10-01 12:25:41.573125+0900 example[89035:6590028] [] nw_socket_handle_socket_event [C5.1:1] Socket SO_ERROR [61: Connection refused]
2019-10-01 12:25:41.574648+0900 example[89035:6590028] [] nw_socket_handle_socket_event [C5.2:1] Socket SO_ERROR [61: Connection refused]
2019-10-01 12:25:41.576257+0900 example[89035:6590025] [] nw_connection_get_connected_socket [C5] Client called nw_connection_get_connected_socket on unconnected nw_connection
2019-10-01 12:25:41.661 [info][tid:main][RNGestureHandlerManager.m:135] [GESTURE HANDLER] Initialize gesture handler for root view <RCTRootContentView: 0x7fc741607c10; reactTag: 1; frame = (0 0; 414 896); gestureRecognizers = <NSArray: 0x6000021c6550>; layer = <CALayer: 0x600002f8fe80>>
2019-10-01 12:25:41.661105+0900 example[89035:6589856] [GESTURE HANDLER] Initialize gesture handler for root view <RCTRootContentView: 0x7fc741607c10; reactTag: 1; frame = (0 0; 414 896); gestureRecognizers = <NSArray: 0x6000021c6550>; layer = <CALayer: 0x600002f8fe80>>
2019-10-01 12:25:45.614 [info][tid:com.facebook.react.JavaScript] 'on load end', 'http://localhost/iamport'
2019-10-01 12:25:45.614261+0900 example[89035:6590061] 'on load end', 'http://localhost/iamport'

감사합니다.

[SoleeChoi]

음...로그 메시지는 정상적으로 보입니다.

차이점이라고 한다면 XCode와 IOS 버전 밖에 없어보이는데...
저희 XCode 버전이 10이고 따라서 IOS 버전이 최고 12라 같은 환경에서 테스트가 어렵네요.

일단 귀하께서 스스로 디버깅해보신 결과와 같이
onLoadEnd 함수는 정상적으로 호출되는 것으로 보이구요
this.xdm.injectJavascript()가 제대로 동작하지 않는 것 같은데
혹시 디버깅을 위해 src/components/Payment/PaymentWebView.js 파일의
56번째 줄을 아래와 같이 바꿔보시고 다시 실행해보시겠습니까?

this.xdm.injectJavascript(`
    setTimeout(() => {
        alert('hello world');
    });
`);

감사합니다.

[bhtak]

'hellow world'는 출력됩니다.
IOS 12 버전으로 시험해 보겠습니다.

[SoleeChoi]

넵. Xcode10.2.1 IOS 12.2에서는 정상동작 확인하였습니다.

혹시 <IMP.Payment />(example/src/Payment/index.js) 호출시
전달하는 파라메터 userCode나 data값을 바꾸시진 않으셨죠?

[bhtak]

네, XCode 11, IOS 12.2에서도 비화면 그대로 동작을 멈춥니다.
userCode, data는 바꾸지 않았습니다.

[SoleeChoi]

결제 테스트시 PG사는 어떤 걸로 해보셨나요?

this.xdm.injectJavascript에서 IMP.request_pay가 호출된 로그를 확인해보고자 합니다.

[bhtak]

결제 테스트를 이니시스, 신-카카오, NHN 등 여러가지를 해봤습니다만, 결과는 모두 같습니다.
IMP.request_pay 로그는 어떻게 확인할 수 있나요?

그리고, 본인 인증을 시도했는데, 다음과 같이 에러가 납니다. (XCode 11, IOS 12.2)

[SoleeChoi]

IMP.request_pay 로그는 아임포트 서버측에서 확인합니다.
로그 확인 결과 IMP.init부터 호출되지 않아 확인중에 있습니다.

테스트중이신 iamport-react-native 모듈은 최신버전(v1.2.3)을 사용중이신가요?

감사합니다.

[bhtak]

iamport-react-native 최신 버전을 다운로드 했습니다.
빌드 절차는 다음과 같습니다.

% git clone ...
% cd iamport-react-native/exmaple
% npm install
Xcode에서 example.xcodeproj를 열어서 컴파일 후 실행

참고로, example 디렉토리의 package.json 입니다.

  "dependencies": {
    "iamport-react-native": "file:..",
    "native-base": "^2.12.1",
    "react": "^16.8.3",
    "react-native": "0.59.8",
    "react-native-gesture-handler": "^1.2.1",
    "react-native-webview": "^5.11.0",
    "react-navigation": "^3.11.0"
  },

[bhtak]

exampleForWebVeiw도 실행해봤는데, 다음과 같은 에러가 납니다.

2019-10-01 16:40:21.208095+0900 exampleForWebView[4083:6981295] [GESTURE HANDLER] Initialize gesture handler for root view <RCTRootContentView: 0x7f98d441dc40; reactTag: 21; frame = (0 0; 414 736); gestureRecognizers = <NSArray: 0x60000328a520>; layer = <CALayer: 0x600003c80aa0>>
2019-10-01 16:40:23.415 [warn][tid:com.facebook.react.JavaScript] 'Encountered an error loading page', { target: 3,
  description: 'The Internet connection appears to be offline.',
  url: '',
  canGoBack: false,
  title: '',
  domain: 'NSURLErrorDomain',
  code: -1009,
  didFailProvisionalNavigation: true,
  loading: false,
  canGoForward: false }

[SoleeChoi]

exampleForWebView는 RN을 웹뷰로만 사용할때를 대비한 케이스라 현재와 무관한 상황입니다.

음 보내주신 example의 package.json파일(example/package.json)의 dependencies에
react-native-webview: 5.11.0은 없어야 하는데 자발적으로 추가하신건가요?
해당 모듈은 iamport-react-native에 설치된 것을 참조하기 때문에 duplicate module 에러가 날 수 있거든요.

물론 현재 이슈와는 다소 관련이 없어 보입니다만...

[bhtak]

react-native-webview: 5.11.0 제거 후에도 현상은 같습니다.
문제 해결을 위해 제가 xcode 10.2.1 버전을 설치해서 시험해봐야 할까요?
혹시 아임포트에서 xcode 11 버전에서 시험해볼 계획이 있으신가요?

[SoleeChoi]

일단 현재로선 저희쪽에서 재현이 안되니 XCode11을 설치해 디버깅해봐야 할 것 같은데
아무래도 시간이 다소 소요될 것 같습니다.

혹시 급하시다면 먼저 XCode10점대 버전을 설치후 테스트해보시면 좋을 것 같습니다.

그나저나 안드로이드에서는 잘 동작하나요?

[bhtak]

XCode 10.2.1을 설치해서 실행 했습니다만, 같은 현상 입니다.
아무런 동작을 안하네요.

그런데, jscode를 아래와 같이 변경해서 시험을 해보면, 아래 그림과 같은 에러가 발생합니다.
이걸로 봐서는 IMP 변수가 WebView에서 제대로 생성이 안된 것 처럼 보이는데, 어떤가요?

    setTimeout(() => {
         alert("${JSON.stringify(IMP)}");
     });

[bhtak]

그리고, 안드로이드에서는 시험을 안했습니다. 일단 IOS가 먼저라서..

[SoleeChoi]

음 정상적인 상황이라면 window 객체에 IMP 객체가 들어있어서 제대로 출력되어야 하는데 안되는걸 보니,
저희가 정의해놓은 웹뷰 소스(html 파일)가 정상적으로 로드 되지 않은 것으로 파악됩니다.

보다 정확한 디버깅을 위해 아래 2가지 실험을 부탁드립니다.

1. 웹뷰 소스를 아래와 같이 수정해 웹뷰 소스가 제대로 출력되는지 확인

// src/constants/index.js
const WEBVIEW_SOURCE_HTML = `
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js" ></script>
    <script type="text/javascript" src="https://cdn.iamport.kr/js/iamport.payment-1.1.7.js"></script>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>
`;

이후 결제 시도시 Hello World가 출력되면 정상입니다. 혹시 글씨가 매우 작아 안보일 수 있으니 정확한 확인을 위해 많은 글자를 출력해볼 것을 권장합니다.

2. 1번에 실패할 경우, 웹뷰 소스를 직접 입력해 웹뷰 소스 파일을 불러오는데 문제가 있는지 확인

// src/components/Payment/PaymentWebView.js
...
  return (
    <WebView
        ....
        source={{ html: `
            <html>
              <head>
                <meta http-equiv="content-type" content="text/html; charset=utf-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js" > </script>
                <script type="text/javascript" src="https://cdn.iamport.kr/js/iamport.payment-1.1.7.js"></script>
              </head>
              <body></body>
            </html>
          `}}
    />
  );
...

감사합니다.

[bhtak]

이게, react-native 버전과는 관계가 없나요?
example 소스에는 0.59 버전을 사용하고 있던데..

[SoleeChoi]

네 상관없습니다.

iamport-react-native 모듈은 react-native 0.59버전과 0.60대 버전에서 모두 정상 동작합니다.

말씀하신대로 example 프로젝트의 react-native는 0.59버전을 사용중입니다.

[SoleeChoi]

저희쪽에서도 XCode 11.0에 IOS 13.0으로 테스트한 결과 제대로 동작하는 것을 확인하였습니다.

혹시 안내드린대로 디버깅을 해 보셨나요?

[bhtak]

1번 hello world 출력은 잘 됩니다.

[SoleeChoi]

그렇다면 웹뷰의 소스는 정상적으로 로드되었는데,
injectJavascript 호출 시점에서 window 객체에 IMP 객체가 없다는 결론이네요.

아래와같이 setTimeout에 1초정도 시간을 두시고 테스트해보시겠습니까?

  setTimeout(() => {}, 1000);

[bhtak]

그렇지만 여전히 'typeof IMP' 를 출력하면 undefined로 나옵니다.

  this.xdm.injectJavaScript(`
     setTimeout(() => {
       alert('ready:' + (typeof IMP));
       IMP.init("${userCode}");
       IMP.request_pay(${JSON.stringify(data)}, function(response) {
         window.ReactNativeWebView.postMessage(JSON.stringify(response));
       });
     }, 1000);
   `);

[SoleeChoi]

window객체에 jquery는 있나요?

[bhtak]

이렇게 출력해 봤는데, jquery도 undefined네요..

alert('ready:' + (typeof IMP) + ' jquery:' + (typeof window.jquery));

[bhtak]

웹뷰에서 script를 가져오는 부분이 막혀있을 수 있나요?

[SoleeChoi]

window.jquery 말고 window.jQuery 또는 window.$로 출력해보셔야 합니다.

[bhtak]

window.jQuery로 출력했는데, 마찬가지입니다.
그런데, 실제 단말에서는 되네요.. 시뮬레이터에서만 안되고..
본래 단말에서만 동작하는건가요?

[SoleeChoi]

그렇군요

아니요. 시뮬레이터에서도 정상동작합니다.

[bhtak]

여러번 재설치해서 시도했더니 시뮬레이터에서도 성공했습니다.
그런데, 실패했던 원인은 알 수가 없네요.
지원 감사 드립니다.