Skip to content
This repository was archived by the owner on Sep 21, 2021. It is now read-only.

Commit 8cef679

Browse files
gregtatumnchevobbe
gregtatum
authored and
nchevobbe
committed
Add prettier formatting for error rep's stacks
1 parent b488d7b commit 8cef679

File tree

6 files changed

+173
-58
lines changed

6 files changed

+173
-58
lines changed

‎packages/devtools-reps/src/launchpad/components/Console.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,11 @@ main {
3838
margin-bottom: 0.5rem;
3939
}
4040

41+
.rep-element {
42+
white-space: pre-wrap;
43+
word-wrap: break-word;
44+
}
45+
4146
.rep-element + .rep-element {
4247
margin-left: 0.5rem;
4348
}

‎packages/devtools-reps/src/launchpad/samples.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,36 @@ let samples = {
137137
symbol: [
138138
"Symbol('foo')",
139139
"Symbol()"
140+
],
141+
142+
errors: [
143+
"throw new Error('This is a simple error message.');",
144+
`
145+
var error = new Error('Complicated error message');
146+
error.stack =
147+
"unserializeProfileOfArbitraryFormat@http://localhost:4242/2969802751c9e11c0c2d.bundle.js:26705:11\\n" +
148+
"_callee7$@http://localhost:4242/2969802751c9e11c0c2d.bundle.js:27948:27\\n" +
149+
"tryCatch@http://localhost:4242/2969802751c9e11c0c2d.bundle.js:64198:37\\n" +
150+
"invoke@http://localhost:4242/2969802751c9e11c0c2d.bundle.js:64432:22\\n" +
151+
"defineIteratorMethods/</prototype[method]@http://localhost:4242/2969802751c9e11c0c2d.bundle.js:64250:16\\n" +
152+
"step@http://localhost:4242/2969802751c9e11c0c2d.bundle.js:5257:22\\n" +
153+
"step/<@http://localhost:4242/2969802751c9e11c0c2d.bundle.js:5268:13\\n" +
154+
"run@http://localhost:4242/2969802751c9e11c0c2d.bundle.js:64973:22\\n" +
155+
"notify/<@http://localhost:4242/2969802751c9e11c0c2d.bundle.js:64986:28\\n" +
156+
"flush@http://localhost:4242/2969802751c9e11c0c2d.bundle.js:65282:9\\n";
157+
158+
error;
159+
`,
160+
`
161+
var error = new Error('Complicated error message');
162+
error.stack =
163+
"onPacket@resource://devtools/shared/base-loader.js -> resource://devtools/shared/client/debugger-client.js:856:9\\n" +
164+
"send/<@resource://devtools/shared/base-loader.js -> resource://devtools/shared/transport/transport.js:569:13\\n" +
165+
"exports.makeInfallible/<@resource://devtools/shared/base-loader.js -> resource://devtools/shared/ThreadSafeDevToolsUtils.js:109:14\\n" +
166+
"exports.makeInfallible/<@resource://devtools/shared/base-loader.js -> resource://devtools/shared/ThreadSafeDevToolsUtils.js:109:14\\n";
167+
168+
error;
169+
`
140170
]
141171
};
142172

‎packages/devtools-reps/src/reps/error.js‎

Lines changed: 62 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -44,17 +44,70 @@ function ErrorRep(props) {
4444
name = "Error";
4545
}
4646

47-
let content = props.mode === MODE.TINY
48-
? name
49-
: `${name}: ${preview.message}`;
47+
const content = [];
48+
49+
if (props.mode === MODE.TINY) {
50+
content.push(name);
51+
} else {
52+
content.push(`${name}: "${preview.message}"`);
53+
}
5054

