웹뷰에서 'Application error: a client-side exception has occurred' 오류 해결하기

안녕하세요! 오늘은 안드로이드 앱 개발 중 웹뷰(WebView)를 사용하여 웹 페이지를 로드할 때 발생한 오류와 그 해결 과정을 공유하려고 합니다.

문제 상황

안드로이드 앱에서 웹뷰를 통해 특정 웹 페이지를 로드하려고 했습니다. 그러나 앱을 실행하고 웹뷰가 나타난 후 하얀 화면에 Application error: a client-side exception has occurred 오류 메시지가 표시되었습니다.

로그캣(Logcat)에는 특별한 에러 로그가 없어 문제의 원인을 파악하기 어려웠습니다.

원인 분석

이 오류 메시지는 클라이언트 측(JavaScript)에서 예외가 발생했음을 의미합니다. 즉, 웹뷰에서 로드하는 웹 페이지 자체에서 문제가 발생한 것입니다. 그러나 안드로이드 앱의 웹뷰 설정이 웹 페이지의 기능을 제대로 지원하지 못해 발생한 것일 수 있습니다.

해결 방법

웹뷰의 설정을 조정하여 문제를 해결할 수 있었습니다. 특히, 웹 페이지에서 사용하는 기능을 웹뷰에서 지원하도록 설정을 추가했습니다.

domStorageEnabled 설정 활성화

• 설명: 웹뷰에서 DOM 스토리지(DOM Storage)를 사용할 수 있도록 허용합니다. DOM 스토리지는 웹 애플리케이션이 로컬에서 데이터를 저장하고 불러올 수 있게 해주는 기능으로, localStorage나 sessionStorage를 활용합니다.
• 코드는 아래와 같습니다.

  settings.domStorageEnabled = true

• 효과: 이 설정을 활성화하면 웹 페이지가 로컬 또는 세션 스토리지를 통해 데이터를 저장하고 접근할 수 있게 되어, 사용자 설정이나 상태를 유지할 수 있습니다.

수정된 코드 예시

MainActivity의 웹뷰 설정 부분을 다음과 같이 수정했습니다:

AndroidView(
    factory = {
        WebView(it).apply {
            layoutParams = ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT
            )

            settings.javaScriptEnabled = true
            settings.domStorageEnabled = true

            webViewClient = MyWebViewClient()
            loadUrl("<https://example.com/app/>") // 웹 페이지 URL을 적절한 예시로 대체
        }
    },
    modifier = Modifier.fillMaxSize()
)

결과

위와 같이 domStorageEnabled 설정을 추가한 후 앱을 다시 실행하니, 웹뷰가 정상적으로 웹 페이지를 로드했고 오류 메시지도 사라졌습니다.

추가 조언

제 경우에는 domStorageEnabled 설정만으로 문제가 해결되었지만, 웹 페이지에서 사용하는 기능에 따라 추가적인 설정이 필요할 수 있습니다. 예를 들어, 자바스크립트로 창을 열거나 혼합 콘텐츠를 로드해야 하는 경우가 있습니다.

따라서, 여러분의 앱에서도 비슷한 문제가 발생한다면 프론트엔드 개발자와 긴밀하게 소통하여 웹 페이지에서 어떤 기능을 사용하는지 확인하는 것이 중요합니다. 이를 통해 필요한 웹뷰 설정을 미리 적용하여 문제를 예방할 수 있습니다.

결론

웹뷰를 사용할 때는 로드하는 웹 페이지의 특성에 맞게 설정을 조정하는 것이 중요합니다. 특히 현대적인 웹 페이지는 로컬 스토리지 등 다양한 기능을 사용하기 때문에, 웹뷰에서 이를 지원하도록 설정해야 합니다.