웹뷰(WKWebview)에서 발생하는 에러 감지하기

 

웹뷰를 사용하다보면

네트워크 연결 상태 등의 이유로 최초 페이지가 로드가 되지 않거나

웹뷰 내 페이지 이동중 에러가 발생하는 경우가 있습니다.

 

이 경우 어떻게 에러를 감지할 수 있는지 알아보겠습니다.

 

1. 웹 페이지 최초 로딩 에러 감지

WKNavigationDelegate를 활용하여 최초 로딩 에러를 감지할 수 있습니다.

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate {

    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let configuration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: configuration)
        webView.navigationDelegate = self
        view.addSubview(webView)

        if let url = URL(string: "https://www.example.com") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }

    // MARK: - WKNavigationDelegate
    func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
        // 초기 로딩 에러
    }

    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        // 초기 로딩 이후 에러
    }
}

 

webView(_:didFailProvisionalNavigation:withError:)

- URL 리소스에 도달하기 전에 발생하는 오류입니다.

- 네트워크 연결, URL 형식, 지원되지 않는 URL 사용 등이 있습니다.

 

webView(_:didFail:withError:)

- 리소스를 로드하는 동안 발생하는 오류입니다.

- 페이지 자체의 잘못된 코드로 발생하는 오류 등이 있습니다.

 

위 두 가지 메서드를 통해서 웹뷰의 초기 로딩 에러를 잡을 수 있습니다.

그렇다면 웹뷰 내에서 이동하는 도중에 발생하는 에러는 어떻게 잡을 수 있을까요?

 

 

2. 웹뷰 내 페이지 이동 중 발생하는 에러 잡기

결론부터 말씀드리면 페이지 이동 중 발생하는 에러는 WKWebView의 내부 처리 방식으로 인해 잡을 수 없으며, 대신 페이지 로드가 실패했다는 사실을 알리는 메서드를 사용하여 처리해야 합니다.

 

이 부분을 조사하면서 WKWebview의 페이지 이동 방식에 대해서 알게 되었습니다.

WKWebView는 웹 페이지가 이동될 때 URL이 변경되는 것이 아니라 기존의 WKWebView 인스턴스 내에서 새로운 콘텐츠가 로드되는 방식을 사용한다고 합니다.

즉, URL을 새로 로드하는 것이 아니라 콘텐츠만 다시 그려주는 것입니다. 페이지 이동 시 성능을 향상시키기 위해서 위와 같은 방법을 사용했다고 하네요.

 

이러한 이유로 WKWebview는 페이지 이동 중 발생하는 에러를 잡을 수 없습니다. 1번에서 언급한 페이지 로드 실패 메서드를 사용하는 것이 최선입니다.

 

 

음... 그래서 뭔가 아쉽습니다...

네이티브의 네비게이션바가 없는 웹뷰라면 이동중 로드 실패시 화면을 끌 수 없는 상황이 발생할 수도 있습니다.

이럴땐 어떻게 해야할까요?

 

 

이를 보완할 수 있는 방법으로는 네트워크 상태를 detect해서 연결이 끊기면 상단에 X버튼을 추가하거나 재시도 화면을 노출 시켜주는 방법이 있습니다.

 

실제로 네이티브 네비게이션바를 사용하지 않는 웹뷰를 사용한 적이 있는데, 네트워크가 끊긴 상태로 페이지를 이동하면 웹뷰가 흰 화면으로 나오는 이슈가 있었습니다. 빈 화면으로 앱이 막혔고 사용자는 오도가도 못 하는 상황이 생길 수 있었습니다.

이때 Rechability로 네트워크 상태를 관찰하고 네트워크가 끊긴 경우 우측 상단에 X버튼을 추가해주는 방식으로 문제를 대응 할 수 있었습니다.