5155
if (preview.stack && props.mode !== MODE.TINY) {
52-
/*
53-
* Since Reps are used in the JSON Viewer, we can't localize
54-
* the "Stack trace" label (defined in debugger.properties as
55-
* "variablesViewErrorStacktrace" property), until Bug 1317038 lands.
56-
*/
57-
content = `${content}\nStack trace:\n${preview.stack}`;
56+
content.push("\n");
57+
58+
/**
59+
* Transform the stack from:
60+
*
61+
* semicolon@debugger eval code:1:109
62+
* jkl@debugger eval code:1:63
63+
* asdf@debugger eval code:1:28
64+
* @debugger eval code:1:227
65+
*
66+
* Into a column layout:
67+
*
68+
* semicolon (<anonymous>:8:10)
69+
* jkl (<anonymous>:5:10)
70+
* asdf (<anonymous>:2:10)
71+
* (<anonymous>:11:1)
72+
*/
73+
74+
const stack = [];
75+
preview.stack
76+
.split("\n")
77+
.forEach((line, index) => {
78+
if (!line) {
79+
// Skip any blank lines
80+
return;
81+
}
82+
const result = line.match(/^(.*)@(.*)$/);
83+
let functionName;
84+
let location;
85+
if (!result || result.length !== 3) {
86+
// This line did not match up nicely with the "function@location" pattern for
87+
// some reason.
88+
functionName = line;
89+
} else {
90+
functionName = result[1];
91+
location = ` (${result[2]})`;
92+
}
93+
stack.push(
94+
span(
95+
{ key: "fn" + index, className: "objectBox-stackTrace-fn" },
96+
functionName
97+
));
98+
stack.push(
99+
span(
100+
{ key: "location" + index, className: "objectBox-stackTrace-location" },
101+
location
102+
));
103+
});
104+
105+
content.push(
106+
span(
107+
{ key: "stack", className: "objectBox-stackTrace-grid" },
108+
stack
109+
)
110+
);
58111
}
59112

