에러노트 - 웹뷰 Did not receive response to shouldStartLoad in time 워닝

문제가 되었던 사항

이벤트 페이지 이동 후 해당 이벤트 정보 api 호출 후 응답 데이터를 웹뷰로 띄워주는 스크린에서 진입시마다 Did not receive response to shouldStartLoad in time, defaulting to YES 워닝이 발생하며 진입 속도가 느려 버벅거림이 발생한다.

 

사용된 라이브러리

https://github.com/react-native-webview/react-native-webview

GitHub - react-native-webview/react-native-webview: React Native Cross-Platform WebView

해결 과정

이슈 서칭

https://github.com/react-native-webview/react-native-webview/issues/124

 

Error is caused by app being slow. It attempts to execute the callback defined for onShouldStartLoadWithRequest, an event handler that should return a boolean (aka YES/NO) indicating if loading of a given URL should actually happen, but if that function does not return within 250ms, it'll still load the page. Even if you define onShouldStartLoadWithRequest={() => true} it will still give this warning.

 

나름대로 의미 해석 결과

onShouldStartLoadWithRequest에 대해 정의된 콜백을 실행하려고 시도할때 이벤트 핸들러는 주어진 url의 로드가 실제로 발생하는지 여부를 반환해야한다.

해당값이 250ms안에 반환되지 않을경우 워닝이 표시된다.

onShouldStartLoadWithRequest={()=>true)로 항상 true를 반환하더라도 워닝이 발생할 것이다.

 

기존 코드 예시

const EventScreen = () => {
  const {
    state: {
      htmlData,
      loading,
    },
    getHtmlData,
  } = useContext(MyContext);

  useEffect(() => {
    getHtmlData();
  }, []);
  
  return (
    <View>
      {loading ? (
        <View style={{ flex: 1 }}>
          <Spinner />
        </View>
      ) : (
        <WebView
          originWhitelist={['*']}
          source={{ html: htmlData }}
          style={{ flex: 1 }}
          javaScriptEnabled={false}
        />
      )}
    </View>
  );
};

접근 방식

첫 진입시에는 htmlData가 undefined이기 때문에 웹뷰 로드 시작 후 실제 로드 되는지 여부를 반환하지 못하여 해당 워닝이 발생하는 것으로 보인다.

첫 진입 이후의 진입시 state에 htmlData를 저장하고 있기 때문에 진입 후 웹뷰를 로드를 시작한다. (onShouldStartLoadWithRequest)

이와 동시에 htmlData를 불러오는 api가 호출 되며 loading중으로 변경되어 웹뷰 대신 스피너가 렌더링 되기 때문에 로드가 실제로 발생되는지 여부를 반환하지 않는 상황인듯 하다.

 

컴포넌트 언마운트시 htmlData를 clear 해주고 htmlData가 없는 경우 webView를 렌더링 하지 않는다.

 

해결 결과

Did not receive response to shouldStartLoad in time, defaulting to YES 워닝이 더 이상 표시되지 않는다.

진입 속도가 개선되어 버벅거림이 없다.

const EventScreen = () => {
  const {
    state: {
      htmlData,
      loading,
    },
    getHtmlData,
    clearHtmlData,
  } = useContext(MyContext);

  useEffect(() => {
    getHtmlData();
    return () => {
      clearHtmlData();
    };
  }, []);
  
  return (
    <View>
      {loading && (
      <View style={{ flex: 1 }}>
        <Spinner />
      </View>
      )}
      {htmlData && !loading ? (
        <WebView
          originWhitelist={['*']}
          source={{ html: htmlData }}
          style={{ flex: 1 }}
          javaScriptEnabled={false}
        />
      ) : null}
    </View>
  );
};