[base] Use pre-wrap to constrain width when displaying uncaught errors (

#1343)
sanity-io · May 31, 2019 · 10f9130 · 10f9130
1 parent 8bd38b4
commit 10f9130
Showing 1 changed file with 2 additions and 1 deletion.
diff --git a/packages/@sanity/base/src/util/uncaughtErrorHandler.js b/packages/@sanity/base/src/util/uncaughtErrorHandler.js
@@ -24,6 +24,7 @@ function errHandler(msg, url, lineNo, columnNo, err) {
   pre.style.fontSize = '0.8em'
   pre.style.opacity = '0.7'
   pre.style.overflow = 'auto'
+  pre.style.whiteSpace = 'pre-wrap'
   pre.style.maxHeight = '70vh'
 
   var cleanStack = err.stack && err.stack.replace(err.message, '').replace(/^error: *\n?/i, '')
@@ -61,4 +62,4 @@ export default () => `window.onerror = ${errHandler.toString()}`
 */
 
 export default () =>
-  `/* Global error handler */\nwindow.onerror = function(e,t,n,o,a){if(!a){return};var 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)}`
+  `/* Global error handler */\nwindow.onerror = function(e,t,n,o,a){if(!a){return};var 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.whiteSpace="pre-wrap",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)}`