60113
return span({

‎packages/devtools-reps/src/reps/reps.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
--node-color: var(--theme-highlight-purple);
1616
--reference-color: var(--theme-highlight-blue);
1717
--comment-node-color: var(--theme-comment);
18+
--stack-function-color: var(--theme-highlight-red);
1819
}
1920

2021
.theme-firebug {
@@ -80,6 +81,24 @@
8081
color: var(--object-color);
8182
}
8283

84+
.objectBox-stackTrace-grid {
85+
display: inline-grid;
86+
grid-template-columns: auto auto;
87+
margin-top: 3px;
88+
}
89+
90+
.objectBox-stackTrace-fn::before {
91+
content: "\3BB"; /* The "lambda" symbol */
92+
color: var(--theme-body-color);
93+
display: inline-block;
94+
margin: 0 0.3em;
95+
}
96+
97+
.objectBox-stackTrace-fn {
98+
color: var(--stack-function-color);
99+
padding-inline-start: 17px;
100+
}
101+
83102
.objectBox-Location,
84103
.location {
85104
color: var(--location-color);

‎packages/devtools-reps/src/reps/tests/__snapshots__/error.js.snap‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Error - Eval error renders with expected text for an EvalError 1`] = `
4+
"EvalError: \\"EvalError message\\"
5+
(debugger eval code:10:13)"
6+
`;
7+
8+
exports[`Error - Internal error renders with expected text for an InternalError 1`] = `
9+
"InternalError: \\"InternalError message\\"
10+
(debugger eval code:11:13)"
11+
`;
12+
13+
exports[`Error - Multi line stack error renders with expected text for Error object 1`] = `
14+
"Error: \\"bar\\"
15+
errorBar (debugger eval code:6:15)errorFoo (debugger eval code:3:3) (debugger eval code:8:1)"
16+
`;
17+
18+
exports[`Error - Range error renders with expected text for RangeError 1`] = `
19+
"RangeError: \\"RangeError message\\"
20+
(debugger eval code:12:13)"
21+
`;
22+
23+
exports[`Error - Reference error renders with expected text for ReferenceError 1`] = `
24+
"ReferenceError: \\"ReferenceError message\\"
25+
(debugger eval code:13:13)"
26+
`;
27+
28+
exports[`Error - Simple error renders with expected text for simple error 1`] = `
29+
"Error: \\"Error message\\"
30+
(debugger eval code:1:13)"
31+
`;
32+
33+
exports[`Error - Syntax error renders with expected text for SyntaxError 1`] = `
34+
"SyntaxError: \\"SyntaxError message\\"
35+
(debugger eval code:14:13)"
36+
`;
37+
38+
exports[`Error - Type error renders with expected text for TypeError 1`] = `
39+
"TypeError: \\"TypeError message\\"
40+
(debugger eval code:15:13)"
41+
`;
42+
43+
exports[`Error - URI error renders with expected text for URIError 1`] = `
44+
"URIError: \\"URIError message\\"
45+
(debugger eval code:16:13)"
46+
`;

‎packages/devtools-reps/src/reps/tests/error.js‎

Lines changed: 11 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,7 @@ describe("Error - Simple error", () => {
2929
object: stub
3030
}));
3131

32-
expect(renderedComponent.text()).toEqual(
33-
"Error: Error message\n" +
34-
"Stack trace:\n" +
35-
"@debugger eval code:1:13\n"
36-
);
32+
expect(renderedComponent.text()).toMatchSnapshot();
3733
expectActorAttribute(renderedComponent, stub.actor);
3834
});
3935

@@ -69,13 +65,7 @@ describe("Error - Multi line stack error", () => {
6965
object: stub
7066
}));
7167

72-
expect(renderedComponent.text()).toEqual(
73-
"Error: bar\n" +
74-
"Stack trace:\n" +
75-
"errorBar@debugger eval code:6:15\n" +
76-
"errorFoo@debugger eval code:3:3\n" +
77-
"@debugger eval code:8:1\n"
78-
);
68+
expect(renderedComponent.text()).toMatchSnapshot();
7969
});
8070

8171
it("renders expected text for simple error with a multiple line in tiny mode", () => {
@@ -100,7 +90,7 @@ describe("Error - Error without stacktrace", () => {
10090
object: stub
10191
}));
10292

103-
expect(renderedComponent.text()).toEqual("Error: Error message");
93+
expect(renderedComponent.text()).toEqual("Error: \"Error message\"");
10494
});
10595

10696
it("renders expected text for simple error without stacktrace in tiny mode", () => {
@@ -126,11 +116,7 @@ describe("Error - Eval error", () => {
126116
object: stub
127117
}));
128118

129-
expect(renderedComponent.text()).toEqual(
130-
"EvalError: EvalError message\n" +
131-
"Stack trace:\n" +
132-
"@debugger eval code:10:13\n"
133-
);
119+
expect(renderedComponent.text()).toMatchSnapshot();
134120
});
135121

136122
it("renders with expected text for an EvalError in tiny mode", () => {
@@ -156,11 +142,7 @@ describe("Error - Internal error", () => {
156142
object: stub
157143
}));
158144

159-
expect(renderedComponent.text()).toEqual(
160-
"InternalError: InternalError message\n" +
161-
"Stack trace:\n" +
162-
"@debugger eval code:11:13\n"
163-
);
145+
expect(renderedComponent.text()).toMatchSnapshot();
164146
});
165147

166148
it("renders with expected text for an InternalError in tiny mode", () => {
@@ -186,11 +168,7 @@ describe("Error - Range error", () => {
186168
object: stub
187169
}));
188170

189-
expect(renderedComponent.text()).toEqual(
190-
"RangeError: RangeError message\n" +
191-
"Stack trace:\n" +
192-
"@debugger eval code:12:13\n"
193-
);
171+
expect(renderedComponent.text()).toMatchSnapshot();
194172
});
195173

196174
it("renders with expected text for RangeError in tiny mode", () => {
@@ -216,11 +194,7 @@ describe("Error - Reference error", () => {
216194
object: stub
217195
}));
218196

219-
expect(renderedComponent.text()).toEqual(
220-
"ReferenceError: ReferenceError message\n" +
221-
"Stack trace:\n" +
222-
"@debugger eval code:13:13\n"
223-
);
197+
expect(renderedComponent.text()).toMatchSnapshot();
224198
});
225199

226200
it("renders with expected text for ReferenceError in tiny mode", () => {
@@ -246,11 +220,7 @@ describe("Error - Syntax error", () => {
246220
object: stub
247221
}));
248222

249-
expect(renderedComponent.text()).toEqual(
250-
"SyntaxError: SyntaxError message\n" +
251-
"Stack trace:\n" +
252-
"@debugger eval code:14:13\n"
253-
);
223+
expect(renderedComponent.text()).toMatchSnapshot();
254224
});
255225

256226
it("renders with expected text for SyntaxError in tiny mode", () => {
@@ -276,11 +246,7 @@ describe("Error - Type error", () => {
276246
object: stub
277247
}));
278248

279-
expect(renderedComponent.text()).toEqual(
280-
"TypeError: TypeError message\n" +
281-
"Stack trace:\n" +
282-
"@debugger eval code:15:13\n"
283-
);
249+
expect(renderedComponent.text()).toMatchSnapshot();
284250
});
285251

286252
it("renders with expected text for TypeError in tiny mode", () => {
@@ -306,11 +272,7 @@ describe("Error - URI error", () => {
306272
object: stub
307273
}));
308274

309-
expect(renderedComponent.text()).toEqual(
310-
"URIError: URIError message\n" +
311-
"Stack trace:\n" +
312-
"@debugger eval code:16:13\n"
313-
);
275+
expect(renderedComponent.text()).toMatchSnapshot();
314276
});
315277

316278
it("renders with expected text for URIError in tiny mode", () => {
@@ -336,7 +298,7 @@ describe("Error - DOMException", () => {
336298
}));
337299

338300
expect(renderedComponent.text()).toEqual(
339-
"DOMException: 'foo;()bar!' is not a valid selector"
301+
"DOMException: \"'foo;()bar!' is not a valid selector\""
340302
);
341303
});
342304

0 commit comments

Comments
 (0)