From 89fd2db39b6b86e83b0c3c0ff5a31b83b9e564f3 Mon Sep 17 00:00:00 2001
From: Jamon Holmgren <jamonholmgren@gmail.com>
Date: Fri, 7 May 2021 17:16:07 -0700
Subject: [PATCH] chore(docs): Adds some simple webview JS debugging tips
 (#1969 by @jamonholmgren)

[skip ci]
---
 docs/Debugging.md | 43 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/docs/Debugging.md b/docs/Debugging.md
index 120742d..c37a86a 100644
--- a/docs/Debugging.md
+++ b/docs/Debugging.md
@@ -2,6 +2,47 @@
 
 Here are some helpful React Native WebView debugging tips.
 
+## Script Errors
+
+It can be difficult to debug syntax errors and other script errors in WebView, since errors don't show up in a console by default.
+
+One option (if you're loading HTML from an external source) is to inject an error handler before the content is loaded.
+
+```js
+<WebView
+  injectedJavaScriptBeforeContentLoaded={`
+    window.onerror = function(message, sourcefile, lineno, colno, error) {
+      alert("Message: " + message + " - Source: " + sourcefile + " Line: " + lineno + ":" + colno);
+      return true;
+    };
+    true;
+  `}
+  source={{
+    uri:
+      'https://bl.ocks.org/jamonholmgren/raw/48423fd99537283beace1daa2688e80f/',
+  }}
+/>
+```
+
+This will provide an Alert box with (hopefully) useful debugging information.
+
+If you're injecting JavaScript, this may fail with `Script error` and no other useful information. One simple way to debug this is to wrap your injected JavaScript in a try/catch, like so:
+
+```js
+const js = `
+  try {
+    // your code here
+  } catch(e) {
+    alert(e)
+  }
+  true;
+`;
+```
+
+This will bring up an alert with the error message, which may or may not be helpful.
+
+If these two simple methods fail to uncover the bug, try using the next technique!
+
 ## Debugging WebView Contents
 
 ### iOS & Safari
@@ -28,6 +69,7 @@ Also, if you don't see your device in the Develop menu, and you started Safari b
 It's possible to debug WebView contents in the Android emulator or on a device using Chrome DevTools.
 
 1. You will need to make the following change to `MainApplication.java` to enabled web contents debugging:
+
 ```java
   import android.webkit.WebView;
 
@@ -38,6 +80,7 @@ It's possible to debug WebView contents in the Android emulator or on a device u
     WebView.setWebContentsDebuggingEnabled(true);
   }
 ```
+
 2. Start app with React Native WebView in Android emulator or Android device
 3. Chrome -> DevTools -> Menu (3 dots) -> More tools -> Remote devices
 4. Select your device on the left and select "Inspect" on the WebView contents you'd like to inspect