Skip to content

Commit 26e2f37

Browse files
committed
track error state while collecting the measures
1 parent 50896fd commit 26e2f37

File tree

1 file changed

+25
-12
lines changed

1 file changed

+25
-12
lines changed

src/components/ReactPerfDevtool.js

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ let store = []
1717
class ReactPerfDevtool extends React.Component {
1818
timer = null
1919

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+
2024
constructor(props) {
2125
super(props)
2226
this.state = {
@@ -25,7 +29,9 @@ class ReactPerfDevtool extends React.Component {
2529
totalTime: 0, // Total time taken combining all the phases.
2630
pendingEvents: 0, // Pending event count.
2731
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
2935
}
3036
}
3137

@@ -42,12 +48,15 @@ class ReactPerfDevtool extends React.Component {
4248
clearInterval(this.timer)
4349
}
4450

51+
updateErrorState = () =>
52+
this.setState({ hasError: true, errorMsg: this.ERROR_MSG })
53+
4554
getMeasuresLength = () => {
4655
chrome.devtools.inspectedWindow.eval(
4756
"performance.getEntriesByType('measure').length",
48-
(count, error) => {
49-
if (error) {
50-
console.error('Error', error)
57+
(count, err) => {
58+
if (err) {
59+
this.updateErrorState()
5160
return
5261
}
5362

@@ -77,9 +86,9 @@ class ReactPerfDevtool extends React.Component {
7786
getMeasures = () => {
7887
chrome.devtools.inspectedWindow.eval(
7988
"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()
8392
return
8493
}
8594
// Update the state.
@@ -153,11 +162,15 @@ class ReactPerfDevtool extends React.Component {
153162
Pending Events: {this.state.pendingEvents}
154163
</div>
155164
<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+
)}
161174
</div>
162175
)
163176
}

0 commit comments

Comments
 (0)