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

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

@ -3,55 +3,74 @@ 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>
document.addEventListener('DOMContentLoaded', function() {
var iframeWindow = window;
var originalConsole = iframeWindow.console;
iframeWindow.console = {};
var methods = [ /**
'debug', 'clear', 'error', 'info', 'log', 'warn' * 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;
};
methods.forEach( function(method) { function hijackConsoleScript(lineOffset) {
iframeWindow.console[method] = function() { return `<script>
originalConsole[method].apply(originalConsole, arguments); document.addEventListener('DOMContentLoaded', function() {
var iframeWindow = window;
var originalConsole = iframeWindow.console;
iframeWindow.console = {};
var args = Array.from(arguments); var methods = [
args = args.map(function(i) { 'debug', 'clear', 'error', 'info', 'log', 'warn'
// catch objects ];
return (typeof i === 'string') ? i : JSON.stringify(i);
});
// post message to parent window methods.forEach( function(method) {
window.parent.postMessage({ iframeWindow.console[method] = function() {
method: method, originalConsole[method].apply(originalConsole, arguments);
arguments: args,
source: 'sketch' var args = Array.from(arguments);
}, '*'); args = stringifyArgs(args);
// post message to parent window
window.parent.postMessage({
method: method,
arguments: args,
source: 'sketch'
}, '*');
};
});
// catch reference errors, via http://stackoverflow.com/a/12747364/2994108
window.onerror = function (msg, url, lineNumber, columnNo, error) {
var string = msg.toLowerCase();
var substring = "script error";
var data = {};
if (string.indexOf(substring) !== -1){
data = 'Script Error: See Browser Console for Detail';
} else {
data = msg + ' (Line: ' + (lineNumber - `+lineOffset+`) + ')';
}
window.parent.postMessage({
method: 'error',
arguments: data,
source: 'sketch'
}, '*');
return false;
}; };
}); });
</script>`;
// catch reference errors, via http://stackoverflow.com/a/12747364/2994108 }
window.onerror = function (msg, url, lineNumber, columnNo, error) {
var string = msg.toLowerCase();
var substring = "script error";
var data = {};
if (string.indexOf(substring) > -1){
data = 'Script Error: See Browser Console for Detail';
} else {
data = msg + ' Line: ' + lineNumber + 'column: ' + columnNo;
}
window.parent.postMessage({
method: 'error',
arguments: data,
source: 'sketch'
}, '*');
return false;
};
});
</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;
} }