lahmatiy / react-render-tracker Goto Github PK

Copying your own correspondence to me:

The path is built using a hack based on a stack trace parsing. If it is truncated, then it will not be the full path (the initial parts will be missing, that is, only the tail will be displayed). The stack trace can be truncated by the runtime or a setting like Error.stackTraceLimit (⁠details).

In my case, the trace only goes back 7 or 8 levels, which turns out to not quite get me to the original hook responsible for causing a re-render. It would be great if this can be made to get the full trace regardless of the browser settings.

Hi, I'm getting following error with the Rempl extension when using the latest version 0.7.1 of React Render Tracker. It works correctly when I use older version 0.7.0.

There should be a version of RRT which allows to load dumped event log into it instead of real time event log capturing.

I am trying to run react-render-tracker against a react profiling build but seeing this error in the console

dispatcher-trap.ts:292 
       Uncaught (in promise) TypeError: renderer.getCurrentFiber is not a function
    at Object.set [as current] (dispatcher-trap.ts:292:41)
    at li (react-dom.profiling.min.js:169:287)
    at xc (react-dom.profiling.min.js:169:424)
    at sf (react-dom.profiling.min.js:163:248)
    at Qa (react-dom.profiling.min.js:158:295)
    at Hd (react-dom.profiling.min.js:195:178)
    at react-dom.profiling.min.js:198:188
    at qi (react-dom.profiling.min.js:164:220)
    at Id (react-dom.profiling.min.js:198:174)
    at Object.N.render (react-dom.profiling.min.js:250:154)

Are there any plans to make the tracker compatible with the profiling build?

Howdy 👋

I have a Next.js app where I'm trying to use react-render-tracker like this (same results with inpage:true)

unfortunately the browser extension is stuck in infinite event loading despite the fact some pending events are already collected as shown on the screenshot bellow

Any idea what could be wrong? Thanks ahead.

React v16.8.4

Minimal trace:

react_devtools_backend.js:4049 [react-render-tracker] Error: Could not find ID for Fiber "Provider"
    at $ (browser.rtt.js:44)
    at fe (browser.rtt.js:44)
    at fe (browser.rtt.js:44)
    at fe (browser.rtt.js:44)
    at Object.tn [as handleCommitFiberRoot] (browser.rtt.js:44)
    at Object.onCommitFiberRoot (browser.rtt.js:3)
    at react-with-dom.js:13097
    at react-with-dom.js:13062
    at onCommitRoot (react-with-dom.js:13114)
    at commitRoot (react-with-dom.js:22229)

browser.rtt.js - js from dist as is.
I have multiple react root on my page.

I'm getting following result after my app launch (but no errors):

My app is inside Docker container (nginx is also involved). Maybe I should open some port for react-render-tracker?

I’m on macOS 12.0.1 (x86_64) and am using this example app.

I have tested this on:

• MS Edge 96.0.1054.62 (Official build) (x86_64)
• Chromium 85.0.4183.102 (Developer Build) (64-bit)

It does, however, work correctly with Firefox.

Stage 0 (highest priority)

• Make it works with React devtools
• Fix render root's mount/unmount after init (otherwise crash)
• Optimize event log transfering to fetch an events delta on UI side (to work well with large apps)
• Limit event log by N last events with option to load more events (to work well with large apps)
• Setup build a bundle for publish to NPM
• Event log for a component's subtree
• Add a brief description in readme (at least how to use)
• Make repo public & publish to npm

Stage 1

