search

lahmatiy / react-render-tracker

React render tracker – a tool to discover performance issues related to unintentional re-renders and unmounts
https://lahmatiy.github.io/react-render-tracker/
MIT License
2.35k stars 36 forks source link

Connection to rempl publisher – pending #7

Closed nickshevr closed 3 years ago

nickshevr commented 3 years ago

I used local overridesin Chrome to create script tag in html.

<script src="https://unpkg.com/react-render-tracker"></script>

My react script is defer, so I think it would start later. Also I don't have issues with csp.

And I got next status checks:

Connection to page – OK
Connection to rempl – OK
Connection to rempl publisher – pending...
NOTE: Page should contains a rempl publisher

What is rempl publisher? And how can I check that order of React -> RRT is right? There are no errors/warnings/etc in console.

nickshevr commented 3 years ago

image Script is executing in the right way.

lahmatiy commented 3 years ago

Publisher is a part of the tool that is integrating with React and send data to UI. React render tracker (RRT) is built on Rempl which provides UI host init and transport layer. In your case publisher didn't connect to Rempl endpoint. This might be because of RRT script is not executed or executed in a sandbox or another frame. But to make sure I need to repro your scenario.

Tom910 commented 3 years ago

@lahmatiy 1) visit https://avito.ru (that site don't have CSP) 2) run in console - const scriptElement = document.createElement('script'); scriptElement.src='https://unpkg.com/react-render-tracker'; document.querySelector('body').append(scriptElement) 3) open rempl tab

lahmatiy commented 3 years ago

@Tom910 This will not work because the script must execute before the React is initialized. React is checking __REACT_DEVTOOLS_GLOBAL_HOOK__ in global to attach to a tool. So if React executes first it will not be connected to a tool.

nickshevr commented 3 years ago

@lahmatiy think we need an error in console for this case, if it is possible.

I did these things:

I checked with debugger, react initializing started after rrt executed.

nickshevr commented 3 years ago

Ok, I have issues with overridng So the real issue was created by order execution.

And wan't to copypaste that.

Think we need an error in console for this case, if it is possible.
lahmatiy commented 3 years ago

@nickshevr So problem is still here or not? :) It's not clear to me how you are using overrides. I tried Tampermonkey to inject a script (document.createElement('script') etc) and got the same issue. Then I copy&pasted source of RRT from cdn, the problem is gone. However for avito.ru it shows nothing 🤔 For a couple of other sites using React it works fine

christopher-caldwell commented 3 years ago

@Tom910 This will not work because the script must execute before the React is initialized. React is checking __REACT_DEVTOOLS_GLOBAL_HOOK__ in global to attach to a tool. So if React executes first it will not be connected to a tool.

Does this mean this tool automatically doesn't run if the dev tools aren't bundled? Namely if your build the app meant for a production environment. In case my question was unclear, does this run when using the production build of react?