Skip to content

Commit acbdb5e

Browse files
author
Andrew Start
committed
Added stack traces.
1 parent af0c17c commit acbdb5e

File tree

2 files changed

+169
-16
lines changed

2 files changed

+169
-16
lines changed

‎src/springroll/remote/RemoteTrace.js‎

Lines changed: 139 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,91 @@
147147
this.clear();
148148

149149
if(DEBUG)
150+
{
150151
window.RemoteTrace = this;
152+
this.testStack = function()
153+
{
154+
this._onMessage(JSON.stringify({
155+
time: 7,
156+
level: "GENERAL",
157+
message: ["I am a message with an %o object", {foo:"bar", blah:true}],
158+
stack: [
159+
{
160+
function: "pretendObject.doesNotExist",
161+
file: "http://www.google.com/nonExistantFile.js",
162+
lineLocation: "3:40"
163+
},
164+
{
165+
function: "<anonymous>",
166+
file: "http://www.google.com/nonExistantFile.js",
167+
lineLocation: "7"
168+
},
169+
{
170+
function: "this.testStack",
171+
file: "http://localhost:8080/assets/js/../../../src/springroll/remote/RemoteTrace.js",
172+
lineLocation: "154:10"
173+
}
174+
]
175+
}));
176+
};
177+
this.testGroups = function()
178+
{
179+
this._onMessage(JSON.stringify({
180+
time: 3,
181+
level: "group",
182+
message: ["Group start!"],
183+
stack: [
184+
{
185+
function: "pretendObject.doesNotExist",
186+
file: "http://www.google.com/nonExistantFile.js",
187+
lineLocation: "3:40"
188+
}
189+
]
190+
}));
191+
this._onMessage(JSON.stringify({
192+
time: 3,
193+
level: "GENERAL",
194+
message: ["item in a group #1!"],
195+
stack: [
196+
{
197+
function: "pretendObject.doesNotExist",
198+
file: "http://www.google.com/nonExistantFile.js",
199+
lineLocation: "3:40"
200+
}
201+
]
202+
}));
203+
this._onMessage(JSON.stringify({
204+
time: 3,
205+
level: "GENERAL",
206+
message: ["item in a group #2!"],
207+
stack: [
208+
{
209+
function: "pretendObject.doesNotExist",
210+
file: "http://www.google.com/nonExistantFile.js",
211+
lineLocation: "3:40"
212+
}
213+
]
214+
}));
215+
this._onMessage(JSON.stringify({
216+
level: "groupEnd"
217+
}));
218+
};
219+
}
220+
221+
output.on("click", ".message", function(e)
222+
{
223+
var target = $(e.target);
224+
//block object toggles from affecting stack visibility toggles
225+
if(target.hasClass("objectToggle") || target.parent().hasClass("objectToggle"))
226+
{
227+
//stop the event
228+
e.stopPropagation();
229+
var targetId = target.hasClass("objectToggle") ?
230+
target.data("target") : target.parent().data("target");
231+
//we have to handle the event ourselves
232+
$(targetId).collapse("toggle");
233+
}
234+
});
151235
};
152236

153237
// Reference to the prototype
@@ -314,6 +398,14 @@
314398
console.log(output);
315399
}
316400
};
401+
402+
function extendNumber(input, length)
403+
{
404+
var output = input.toString();
405+
while(output.length < length)
406+
output = "0" + output;
407+
return output;
408+
}
317409

