Fix Component Stacks for IE and Native Classes in Safari (#18575)
* Add more edge cases to fixture Also adjust some expectations. I think the column should ideally be 1 but varies. The Example row is one line off because it throws on the hook but should ideally be the component. Similarly class components with constructors may have the line in the constructor. * Account for the construct call taking a stack frame We do this by first searching for the first different frame, then find the same frames and then find the first different frame again. * Throw controls Otherwise they don't get a stack frame associated with them in IE. * Protect against generating stacks failing Errors while generating stacks will bubble to the root. Since this technique is a bit sketchy, we should probably protect against it. * Don't construct the thing that throws Instead, we pass the prototype as the "this". It's new every time anyway.
Sebastian Markbåge committed
Apr 10, 2020 at 19:39 UTC
72d00ab623502983ebd7ac0756cf2787df109811
13 files changed
+187
-71
fixtures/stacks/BabelClass-compiled.js
deleted
-25
@@ -1,25 +0,0 @@
1
-function _inheritsLoose(subClass, superClass) {
2
- subClass.prototype = Object.create(superClass.prototype);
3
- subClass.prototype.constructor = subClass;
4
- subClass.__proto__ = superClass;
5
-}
6
-
7
-// Compile this with Babel.
8
-// babel --config-file ./babel.config.json BabelClass.js --out-file BabelClass-compiled.js --source-maps
9
-let BabelClass = /*#__PURE__*/ (function(_React$Component) {
10
- _inheritsLoose(BabelClass, _React$Component);
11
-
12
- function BabelClass() {
13
- return _React$Component.apply(this, arguments) || this;
14
- }
15
-
16
- var _proto = BabelClass.prototype;
17
-
18
- _proto.render = function render() {
19
- return this.props.children;
20
- };
21
-
22
- return BabelClass;
23
-})(React.Component);
24
-
25
-//# sourceMappingURL=BabelClass-compiled.js.map
fixtures/stacks/BabelClass-compiled.js.map
deleted
-1
@@ -1 +0,0 @@
1
-{"version":3,"sources":["BabelClass.js"],"names":[],"mappings":";;AAAA;AACA;IAEM,U;;;;;;;;;SACJ,M,GAAA,kBAAS;AACP,WAAO,KAAK,KAAL,CAAW,QAAlB;AACD,G;;;EAHsB,KAAK,CAAC,S","file":"BabelClass-compiled.js","sourcesContent":["// Compile this with Babel.\n// babel --config-file ./babel.config.json BabelClass.js --out-file BabelClass-compiled.js --source-maps\n\nclass BabelClass extends React.Component {\n render() {\n return this.props.children;\n }\n}\n"]}
\ No newline at end of file
fixtures/stacks/BabelClass.js
deleted
-8
@@ -1,8 +0,0 @@
1
-// Compile this with Babel.
2
-// babel --config-file ./babel.config.json BabelClass.js --out-file BabelClass-compiled.js --source-maps
3
-
4
-class BabelClass extends React.Component {
5
- render() {
6
- return this.props.children;
7
- }
8
-}
fixtures/stacks/BabelClasses-compiled.js
new
+80
@@ -0,0 +1,80 @@
1
+function _assertThisInitialized(self) {
2
+ if (self === void 0) {
3
+ throw new ReferenceError(
4
+ "this hasn't been initialised - super() hasn't been called"
5
+ );
6
+ }
7
+ return self;
8
+}
9
+
10
+function _defineProperty(obj, key, value) {
11
+ if (key in obj) {
12
+ Object.defineProperty(obj, key, {
13
+ value: value,
14
+ enumerable: true,
15
+ configurable: true,
16
+ writable: true,
17
+ });
18
+ } else {
19
+ obj[key] = value;
20
+ }
21
+ return obj;
22
+}
23
+
24
+function _inheritsLoose(subClass, superClass) {
25
+ subClass.prototype = Object.create(superClass.prototype);
26
+ subClass.prototype.constructor = subClass;
27
+ subClass.__proto__ = superClass;
28
+}
29
+
30
+// Compile this with Babel.
31
+// babel --config-file ./babel.config.json BabelClasses.js --out-file BabelClasses-compiled.js --source-maps
32
+let BabelClass = /*#__PURE__*/ (function(_React$Component) {
33
+ _inheritsLoose(BabelClass, _React$Component);
34
+
35
+ function BabelClass() {
36
+ return _React$Component.apply(this, arguments) || this;
37
+ }
38
+
39
+ var _proto = BabelClass.prototype;
40
+
41
+ _proto.render = function render() {
42
+ return this.props.children;
43
+ };
44
+
45
+ return BabelClass;
46
+})(React.Component);
47
+
48
+let BabelClassWithFields = /*#__PURE__*/ (function(_React$Component2) {
49
+ _inheritsLoose(BabelClassWithFields, _React$Component2);
50
+
51
+ function BabelClassWithFields(...args) {
52
+ var _this;
53
+
54
+ _this = _React$Component2.call(this, ...args) || this;
55
+
56
+ _defineProperty(
57
+ _assertThisInitialized(_assertThisInitialized(_this)),
58
+ 'props',
59
+ void 0
60
+ );
61
+
62
+ _defineProperty(
63
+ _assertThisInitialized(_assertThisInitialized(_this)),
64
+ 'state',
65
+ {}
66
+ );
67
+
68
+ return _this;
69
+ }
70
+
71
+ var _proto2 = BabelClassWithFields.prototype;
72
+
73
+ _proto2.render = function render() {
74
+ return this.props.children;
75
+ };
76
+
77
+ return BabelClassWithFields;
78
+})(React.Component);
79
+
80
+//# sourceMappingURL=BabelClasses-compiled.js.map
fixtures/stacks/BabelClasses-compiled.js.map
new
+1
@@ -0,0 +1 @@
1
+{"version":3,"sources":["BabelClasses.js"],"names":[],"mappings":";;;;;;AAAA;AACA;IAEM,U;;;;;;;;;SACJ,M,qBAAS;AACP,WAAO,KAAK,KAAL,CAAW,QAAlB;AACD,G;;;EAHsB,KAAK,CAAC,S;;IAMzB,oB;;;;;;;;;;oFAGI,E;;;;;;;UACR,M,qBAAS;AACP,WAAO,KAAK,KAAL,CAAW,QAAlB;AACD,G;;;EANgC,KAAK,CAAC,S","file":"BabelClasses-compiled.js","sourcesContent":["// Compile this with Babel.\n// babel --config-file ./babel.config.json BabelClasses.js --out-file BabelClasses-compiled.js --source-maps\n\nclass BabelClass extends React.Component {\n render() {\n return this.props.children;\n }\n}\n\nclass BabelClassWithFields extends React.Component {\n // These compile to defineProperty which can break some interception techniques.\n props;\n state = {};\n render() {\n return this.props.children;\n }\n}\n"]}
\ No newline at end of file
fixtures/stacks/BabelClasses.js
new
+17
@@ -0,0 +1,17 @@
1
+// Compile this with Babel.
2
+// babel --config-file ./babel.config.json BabelClasses.js --out-file BabelClasses-compiled.js --source-maps
3
+
4
+class BabelClass extends React.Component {
5
+ render() {
6
+ return this.props.children;
7
+ }
8
+}
9
+
10
+class BabelClassWithFields extends React.Component {
11
+ // These compile to defineProperty which can break some interception techniques.
12
+ props;
13
+ state = {};
14
+ render() {
15
+ return this.props.children;
16
+ }
17
+}
fixtures/stacks/Components.js
renamed
+10
@@ -18,3 +18,13 @@ class NativeClass extends React.Component {
18
return this.props.children;
19
}
20
}
21
+
22
+class FrozenClass extends React.Component {
23
+ constructor() {
24
+ super();
25
+ }
26
+ render() {
27
+ return this.props.children;
28
+ }
29
+}
30
+Object.freeze(FrozenClass.prototype);
fixtures/stacks/Example.js
+11
-3
@@ -44,12 +44,20 @@ function Example() {
44
NativeClass,
45
null,
46
x(
47
- BabelClass,
47
+ FrozenClass,
48
null,
49
x(
50
- React.Suspense,
50
+ BabelClass,
51
null,
52
- x('div', null, x(Component, null, x(Throw)))
52
+ x(
53
+ BabelClassWithFields,
54
+ null,
55
+ x(
56
+ React.Suspense,
57
+ null,
58
+ x('div', null, x(Component, null, x(Throw)))
59
+ )
60
+ )
61
)
62
)
63
)
fixtures/stacks/babel.config.json
+1
@@ -1,5 +1,6 @@
1
{
2
"plugins": [
3
+ ["@babel/plugin-proposal-class-properties", {"loose": false}],
4
["@babel/plugin-transform-classes", {"loose": true}]
5
]
6
}
fixtures/stacks/index.html
+7
-6
@@ -27,8 +27,8 @@
27
</div>
28
<script src="../../build/node_modules/react/umd/react.production.min.js"></script>
29
<script src="../../build/node_modules/react-dom/umd/react-dom.production.min.js"></script>
30
- <script src="./Component.js"></script>
31
- <script src="./BabelClass-compiled.js"></script>
30
+ <script src="./Components.js"></script>
31
+ <script src="./BabelClasses-compiled.js"></script>
32
<script src="./Example.js"></script>
33
<script>
34
const container = document.getElementById("container");
@@ -36,16 +36,17 @@
36
</script>
37
<h3>The above stack should look something like this:</h3>
38
<pre>
39
-
39
at Lazy
41
- at Component (/stacks/Component.js:7:50)
40
+ at Component (/stacks/Component.js:7:1)
41
at div
42
at Suspense
43
+ at BabelClassWithFields (/stacks/BabelClasses-compiled.js:31:31)
44
at BabelClass (/stacks/BabelClass-compiled.js:13:29)
45
+ at FrozenClass (/stacks/Components.js:22:1)
46
at NativeClass (/stacks/Component.js:16:1)
47
at SuspenseList
47
- at Custom Name (/stacks/Component.js:11:23)
48
+ at Custom Name (/stacks/Component.js:11:1)
49
at ErrorBoundary (/stacks/Example.js:5:1)
49
- at Example (/stacks/Example.js:33:21)</pre>
50
+ at Example (/stacks/Example.js:32:1)</pre>
51
</body>
52
</html>
packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
+2
-4
@@ -2440,13 +2440,11 @@ describe('ReactErrorBoundaries', () => {
2440
);
2441
});
2442
2443
- it('should catch errors from errors in the throw phase from errors', () => {
2443
+ it('should protect errors from errors in the stack generation', () => {
2444
const container = document.createElement('div');
2445
2446
const evilError = {
2447
- get message() {
2448
- throw new Error('gotta catch em all');
2449
- },
2447
+ message: 'gotta catch em all',
2448
get stack() {
2449
throw new Error('gotta catch em all');
2450
},
packages/react-reconciler/src/ReactFiberComponentStack.js
+11
-7
@@ -59,11 +59,15 @@ function describeFiber(fiber: Fiber): string {
59
}
60
61
export function getStackByFiberInDevAndProd(workInProgress: Fiber): string {
62
- let info = '';
63
- let node = workInProgress;
64
- do {
65
- info += describeFiber(node);
66
- node = node.return;
67
- } while (node);
68
- return info;
62
+ try {
63
+ let info = '';
64
+ let node = workInProgress;
65
+ do {
66
+ info += describeFiber(node);
67
+ node = node.return;
68
+ } while (node);
69
+ return info;
70
+ } catch (x) {
71
+ return '\nError generating stack: ' + x.message + '\n' + x.stack;
72
+ }
73
}
packages/shared/ReactComponentStackFrame.js
+47
-17
@@ -36,10 +36,12 @@ export function describeBuiltInComponentFrame(
36
if (enableComponentStackLocations) {
37
if (prefix === undefined) {
38
// Extract the VM specific prefix used by each line.
39
- const match = Error()
40
- .stack.trim()
41
- .match(/\n( *(at )?)/);
42
- prefix = (match && match[1]) || '';
39
+ try {
40
+ throw Error();
41
+ } catch (x) {
42
+ const match = x.stack.trim().match(/\n( *(at )?)/);
43
+ prefix = (match && match[1]) || '';
44
+ }
45
}
46
// We use the prefix to ensure our stacks line up with native stack frames.
47
return '\n' + prefix + name;
@@ -75,7 +77,7 @@ export function describeNativeComponentFrame(
77
}
78
}
79
78
- const control = Error();
80
+ let control;
81
82
reentry = true;
83
let previousDispatcher;
@@ -90,7 +92,9 @@ export function describeNativeComponentFrame(
92
// This should throw.
93
if (construct) {
94
// Something should be setting the props in the constructor.
93
- const Fake = function() {};
95
+ const Fake = function() {
96
+ throw Error();
97
+ };
98
// $FlowFixMe
99
Object.defineProperty(Fake.prototype, 'props', {
100
set: function() {
@@ -100,16 +104,33 @@ export function describeNativeComponentFrame(
104
},
105
});
106
if (typeof Reflect === 'object' && Reflect.construct) {
107
+ // We construct a different control for this case to include any extra
108
+ // frames added by the construct call.
109
+ try {
110
+ Reflect.construct(Fake, []);
111
+ } catch (x) {
112
+ control = x;
113
+ }
114
Reflect.construct(fn, [], Fake);
115
} else {
105
- fn.call(new Fake());
116
+ try {
117
+ Fake.call();
118
+ } catch (x) {
119
+ control = x;
120
+ }
121
+ fn.call(Fake.prototype);
122
}
123
} else {
124
+ try {
125
+ throw Error();
126
+ } catch (x) {
127
+ control = x;
128
+ }
129
fn();
130
}
131
} catch (sample) {
132
// This is inlined manually because closure doesn't do it for us.
112
- if (sample && typeof sample.stack === 'string') {
133
+ if (sample && control && typeof sample.stack === 'string') {
134
// This extracts the first frame from the sample that isn't also in the control.
135
// Skipping one frame that we assume is the frame that calls the two.
136
const sampleLines = sample.stack.split('\n');
@@ -127,7 +148,7 @@ export function describeNativeComponentFrame(
148
}
149
for (; s >= 1 && c >= 0; s--, c--) {
150
// Next we find the first one that isn't the same which should be the
130
- // frame that called our sample function.
151
+ // frame that called our sample function and the control.
152
if (sampleLines[s] !== controlLines[c]) {
153
// In V8, the first line is describing the message but other VMs don't.
154
// If we're about to return the first line, and the control is also on the same
@@ -135,16 +156,25 @@ export function describeNativeComponentFrame(
156
// the control. I.e. before we entered the sample frame. So we ignore this result.
157
// This can happen if you passed a class to function component, or non-function.
158
if (s !== 1 || c !== 1) {
138
- // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
139
- const frame = '\n' + sampleLines[s - 1].replace(' at new ', ' at ');
140
- if (__DEV__) {
141
- if (typeof fn === 'function') {
142
- componentFrameCache.set(fn, frame);
159
+ do {
160
+ s--;
161
+ c--;
162
+ // We may still have similar intermediate frames from the construct call.
163
+ // The next one that isn't the same should be our match though.
164
+ if (c < 0 || sampleLines[s] !== controlLines[c]) {
165
+ // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
166
+ const frame = '\n' + sampleLines[s].replace(' at new ', ' at ');
167
+ if (__DEV__) {
168
+ if (typeof fn === 'function') {
169
+ componentFrameCache.set(fn, frame);
170
+ }
171
+ }
172
+ // Return the line we found.
173
+ return frame;
174
}
144
- }
145
- // Return the line we found.
146
- return frame;
175
+ } while (s >= 1 && c >= 0);
176
}
177
+ break;
178
}
179
}
180
}