• Details on update (rerender) reasons
• Fix an order of events in the way React performs them
• Commit boundaries in event log / timestamp
• Reset stats i.e. clean event log (#9, @ilyaryabchinski)
• Optimize render tree rendering (avoid entire tree re-rendering) (v0.2)

Stage 2

• Display a hook path to useState/useDispatcher (v0.4)
• Statistics for a component type (v0.5)
• Pick a subtree i.e. show only a subtree in the render tree (v0.5)
• Rework component filter into find component
  • Don't hide tree leafs
  • Scroll into view next/prev (v0.5)
• Scroll into view for selected component (v0.5)

Stage 3

• Display props updates and update bailouts based on props 0.6.0
• Display contexts used on components 0.6.0
• Display which components are affecting by a context 0.6.0
• Display locations where setState()/dispatch() hook's callbacks are called 0.6.0
• Display locations where setState()/forceUpdate() methods are called 0.6.0
• Display changes for useMemo()/useCallback() 0.6.0
• Open a location in a editor 0.6.0
• Resolve locations using source maps 0.6.0
• Detect and display bailouts 0.6.0
  • React.memo()
  • shouldComponentUpdate()
  • state didn't changed
  • the same element (same type, props, no context change)

Stage 4

• Event trigger path tracking
• Keyboard navigation
  • Select next/prev fiber by Up/Down keys 0.6.0
  • Select next/prev matched fiber by Up/Down keys on search input 0.6.0
  • Expand/collapse fibers on tree
  • Select next/prev similar fiber
  • ...
• Custom event logging i.e. app could generate some time marks like scenario start/finish – this could be used to observe events between two time marks
• Pause for new event receiving/processing 0.6.1
• Select a component by a click on page

Integrations

• #11
• #24
• #25

Backlog

• Write a tutorial(s) how to use the tool
• Filter events i.e. filter by component name, event type, duration etc
• Restore selection after reload (need for persistence?)
• #28
• #27
• State snapshot and difference
• Side by side comparison of subtree across commits
• Data only client API (for CI purposes like reporting and comparison between revisions) 0.6.2
• Integration with headless browser libraries Puppeteer/Playwright 0.6.2
• Events playback i.e. visualize how a render tree was updated with a control by a slider
• Optimize render tree rendering by using virtualization
• Optimize event log updates (avoid entire event log re-rendering)
• Display timings for various phases in React
• Persistence for settings
• Descriptive card for a component: size of subtree, used components etc
• Descriptive card for the entire tree: number of used components etc
• Aggregated event stat in event log i.e. pie chart or smth like that with dominants by durations
• Stick event log to the bottom
• Track effect events (useEffect/useLayoutEffect)
• Hints for improvements: too many hooks, use/don't use React.memo etc
• Discovery.js integration
• TDB...

I got this error sometimes

[react-render-tracker] TypeError: Cannot read property 'constructor' of null

Since update 0.7.2 react-render-tracker started to cause infinite re-renders, see minimal repo with reproduction:

https://codesandbox.io/s/modest-saha-2iu6rd?file=/src/App.js

Once useQuery finished request BrowserRouter re-renders (not sure what causes the re-render itself) and useQuery sends request again. Without react-render-tracker it works just fine.

Refer to "Option 1 – Using with browser's devtools" and can't get expected result.

I'm getting errors due to undefined fibers. Debugger is pointing specifically at:

Other cases seem to be solving this by first checking getFiberById.has(fiberId) and continuing if not. However, I'm guessing this would create knock-on effects downstream. Not to mention that the missing fiber is probably a symptom of an issue further upstream. Will investigate further with a local / unminified build and see what I can find.

Please let me know if there's any further detail I can provide.

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.

Seems like search by display name doesn't work. The interesting part is that the component's name is underlined in the tree but I can't navigate to it.

I can see in the roadmap that Filter events i.e. filter by component name, event type, duration etc is not implemented yet but not sure if it's connected.

In the image below you can see that the name is underlined but there are no matches in the search bar.

P.S. I used inpage mode

For security reasons.

It should be generated for every build.

I used to use react-render-tracker with rempl but seems liie it's not working anymore. All I get in devtools is a white screen

Meanwhile inpage cconfig works ok

React: 16.14
Browser: Brave Version 1.40.107 Chromium: 103.0.5060.53 (Official Build) (x86_64)
Rempl: 1.0.3

• Basic Function
• Installation instructions
• Nice-to-have: Integration with https://github.com/jhen0409/react-native-debugger

Since react-native already connects to react-devtools, I think this should be doable, but I've never fiddled at that level of the rendering engines!

Any thoughts?

Расширение, по всей видимости инжектирует код в приложение т.к в логах приложения видим ошибку

TypeError: Cannot read properties of null (reading 'forEach')\n    
at initBackend (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:14911:18)\n    
at setup (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:11628:3)\n    
at welcome (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:11574:3)

Since an event log already can be captured via a data client API, it would be complimented with the same functionality in RRT user interface. This task is pretty much trivia, however there is a challenge here to stabilize and document the event log format across various tooling.

I tried using tempermonkey to insert "<script>" at runtime but failed:

(function() {
    'use strict';
    const scr = document.createElement('script');
    scr.type="text/javascript";
    scr.src='https://cdn.jsdelivr.net/npm/react-render-tracker';
    scr['data-config'] = "inpage:true"
    const h = document.getElementsByTagName('head')[0]
    h.insertBefore(scr, h.firstChild)
})();

It would be really convenient if the connection to the tracker can be initiated via an npm package import instead of a script tag (similarly to how react-devtools does it).

I'm trying to optimize a program running in an iframe and this would be perfect for that.

import 'react-render-tracker';
import React from 'react';
...

I’m on macOS 12.0.1 (x86_64) and am using this example app.

I have tested this on:

• MS Edge 96.0.1054.62 (Official build) (x86_64)
• Chromium 85.0.4183.102 (Developer Build) (64-bit)

It does, however, work correctly with Firefox.

Hello, starting from v0.7.4, I'm receiving huge amount of following console logs

Hi this tool is very useful.
I'm wondering why can not this become a browser extension as React dev tools, so that I do not need to setup my webpage?

I tried adding the script using next/script within layout.tsx

import React from 'react';
import { Providers } from './providers';
import NextTopLoader from 'nextjs-toploader';
import { font } from '@ss/theme/font';
import Script from 'next/script'

export const metadata = {
  title: 'Shadow Shifts - Admin',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={font.className}>
      <Script
        src="https://cdn.jsdelivr.net/npm/react-render-tracker"
      />
      <body>
        <Providers>
          <NextTopLoader />
          {children}
        </Providers>
      </body>
    </html>
  );
}

I tried option #0 I get Waiting for a supported React renderer to be connected...

I tried option #1 I get Connection to rempl publisher – Awaiting...

I can see the script loading correctly

Also worth mentioning that I am using React 18

Hi. Are there any plans to add a hotkey to hide the overlay