318410
/**
319411
* Callback when a message is received by the server
@@ -332,12 +424,13 @@
332424
result = JSON.parse(result);
333425

334426
var level = (result.level || "GENERAL").toLowerCase(),
335-
stack = result.stack;
336-
337-
var now = new Date();
427+
stack = result.stack,
428+
now = new Date();
338429
if(result.time)
339430
now.setTime(result.time);
340-
now = now.toLocaleString();
431+
now = now.toDateString() + " " + extendNumber(now.getHours(), 2) + ":" +
432+
extendNumber(now.getMinutes(), 2) + ":" + extendNumber(now.getSeconds(), 2) +
433+
"." + extendNumber(now.getMilliseconds(), 3);
341434

342435
this.saveButton.removeClass('disabled');
343436
this.clearButton.removeClass('disabled');
@@ -448,8 +541,8 @@
448541
*/
449542
p.logMessage = function(now, messages, level, stack)
450543
{
451-
var message = "";
452-
for(var i = 0; i < messages.length; ++i)
544+
var message = "", i, length, messageDom;
545+
for(i = 0, length = messages.length; i < length; ++i)
453546
{
454547
if(i > 0)
455548
message += " ";
@@ -464,9 +557,41 @@
464557
.addClass(level)
465558
.append(
466559
$("<span class='type'></span>").text(level.toUpperCase()),
467-
$("<span class='timestamp'></span>").text(now),
468-
$("<span class='message'></span>").html(message)
560+
$("<span class='timestamp'></span>").text(now)
469561
);
562+
messageDom = $("<span class='message'></span>").html(message);
563+
if(stack)
564+
{
565+
var stackLinkText = stack[0].file;
566+
if(stackLinkText.indexOf("/") >= 0)
567+
stackLinkText = stackLinkText.substring(stackLinkText.lastIndexOf("/") + 1);
568+
stackLinkText += ":" + stack[0].lineLocation;
569+
log.append($("<span class='stackLink'></span>").text(stackLinkText))
570+
.append(messageDom);
571+
var groupId = "group_" + this.nextGroupId++;
572+
var group = $("<div class='group stack collapse in' id='" + groupId + "'></div>");
573+
for(i = 0, length = stack.length; i < length; ++i)
574+
{
575+
stackLinkText = stack[i].file;
576+
if(stackLinkText.indexOf("/") >= 0)
577+
stackLinkText = stackLinkText.substring(stackLinkText.lastIndexOf("/") + 1);
578+
stackLinkText += ":" + stack[i].lineLocation;
579+
var line = $("<div class='line'></div>");
580+
line.text(stack[i].function)
581+
.append($("<span class='stackLink'></span>").text(stackLinkText));
582+
group.append(line);
583+
}
584+
log.append(group);
585+
586+
messageDom.attr("data-toggle", "collapse").attr("data-target", "#" + groupId);
587+
if(level != "error")
588+
{
589+
messageDom.addClass("collapsed");
590+
group.collapse("hide");
591+
}
592+
}
593+
else
594+
log.append(messageDom);
470595
this.getLogParent().append(log);
471596
return log;
472597
};
@@ -479,7 +604,7 @@
479604
*/
480605
p.prepareObject = function(input)
481606
{
482-
var output = $("<div class='object'>" + (Array.isArray(input) ? "Array [" : "Object {") + "</div>");
607+
var output = $("<div class='object'></div>");
483608

484609
var group = $("<div class='group log collapse in'></div>");
485610
for(var key in input)
@@ -499,15 +624,17 @@
499624
{
500625
var groupId = "group_" + this.nextGroupId++;
501626
group.attr("id", groupId);
502-
var chevron = $("<span class='groupToggle' data-toggle='collapse' data-target='#" + groupId + "'></span>");
503-
chevron.append(
627+
var chevron = $("<span class='objectToggle' data-toggle='collapse' data-target='#" + groupId + "'> " + (Array.isArray(input) ? "Array [" : "Object {") + "</span>");
628+
chevron.prepend(
504629
$("<span class='glyphicon glyphicon-chevron-right right'></span>"),
505630
$("<span class='glyphicon glyphicon-chevron-down down'></span>")
506631
);
507632
output.prepend(chevron);
508633
output.append(group);
634+
group.append(Array.isArray(input) ? "]" : "}");
509635
}
510-
output.append(Array.isArray(input) ? "]" : "}");
636+
else
637+
group.append(Array.isArray(input) ? "Array []" : "Object {}");
511638
return output;
512639
};
513640

‎src/springroll/remote/less/trace.less‎

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,20 +52,38 @@
5252
.type {
5353
font-weight:bold;
5454
padding-right: 10px;
55-
display:inline-block;
55+
display:block;
56+
float: left;
5657
}
5758
.timestamp {
5859
display: none;
5960
opacity: 0.8;
6061
padding-right: 10px;
6162
font-size: 10px;
63+
float: left;
6264
}
6365
.message {
66+
margin: 0 auto;
67+
display: block;
68+
width: 100%;
6469
}
6570

66-
.groupToggle {
71+
.stackLink {
72+
float: right;
73+
cursor: pointer;
74+
text-decoration: underline;
75+
}
76+
77+
.stack {
78+
.line {
79+
display: block;
80+
}
81+
}
82+
83+
.groupToggle,
84+
.objectToggle {
6785
.user-deselect();
68-
cursor:pointer;
86+
cursor: pointer;
6987
padding-right: 5px;
7088
.down { display:inline; }
7189
.right { display:none; }
@@ -75,6 +93,11 @@
7593
}
7694
}
7795

96+
.groupToggle {
97+
display: block;
98+
float: left;
99+
}
100+
78101
.object {
79102
display: inline-block;
80103
vertical-align: top;
@@ -88,7 +111,7 @@
88111
white-space:pre;
89112
}
90113
&.timestamps .timestamp {
91-
display: inline-block;
114+
display: block;
92115
}
93116

94117
// Default color scheme
@@ -100,6 +123,7 @@
100123
.debug { color: #0066CC;}
101124
.warning {color: #FF9900;}
102125
.error {color: #CC0000;}
126+
.stack .line:hover { background:#ddd; }
103127
}
104128
&.solarizedDark {
105129
background:#002B36;
@@ -109,6 +133,7 @@
109133
.debug {color: #859900;}
110134
.warning {color: #DC322F;}
111135
.error {color: #D33682;}
136+
.stack .line:hover { background:#ddd; }
112137
}
113138
&.solarizedLight {
114139
background:#FDF6E3;
@@ -118,5 +143,6 @@
118143
.debug {color: #859900;}
119144
.warning {color: #DC322F;}
120145
.error {color: #D33682;}
146+
.stack .line:hover { background:#ddd; }
121147
}
122148
}

0 commit comments

Comments
 (0)