fixes #761, but fixes the bigger issue at hand here, which is that log messages were not getting deserialized properly

This commit is contained in:
Cassie Tarakajian 2018-11-15 14:26:31 -05:00
parent 0a8c7c5773
commit 661a367b72
4 changed files with 10 additions and 30 deletions

View file

@ -70,13 +70,6 @@ class Console extends React.Component {
} }
} }
formatData(args) {
if (!Array.isArray(args)) {
return Array.of(args);
}
return args;
}
render() { render() {
const consoleClass = classNames({ const consoleClass = classNames({
'preview-console': true, 'preview-console': true,
@ -105,16 +98,8 @@ class Console extends React.Component {
</div> </div>
<div ref={(element) => { this.consoleMessages = element; }} className="preview-console__messages"> <div ref={(element) => { this.consoleMessages = element; }} className="preview-console__messages">
{this.props.consoleEvents.map((consoleEvent) => { {this.props.consoleEvents.map((consoleEvent) => {
const { arguments: args, method, times } = consoleEvent; const { data: args, method, times } = consoleEvent;
const { theme } = this.props; const { theme } = this.props;
Object.assign(consoleEvent, { data: this.formatData(args) });
if (Object.keys(args).length === 0) {
return (
<div key={consoleEvent.id} className="preview-console__message preview-console__message--undefined">
<span key={`${consoleEvent.id}-0`}>undefined</span>
</div>
);
}
return ( return (
<div key={consoleEvent.id} className={`preview-console__message preview-console__message--${method}`}> <div key={consoleEvent.id} className={`preview-console__message preview-console__message--${method}`}>
{ times > 1 && { times > 1 &&
@ -127,7 +112,7 @@ class Console extends React.Component {
} }
<ConsoleFeed <ConsoleFeed
styles={this.getConsoleFeedStyle(theme, times)} styles={this.getConsoleFeedStyle(theme, times)}
logs={Array.of(consoleEvent)} logs={[consoleEvent]}
/> />
</div> </div>
); );

View file

@ -8,6 +8,7 @@ import loopProtect from 'loop-protect';
import { JSHINT } from 'jshint'; import { JSHINT } from 'jshint';
import decomment from 'decomment'; import decomment from 'decomment';
import classNames from 'classnames'; import classNames from 'classnames';
import { Decode } from 'console-feed';
import { getBlobUrl } from '../actions/files'; import { getBlobUrl } from '../actions/files';
import { resolvePathToFile } from '../../../../server/utils/filePath'; import { resolvePathToFile } from '../../../../server/utils/filePath';
import { import {
@ -80,8 +81,10 @@ class PreviewFrame extends React.Component {
handleConsoleEvent(messageEvent) { handleConsoleEvent(messageEvent) {
if (Array.isArray(messageEvent.data)) { if (Array.isArray(messageEvent.data)) {
messageEvent.data.every((message, index, arr) => { let decodedMessages = messageEvent.data.map(message => Decode(message.log));
const { arguments: args } = message;
decodedMessages.every((message, index, arr) => {
const { data: args } = message;
let hasInfiniteLoop = false; let hasInfiniteLoop = false;
Object.keys(args).forEach((key) => { Object.keys(args).forEach((key) => {
if (typeof args[key] === 'string' && args[key].includes('Exiting potential infinite loop')) { if (typeof args[key] === 'string' && args[key].includes('Exiting potential infinite loop')) {
@ -99,7 +102,7 @@ class PreviewFrame extends React.Component {
} }
const cur = Object.assign(message, { times: 1 }); const cur = Object.assign(message, { times: 1 });
const nextIndex = index + 1; const nextIndex = index + 1;
while (isEqual(cur.arguments, arr[nextIndex].arguments) && cur.method === arr[nextIndex].method) { while (isEqual(cur.data, arr[nextIndex].data) && cur.method === arr[nextIndex].method) {
cur.times += 1; cur.times += 1;
arr.splice(nextIndex, 1); arr.splice(nextIndex, 1);
if (nextIndex === arr.length) { if (nextIndex === arr.length) {
@ -109,7 +112,7 @@ class PreviewFrame extends React.Component {
return true; return true;
}); });
this.props.dispatchConsoleEvent(messageEvent.data); this.props.dispatchConsoleEvent(decodedMessages);
} }
} }

View file

@ -2,17 +2,12 @@ import * as ActionTypes from '../../../constants';
const consoleMax = 500; const consoleMax = 500;
const initialState = []; const initialState = [];
let messageId = 0;
const console = (state = initialState, action) => { const console = (state = initialState, action) => {
let messages; let messages;
switch (action.type) { switch (action.type) {
case ActionTypes.CONSOLE_EVENT: case ActionTypes.CONSOLE_EVENT:
messages = [...action.event]; messages = [...action.event];
messages.forEach((message) => {
message.id = messageId;
messageId += 1;
});
return state.concat(messages).slice(-consoleMax); return state.concat(messages).slice(-consoleMax);
case ActionTypes.CLEAR_CONSOLE: case ActionTypes.CLEAR_CONSOLE:
return []; return [];

View file

@ -6,11 +6,8 @@ window.loopProtect = loopProtect;
const consoleBuffer = []; const consoleBuffer = [];
const LOGWAIT = 500; const LOGWAIT = 500;
Hook(window.console, (log) => { Hook(window.console, (log) => {
const { method, data: args } = log[0];
consoleBuffer.push({ consoleBuffer.push({
method, log
arguments: args,
source: 'sketch'
}); });
}); });
setInterval(() => { setInterval(() => {