[base] Add global error handler (#1333)

* [base] Add global error handler

* [base] Basic error styling

packages/@sanity/base/src/components/Document.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
+import uncaughtErrorHandler from '../util/uncaughtErrorHandler'
 import generateScriptLoader from '../util/generateScriptLoader'
 import AppLoadingScreen from './AppLoadingScreen'
 import NoJavascript from './NoJavascript'
@@ -34,6 +35,7 @@ function Document(props) {
 
   const scripts = props.scripts.map(item => assetUrl(staticPath, item))
   const scriptLoader = generateScriptLoader(scripts)
+  const errorHandler = uncaughtErrorHandler()
 
   const favicons = props.favicons.map((item, index) => (
     <link key={item.path} rel="icon" href={assetUrl(staticPath, item)} />
@@ -56,6 +58,7 @@ function Document(props) {
         </div>
 
         {/* eslint-disable react/no-danger */}
+        <script dangerouslySetInnerHTML={{__html: errorHandler}} />
         <script dangerouslySetInnerHTML={{__html: scriptLoader}} />
         {/* eslint-enable react/no-danger */}
       </body>

packages/@sanity/base/src/util/generateScriptLoader.js

@@ -29,5 +29,5 @@
 
 export default scripts => {
   const urls = `[${scripts.map(JSON.stringify).join(',')}]`
-  return `!function(e,t){if(void 0!==window.fetch)t.forEach(function(t){var o=e.createElement("script");o.src=t,o.async=!1,e.head.appendChild(o)});else{var o=e.getElementById("sanity");'<div style="height:100%;width: 100%;position: absolute;top:45%;text-align:center;font-family:helvetica, arial, sans-serif;">',"<h1>Browser not supported</h1>",'<p>Please use a modern browser such as <a href="https://www.google.com/chrome/">Chrome</a> or <a href="https://www.getfirefox.org/">Firefox</a>.</p>',"</div>","</div>";var r=o;do{r.style.height="100%",r=r.parentNode}while(r.parentNode);o.innerHTML='<div style="position:relative;height:100%;"><div style="height:100%;width: 100%;position: absolute;top:45%;text-align:center;font-family:helvetica, arial, sans-serif;"><h1>Browser not supported</h1><p>Please use a modern browser such as <a href="https://www.google.com/chrome/">Chrome</a> or <a href="https://www.getfirefox.org/">Firefox</a>.</p></div></div>'}}(document,${urls});`
+  return `/* Script loader */\n!function(e,t){if(void 0!==window.fetch)t.forEach(function(t){var o=e.createElement("script");o.src=t,o.async=!1,e.head.appendChild(o)});else{var o=e.getElementById("sanity");'<div style="height:100%;width: 100%;position: absolute;top:45%;text-align:center;font-family:helvetica, arial, sans-serif;">',"<h1>Browser not supported</h1>",'<p>Please use a modern browser such as <a href="https://www.google.com/chrome/">Chrome</a> or <a href="https://www.getfirefox.org/">Firefox</a>.</p>',"</div>","</div>";var r=o;do{r.style.height="100%",r=r.parentNode}while(r.parentNode);o.innerHTML='<div style="position:relative;height:100%;"><div style="height:100%;width: 100%;position: absolute;top:45%;text-align:center;font-family:helvetica, arial, sans-serif;"><h1>Browser not supported</h1><p>Please use a modern browser such as <a href="https://www.google.com/chrome/">Chrome</a> or <a href="https://www.getfirefox.org/">Firefox</a>.</p></div></div>'}}(document,${urls});`
 }

packages/@sanity/base/src/util/uncaughtErrorHandler.js

@@ -0,0 +1,59 @@
+/* eslint-disable no-var, prefer-template */
+/* Unminified: */
+/*
+function errHandler(msg, url, lineNo, columnNo, error) {
+  window.lolerr = error
+  var err = error || msg
+  var container = document.getElementById('sanity')
+  var wrapper = document.createElement('div')
+  wrapper.style.position = 'absolute'
+  wrapper.style.top = '50%'
+  wrapper.style.left = '50%'
+  wrapper.style.transform = 'translate(-50%, -50%)'
+
+  var header = document.createElement('h1')
+  header.innerText = 'Uncaught error'
+
+  var pre = document.createElement('pre')
+  var stack = document.createElement('code')
+  pre.style.fontSize = '0.8em'
+  pre.style.opacity = '0.7'
+  pre.style.overflow = 'auto'
+  pre.style.maxHeight = '70vh'
+
+  var cleanStack = err.stack && err.stack.replace(err.message, '').replace(/^error: *\n?/i, '')
+  var errTitle = err.stack ? err.message : err.toString()
+  var errStack = err.stack ? '\n\nStack:\n\n' + cleanStack : ''
+  var errString = errTitle + errStack + '\n\n(Your browsers Developer Tools may contain more info)'
+  stack.textContent = errString
+
+  var reload = document.createElement('button')
+  reload.style.padding = '0.8em 1em'
+  reload.style.marginTop = '1em'
+  reload.style.border = 'none'
+  reload.style.backgroundColor = '#303030'
+  reload.style.color = '#fff'
+  reload.style.borderRadius = '4px'
+
+  reload.onclick = function() {
+    window.location.reload()
+  }
+  reload.textContent = 'Reload'
+
+  pre.appendChild(stack)
+  wrapper.appendChild(header)
+  wrapper.appendChild(pre)
+  wrapper.appendChild(reload)
+
+  while (container.firstChild) {
+    container.removeChild(container.firstChild)
+  }
+
+  container.appendChild(wrapper)
+}
+
+export default () => `window.onerror = ${errHandler.toString()}`
+*/
+
+export default () =>
+  `/* Global error handler */\nwindow.onerror = function(e,t,n,o,l){var a=l||e,r=document.getElementById("sanity"),d=document.createElement("div");d.style.position="absolute",d.style.top="50%",d.style.left="50%",d.style.transform="translate(-50%, -50%)";var s=document.createElement("h1");s.innerText="Uncaught error";var i=document.createElement("pre"),c=document.createElement("code");i.style.fontSize="0.8em",i.style.opacity="0.7",i.style.overflow="auto",i.style.maxHeight="70vh";var m=a.stack&&a.stack.replace(a.message,"").replace(/^error: *\\n?/i,""),p=(a.stack?a.message:a.toString())+(a.stack?"\\n\\nStack:\\n\\n"+m:"")+"\\n\\n(Your browsers Developer Tools may contain more info)";c.textContent=p;var y=document.createElement("button");for(y.style.padding="0.8em 1em",y.style.marginTop="1em",y.style.border="none",y.style.backgroundColor="#303030",y.style.color="#fff",y.style.borderRadius="4px",y.onclick=function(){window.location.reload()},y.textContent="Reload",i.appendChild(c),d.appendChild(s),d.appendChild(i),d.appendChild(y);r.firstChild;)r.removeChild(r.firstChild);r.appendChild(d)}`