Getting started with react-perf-devtool and create-react-app

[Jamie Mason]

Hi @nitin42,
Thanks for this great Extension, however I have been having some trouble getting it to work and was hoping you could point out where I'm going wrong.

I have created a test case below so others can reproduce it, I am probably missing something obvious.

Steps to reproduce

1. npm install -g create-react-app

2. create-react-app reduced-test-case

3. cd reduced-test-case

4. yarn add -D react-perf-devtool

5. echo "
   const { registerObserver } = require('react-perf-devtool');
   registerObserver();
   " >> ./src/index.js

6. yarn start

7. Visit http://localhost:3000/?react_perf
8. Open React Performance Devtools Tab
9. Try refreshing the page, hitting reload button, reopening devtools etc.

Expected Behaviour

React Performance Devtools Tab shows performance data about the React app.

Actual Behaviour

React Performance Devtools shows:

An error occurred while collecting the measures. This is possibly due to
absence of register observer hook in your project. See the detailed documentation on how to register a top level observer in your React application.

your project is not using React.
If above solutions don't work, then try reloading the plugin or close and reopen the inspected window.

[Nitin Tulswani]

Oops! I got you. After Step 5. your src/index.js ended up with -

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

const { registerObserver } = require('react-perf-devtool');
registerObserver();

Here, registerObserver() is not hoisted so it is not able to infer which React components are present.

I made some changes.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

const { registerObserver } = require('react-perf-devtool');
registerObserver();

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

and got it working!

Hope it helps. Let me know 😃

[Jamie Mason]

Thanks @nitin42 I'll give this a try. So I understand, is the requirement that registerObserver() must be called before ReactDOM.render is called? That something needs to be present before the rendering is performed?

[Nitin Tulswani]

Yes! I should have added this to the docs. Anyway, thanks for reporting this!

[Nitin Tulswani]

Closing this! Open to feedback though.

[Jamie Mason]

No problem @nitin42. That change didn't seem to work for me but I will try when I get some time to revisit it. maybe I have another Chrome Extension that conflicts with this one I don't know.

[Nitin Tulswani]

Yup, may be. Let me know. Happy to help!

[Roland Chelwing]

Why close the issue when it clearly wasn't resolved? :(