r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

getting a little closer with console output line number #36

Browse source
This commit is contained in:
Lauren McCarthy 2016-08-26 14:22:58 -04:00
parent ef8034eb1b
commit 23d5341e7c
1 changed files with 66 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
client/modules/IDE/components/PreviewFrame.js
View file

@ -3,7 +3,28 @@ import ReactDOM from 'react-dom';
import escapeStringRegexp from 'escape-string-regexp'; import escapeStringRegexp from 'escape-string-regexp';
import srcDoc from 'srcdoc-polyfill'; import srcDoc from 'srcdoc-polyfill';
const hijackConsoleScript = `<script>
/**
* Stringify all of the console objects from an array for proxying
*/
function stringifyArgs(args) {
var newArgs = [];
// TODO this was forEach but when the array is [undefined] it wouldn't
// iterate over them
var i = 0, length = args.length, arg;
for(; i < length; i++) {
arg = args[i];
if (typeof arg === 'undefined') {
newArgs.push('undefined');
} else {
newArgs.push(stringify(arg));
}
}
return newArgs;
};
function hijackConsoleScript(lineOffset) {
return `<script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
var iframeWindow = window; var iframeWindow = window;
var originalConsole = iframeWindow.console; var originalConsole = iframeWindow.console;
@ -18,10 +39,7 @@ const hijackConsoleScript = `<script>
originalConsole[method].apply(originalConsole, arguments); originalConsole[method].apply(originalConsole, arguments);
var args = Array.from(arguments); var args = Array.from(arguments);
args = args.map(function(i) { args = stringifyArgs(args);
// catch objects
return (typeof i === 'string') ? i : JSON.stringify(i);
});
// post message to parent window // post message to parent window
window.parent.postMessage({ window.parent.postMessage({
@ -38,10 +56,10 @@ const hijackConsoleScript = `<script>
var substring = "script error"; var substring = "script error";
var data = {}; var data = {};
if (string.indexOf(substring) > -1){ if (string.indexOf(substring) !== -1){
data = 'Script Error: See Browser Console for Detail'; data = 'Script Error: See Browser Console for Detail';
} else { } else {
data = msg + ' Line: ' + lineNumber + 'column: ' + columnNo; data = msg + ' (Line: ' + (lineNumber - `+lineOffset+`) + ')';
} }
window.parent.postMessage({ window.parent.postMessage({
method: 'error', method: 'error',
@ -52,6 +70,7 @@ const hijackConsoleScript = `<script>
}; };
}); });
</script>`; </script>`;
}
class PreviewFrame extends React.Component { class PreviewFrame extends React.Component {
@ -146,7 +165,10 @@ class PreviewFrame extends React.Component {
htmlFile = htmlFile.replace(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi, `<head>\n${htmlHeadContents}\n</head>`); htmlFile = htmlFile.replace(/(?:<head.*?>)([\s\S]*?)(?:<\/head>)/gmi, `<head>\n${htmlHeadContents}\n</head>`);
} }
htmlFile += hijackConsoleScript; var lineOffset = htmlFile.substring(0, htmlFile.indexOf('<script>')).split('\n').length;
console.log(lineOffset)
htmlFile += hijackConsoleScript(lineOffset);
return htmlFile; return htmlFile;
} }