Closed Bug 1336621 Opened 7 years ago Closed 7 years ago

React missing key warnings in Frame and StackTrace

Categories

(DevTools :: Shared Components, defect)

Product:
DevTools
Component:
Shared Components
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(firefox54 fixed)

Status:
RESOLVED FIXED
Milestone:
Firefox 54
Tracking Flags:
Tracking Status
firefox54 --- fixed

People

(Reporter: jryans, Assigned: jryans)

Details

Attachments

(1 file)

Bug 1336621 - Add keys in Frame and StackTrace components.
59 bytes, text/x-review-board-request
Honza
: review+
Details 
Currently when I open the Browser Console with the dev build of React, I see warnings like:

16:52:21.773 "Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Frame`. See https://fb.me/react-warning-keys for more information.
    in span (created by Frame)
    in Frame"  react-dev.js:22807:9
16:52:21.955 "Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `StackTrace`. See https://fb.me/react-warning-keys for more information.
    in Frame (created by StackTrace)
    in StackTrace"
Comment on attachment 8833528 [details]
Bug 1336621 - Add keys in Frame and StackTrace components.

https://reviewboard.mozilla.org/r/109752/#review111102

I am now seeing (in the Browser Console when opening the Toolbox):

Warning: flattenChildren(...): Encountered two children with the same key, `167`. Child keys must be unique; when two children share a key, only the first child will be used.
    in div (created by StackTrace)
    in StackTrace  react-dev.js:22807:9
    
   
Honza
Attachment #8833528 - Flags: review?(odvarko) → review-
Comment on attachment 8833528 [details]
Bug 1336621 - Add keys in Frame and StackTrace components.

https://reviewboard.mozilla.org/r/109752/#review111102

I think I see how this could happen, but I can't replicate the error you are seeing, so I'd like to make sure I can do that first.

Do I need to the open the toolbox on a particular page that is logging an error?
See comment 4.
Flags: needinfo?(odvarko)
(In reply to J. Ryan Stinnett [:jryans] (use ni?) from comment #4)
> Do I need to the open the toolbox on a particular page that is logging an
> error?
It happens on any page for me.

Here is my STR:
0) Load any page (I am testing with google.com)
1) Open the Browser Console (you might want to clear it)
2) Open the Toolbox and select the Memory panel
3) Check out the Browser Console, it should display the warnings.

Honza
Flags: needinfo?(odvarko)
(In reply to Jan Honza Odvarko [:Honza] from comment #6)
> (In reply to J. Ryan Stinnett [:jryans] (use ni?) from comment #4)
> > Do I need to the open the toolbox on a particular page that is logging an
> > error?
> It happens on any page for me.
> 
> Here is my STR:
> 0) Load any page (I am testing with google.com)
> 1) Open the Browser Console (you might want to clear it)
> 2) Open the Toolbox and select the Memory panel
> 3) Check out the Browser Console, it should display the warnings.

Well, I still wasn't able to reproduce it even with those steps...  Anyway, there is a failing test and I think I see what needs to be fixed.  Hopefully this will fix the issue you are seeing as well.
Comment on attachment 8833528 [details]
Bug 1336621 - Add keys in Frame and StackTrace components.

https://reviewboard.mozilla.org/r/109752/#review111556

It's weird that you can't see the error (missing ac_add_options --enable-debug-js-modules?)

Anyway, the lastest change fixed the problem.

R+ assuming Try is green.

Thanks!

Honza
Attachment #8833528 - Flags: review?(odvarko) → review+
(In reply to Jan Honza Odvarko [:Honza] from comment #10)
> Comment on attachment 8833528 [details]
> Bug 1336621 - Add keys in Frame and StackTrace components.
> 
> https://reviewboard.mozilla.org/r/109752/#review111556
> 
> It's weird that you can't see the error (missing ac_add_options
> --enable-debug-js-modules?)

I'm definitely using react-dev, because I actually see a few other unrelated warnings about form components in the Memory tool...  Anyway, glad to hear the issue you saw is fixed!
Pushed by jryans@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/fa8a7cd8a7f4
Add keys in Frame and StackTrace components. r=Honza
https://hg.mozilla.org/mozilla-central/rev/fa8a7cd8a7f4
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
status-firefox54: affected → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 54
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.