@@ -17,6 +17,10 @@ let store = []
17
17
class ReactPerfDevtool extends React . Component {
18
18
timer = null
19
19
20
+ ERROR_MSG = `
21
+ An error occurred while collecting the measures. Please try again by reloading the inspected window or refresh the page.
22
+ `
23
+
20
24
constructor ( props ) {
21
25
super ( props )
22
26
this . state = {
@@ -25,7 +29,9 @@ class ReactPerfDevtool extends React.Component {
25
29
totalTime : 0 , // Total time taken combining all the phases.
26
30
pendingEvents : 0 , // Pending event count.
27
31
rawMeasures : [ ] , // Raw measures output. It is used for rendering the overall results.
28
- loading : false // To show the loading output while collecting the results.
32
+ loading : false , // To show the loading output while collecting the results.
33
+ hasError : false , // Track errors, occurred when collecting the measures.
34
+ errorMsg : null
29
35
}
30
36
}
31
37
@@ -42,12 +48,15 @@ class ReactPerfDevtool extends React.Component {
42
48
clearInterval ( this . timer )
43
49
}
44
50
51
+ updateErrorState = ( ) =>
52
+ this . setState ( { hasError : true , errorMsg : this . ERROR_MSG } )
53
+
45
54
getMeasuresLength = ( ) => {
46
55
chrome . devtools . inspectedWindow . eval (
47
56
"performance.getEntriesByType('measure').length" ,
48
- ( count , error ) => {
49
- if ( error ) {
50
- console . error ( 'Error' , error )
57
+ ( count , err ) => {
58
+ if ( err ) {
59
+ this . updateErrorState ( )
51
60
return
52
61
}
53
62
@@ -77,9 +86,9 @@ class ReactPerfDevtool extends React.Component {
77
86
getMeasures = ( ) => {
78
87
chrome . devtools . inspectedWindow . eval (
79
88
"JSON.stringify(performance.getEntriesByType('measure'))" ,
80
- ( measures , error ) => {
81
- if ( error ) {
82
- console . error ( 'Error' , error )
89
+ ( measures , err ) => {
90
+ if ( err ) {
91
+ this . updateErrorState ( )
83
92
return
84
93
}
85
94
// Update the state.
@@ -153,11 +162,15 @@ class ReactPerfDevtool extends React.Component {
153
162
Pending Events: { this . state . pendingEvents }
154
163
</ div >
155
164
< Table measures = { this . state . perfData } />
156
- < Results
157
- rawMeasures = { this . state . rawMeasures }
158
- totalTime = { this . state . totalTime }
159
- loading = { this . state . loading }
160
- />
165
+ { this . state . hasError ? (
166
+ this . state . errorMsg
167
+ ) : (
168
+ < Results
169
+ rawMeasures = { this . state . rawMeasures }
170
+ totalTime = { this . state . totalTime }
171
+ loading = { this . state . loading }
172
+ />
173
+ ) }
161
174
</ div >
162
175
)
163
176
}
0 commit comments