React-devtools: Moving between renders crashes if selected element doesn't exist

Created on 8 Mar 2019 · 6Comments · Source: facebook/react-devtools

Moving between renders while an element is selected will crash the devtools if the selected element doesn't exist in the next render.

Reproduction

Go to this sandbox: https://xz27s.codesandbox.io/ (forkable here).
Start a React Devtools Profiler recording.
Click the Toggle Popup button two or more times (need multiple renders to move between).
Stop the recording.
Select the Popup (you need to be in a render where there is a Popup element).
Click an arrow to move to another render
:boom: React Devtools crashes :boom:

Source

pshrmn

👍3

Most helpful comment

Ah, shoot, I deleted that sandbox without remembering that it was for an active issue. I have updated the original message with a new sandbox.

Since the PR hasn't had any attention, I'm mostly waiting for the next version of React DevTools to come out; hopefully that fixes the issue, but if not I'll rebase against that.

pshrmn on 22 May 2019

👍2

All 6 comments

As a temporary workaround: closing and reopening the Chrome DevTools (pressing F12 twice) reconnects the react devtools correctly.

Though you lose the profiling data you were inspecting.

emileber on 21 Mar 2019

Just got hit by this.

Operating System: Windows 10 Enterprise 64-bit (10.0, Build 17134) (17134.rs4_release.180410-1804)
                 Language: English (Regional Setting: English)
      System Manufacturer: LENOVO
             System Model: 20BG0011US
                     BIOS: GNET83WW (2.31 ) (type: UEFI)
                Processor: Intel(R) Core(TM) i7-4700MQ CPU @ 2.40GHz (8 CPUs), ~2.4GHz
                   Memory: 16384MB RAM
      Available OS Memory: 16264MB RAM
                Page File: 11558MB used, 11105MB available
              Windows Dir: C:\Windows
          DirectX Version: DirectX 12
      DX Setup Parameters: Not found
         User DPI Setting: 96 DPI (100 percent)
       System DPI Setting: 96 DPI (100 percent)
          DWM DPI Scaling: Disabled
                 Miracast: Available, with HDCP
Microsoft Graphics Hybrid: Supported
           DxDiag Version: 10.00.17134.0001 64bit Unicode

joelstransky on 12 Apr 2019

Go to this sandbox: https://x2mvz39v8q.codesandbox.io/

Link needs to be updated. It is broken.

halitogunc on 22 May 2019

Ah, shoot, I deleted that sandbox without remembering that it was for an active issue. I have updated the original message with a new sandbox.

Since the PR hasn't had any attention, I'm mostly waiting for the next version of React DevTools to come out; hopefully that fixes the issue, but if not I'll rebase against that.

pshrmn on 22 May 2019

👍2

I tested this with a pre-release of the new extension (https://react-devtools-experimental-firefox.now.sh/) and the profiler did not crash. This issue and the accompanying PR should be safe to close when the new extension comes out.

pshrmn on 26 Jun 2019

❤1

React DevTools has been rewritten and recently launched a new version 4 UI. The source code for this rewrite was done in a separate repository and now lives in the main React repo (github.com/facebook/react).

Because version 4 was a total rewrite, and all issues in this repository are related to the old version 3 of the extension, I am closing all issues in this repository. If you can still reproduce this issue, or believe this feature request is still relevant, please open a new issue in the React repo: https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools