From d6c53eb9142d1986e15b09435cb1191bd35c3aae Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Wed, 11 Dec 2019 13:29:19 +0100
Subject: [PATCH] fix(client): report cross origin errors (#37793)

* fix(client): report cross origin errors

This reports errors generated in cross origin scripts to the dev console
and lets the user know via the fcc console.

* refactor: clean up script error checks

Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
---
 client/src/templates/Challenges/utils/frame.js | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/client/src/templates/Challenges/utils/frame.js b/client/src/templates/Challenges/utils/frame.js
index 952921d0f9..b7999472a7 100644
--- a/client/src/templates/Challenges/utils/frame.js
+++ b/client/src/templates/Challenges/utils/frame.js
@@ -13,13 +13,18 @@ const testId = 'fcc-test-frame';
 // this also allows in-page anchors to work properly
 // rather than load another instance of the learn
 
-// window.onerror is added here to catch any errors thrown during the building
-// of the frame.
+// window.onerror is added here to report any errors thrown during the building
+// of the frame.  React dom errors already appear in the console, so onerror
+// does not need to pass them on to the default error handler.
 const createHeader = (id = mainId) => `
   <base href='' />
   <script>
     window.__frameId = '${id}';
     window.onerror = function(msg) {
+      var string = msg.toLowerCase();
+      if (string.includes('script error')) {
+        msg = 'Build error, open your browser console to learn more.';
+      }
       console.log(msg);
       return true;
     };
@@ -108,11 +113,16 @@ const initMainFrame = (frameReady, proxyLogger) => ctx => {
     // after the frame is ready. It has to be overwritten, as proxyLogger cannot
     // be added as part of createHeader.
     ctx.window.onerror = function(msg) {
-      console.log(msg);
+      var string = msg.toLowerCase();
+      if (string.includes('script error')) {
+        msg = 'Error, open your browser console to learn more.';
+      }
       if (proxyLogger) {
         proxyLogger(msg);
       }
-      return true;
+      // let the error propagate so it appears in the browser console, otherwise
+      // an error from a cross origin script just appears as 'Script error.'
+      return false;
     };
     frameReady();
   });