WKWebView get Javascript Errors

Question

Is there any way to get the JavaScript errors from the WebView? I mean the following errors and possible warnings?

I am running JS code with the following extension:

extension WKWebView {
    func evaluateJavaScriptWithReturn(_ javaScriptString: String) -> String? {
        var finished = false
        var jsValue: String?
        
        evaluateJavaScript(javaScriptString) { (result, error) in
            if error == nil {
                if result != nil {
                    jsValue = result as? String
                }
            } else {
                jsValue = nil
            }
            finished = true
        }
        
        while !finished {
            RunLoop.current.run(mode: .defaultRunLoopMode, before: Date.distantFuture)
        }
        
        return jsValue
    }
}

But error is not what I'm looking for! Is there any way to get in my app, the above errors? Thanks a lot!

@iMHitesh its localhost, and i have produced the error by myself so i can get it on xcode print for example :) — Konstantinos Natsios
– Konstantinos Natsios, Commented May 8, 2018 at 9:21

Sam Soffes · Accepted Answer · 2020-04-04 16:44:57Z

12

To handle errors, we are going to add some JavaScript to the HTML we load into our page that will notify our native code about the error.

First, you need to setup your web view with a script message handler:

let controller = WKUserContentController()
controller.add(self, name: "error")

let configuration = WKWebViewConfiguration()
configuration.userContentController = controller

let webView = WKWebView(frame: .zero, configuration: configuration)

I locally create the full HTML document and inject the following JavaScript:

window.onerror = (msg, url, line, column, error) => {
  const message = {
    message: msg,
    url: url,
    line: line,
    column: column,
    error: JSON.stringify(error)
  }

  if (window.webkit) {
    window.webkit.messageHandlers.error.postMessage(message);
  } else {
    console.log("Error:", message);
  }
};

(I have the check and log since I sometime run the generated JavaScript in a browser.) You could also use the WKUserContentController to add a WKUserScript if you want to inject it into HTML you don’t fully control.

Next when you load a string into your web view, be sure to use localhost as the base URL. If you don’t do this, all of your errors will be "Script error.".

webView.loadHTMLString(html, baseURL: URL(string: "http://localhost/")!)

Now define your WKScriptMessageHandler:

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    switch message.name {
    case "error":
        // You should actually handle the error :)
        let error = (message.body as? [String: Any])?["message"] as? String ?? "unknown"
        assertionFailure("JavaScript error: \(error)")
    default:
        assertionFailure("Received invalid message: \(message.name)")
    }
}

You can add other cases to the switch statement for other messages you add to the WKUserContentController.

answered Apr 4, 2020 at 16:44

Sam Soffes

15k9 gold badges78 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Konstantinos Natsios Over a year ago

Going to accept this certain answer as a correct one. I've already been handling error messages in this certain way! And mosdef I should also update my question with the way I did it. Thaks Sam!

Jeff Over a year ago

Worked for me on iOS (12, 13) to get JS errors in the Xcode log. I had to use "localhost" as stated in the solution. Also, use WKWebView initWithFrame:configuration: Plus 1.

Андрей Вахрушев Over a year ago

Can you please elaborate on the significance of localhost? I see how base url is important for relative url resolution in the page, but how is it related to errors turning "Script error"?

Sam Soffes Over a year ago

If you don't use localhost as the host in baseURL all errors will just be "Script error." instead of the real error message.

Yun CHEN · Accepted Answer · 2018-05-08 09:58:55Z

7

Try the following way.

First, inject JS code to catch the error in html content:

window.onerror = function(error) {
  alert(error); // Fire when errors occur. Just a test, not always do this.
};

Second, display the error in WKWebView delegate method:

func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
    let alertController = UIAlertController(title: "alert", message: message, preferredStyle: UIAlertControllerStyle.alert)
    alertController.addAction(UIAlertAction(title: "OK", style: UIAlertActionStyle.cancel, handler: nil))
    self.present(alertController, animated: true, completion: nil)

    print("An error from web view: \(message)")
}

Remember to set delegate:

webView.uiDelegate = self

If you want to avoid the alerts, the alternative way is using decidePolicyForNavigationAction method to receive the JS's callback which is like window.open("error://message","_self")

edited May 8, 2018 at 9:58

answered May 8, 2018 at 9:34

Yun CHEN

6,6683 gold badges34 silver badges34 bronze badges

1 Comment

Yun CHEN Over a year ago

Now I think using webkit.messageHandlers is a better solution.Details are in @3spot 's answer and this post: stackoverflow.com/questions/34574864/…

3spot · Accepted Answer · 2018-12-18 16:29:20Z

7

In the JavaScript, hook the window onerror event to call back your script message handler:

window.onerror = function (msg, url, line) {
    window.webkit.messageHandlers.mylog.postMessage("JS: ERROR:" + msg + " @" + url + ":" + line);
};

You may just get "Script error." messages, which is a permissions issue. (documentation) Depending on your setup this can be fixed by adding a permission to your preferences. Swift:

webView.configuration.preferences.setValue(true, forKey: "allowFileAccessFromFileURLs")

answered Dec 18, 2018 at 16:29

3spot

1,8791 gold badge12 silver badges5 bronze badges

1 Comment

Pierre Over a year ago

allowFileAccessFromFileURLs is a private property

Mr Rogers · Accepted Answer · 2018-11-27 19:08:15Z

2

The best solution I've found is to use Safari's Web Inspector. There are instructions found here.

I kept running into Script error. messages with Yun CHEN's solution (which was great) with no actionable content.

answered Nov 27, 2018 at 19:08

Mr Rogers

6,2612 gold badges36 silver badges34 bronze badges

1 Comment

Sam Soffes Over a year ago

You need to make sure your base URL is localhost to fix "Script error." see my answer for more details.

Collectives™ on Stack Overflow

WKWebView get Javascript Errors

4 Answers 4

4 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related