Closed Bug 1530323 Opened 2 years ago Closed 2 years ago

Warning: Failed prop type: The prop `member` is marked as required in `HeadersPanel`

Categories

(DevTools :: Netmonitor, defect, P3)

Product:
DevTools
Component:
Netmonitor
Type:
defect

Tracking

(firefox67 fixed)

Status:
RESOLVED FIXED
Milestone:
Firefox 67
Tracking Flags:
Tracking Status
firefox67 --- fixed

People

(Reporter: Honza, Assigned: lucasneiva07, Mentored)

Details

(Keywords: good-first-bug, Whiteboard: good-first-bug[good first verify])

Attachments

(1 file)

HeadersPanel: unecessary isRequired on PropTypes (Bug 1530323)
47 bytes, text/x-phabricator-request
Details | Review

I am seeing the following warning in the Browser console that needs to be fixed.
The warning appears when I open the DevTools Toolbox and select the Network panel.

Warning: Failed prop type: The prop member is marked as required in HeadersPanel, but its value is undefined.

This source location might help:
TabboxPanel resource://devtools/client/netmonitor/src/components/TabboxPanel.js:72

Honza

Mentor: odvarko
Keywords: good-first-bug
Priority: -- → P3
Whiteboard: good-first-bug

I would like to take a look at this bug if it's ok

(In reply to Jan Honza Odvarko [:Honza] (always need-info? me) from comment #0)

I am seeing the following warning in the Browser console that needs to be fixed.
The warning appears when I open the DevTools Toolbox and select the Network panel.

Warning: Failed prop type: The prop member is marked as required in HeadersPanel, but its value is undefined.

This source location might help:
TabboxPanel resource://devtools/client/netmonitor/src/components/TabboxPanel.js:72

Honza

I found the file and the function mentioned but I'm wasn't able to reproduce this error.

I suppose that adding member to the arg of this function would solve the problem, but I can't test without reproduce the error.

HeadersPanel({ cloneSelectedRequest, connector, openLink, request, })

I opened my devtools toolbox and selected the network panel but the warning wasn't there on the console. Can you help me?

Flags: needinfo?(odvarko)

Hi Jan,

I was able to reproduce the same bug when I was working on Bug 1401918 (https://bugzilla.mozilla.org/show_bug.cgi?id=1401918 ) and their is also another bug in

https://searchfox.org/mozilla-central/source/devtools/client/webconsole/components/FilterBar.js#31

filterBarVisible is set to be required but its value is undefined. As this prop is getting its value from

https://searchfox.org/mozilla-central/source/devtools/client/webconsole/reducers/ui.js#24

and filterBarVisible is not defined their.
Do I open a new bug for this?

I would to like to work on this bugs.

thanks
Aaditya

(In reply to Lucas Neiva from comment #1)

I would like to take a look at this bug if it's ok

Sure, assigned to you, thanks for the help!

Honza

Assignee: nobody → lucasneiva07
Status: NEW → ASSIGNED
Flags: needinfo?(odvarko)

(In reply to Aaditya Arora from comment #3)

I was able to reproduce the same bug when I was working on Bug 1401918 (https://bugzilla.mozilla.org/show_bug.cgi?id=1401918 ) and their is also another bug in

https://searchfox.org/mozilla-central/source/devtools/client/webconsole/components/FilterBar.js#31

Ah great, can you please help Lucas and provide the right steps-to-reproduce (STR), thanks!

filterBarVisible is set to be required but its value is undefined. As this prop is getting its value from

https://searchfox.org/mozilla-central/source/devtools/client/webconsole/reducers/ui.js#24

and filterBarVisible is not defined their.
Do I open a new bug for this?

I believe that this has been already reported as bug 1529225

But, thanks for the note!

Hi Lucas,

I think this might be helpful,

Steps to reproduce :

  1. Go to https://nchevobbe.github.io/demo/console-test-app.html
  2. Open the console
  3. Ensure the "XHR" filter is on
  4. In the content page, click the "XHR" button (this will make an ajax call to github)
  5. Expand the console message

Now, if you see in the developer's console you would see this warning related to prop 'member'.

I think this warning is due to some latest push to the branch So, if you don't see the warning using this, pull the branch and test again.

Hi Aaditya,

So, I followed your steps, but I wasn't able to reproduce the warning.

I even pulled the most recently branch, but didn't work. I may have did something wrong, but I can't find my mistake.

here's a snap of the network panel + console when I click on the XHR button some times.

link to image!

Sorry, I'm new here, but I really want to contribute and fix this bug.

I appreciate the help and I'll wait for the response.

(In reply to Lucas Neiva from comment #7)

here's a snap of the network panel + console when I click on the XHR button some times.
link to image!

By looking at the image, I think probably you are looking at the wrong location. You need to open developer tool window for inspecting developer tool. See this topic Enable remote debugging and the Browser Toolbox here https://docs.firefox-dev.tools/getting-started/development-profiles.html

After setting it up press : ctrl + alt + shift + I , It will open a new developer's tool window where you can inspect developer's tool and can see this warning on that toolbar's console.

Sorry, I'm new here, but I really want to contribute and fix this bug.

Yaa.. I can understand. Initially, It takes time to get started and to understand the working environment. I am also a newcomer.

Hi,

Sorry but I couldn't reproduce the error yet. I'm read the guide that you linked and fallowed the steps but still wasn't able to do it.

I used the command ctrl + alt + shift + I and here is the snap that I taked.

(https://i.paste.pics/35f438601ee7a768e53034f519c22963.png)

I may have configure something wrong, so here is the settings of the devtool and the mozconfig file

(https://i.paste.pics/ec9cd0a7ebc26065d215063e13291a55.png)

Sorry again, I'm trying but how you said, It takes time to understand everything that is going on.

(In reply to Lucas Neiva from comment #9)

Hi Neiva,

(https://i.paste.pics/35f438601ee7a768e53034f519c22963.png)

Let's understand what the developer's tool window is capable of. It is capable of inspecting the developers tool.
Means when You open developer tool in browser using ctrl + shift + c and then using the developer tool window created by Ctrl + Shift + Alt + I you can inspect the developer tool created by ctrl + shift + c.

So, Try the process in comment #6 in the in-browser developer tool created by ctrl + shift + c and look for the warning message in (Console) developer tool window created by Ctrl + Shift + Alt + I.

See the member warning in the console in this screenshot
https://i.paste.pics/4UUTQ.png

(https://i.paste.pics/ec9cd0a7ebc26065d215063e13291a55.png)

The config looks good to me.

@honza, please correct me if I have assumed something wrong.

thanks

Flags: needinfo?(odvarko)

Thanks! I could reproduce the warning now!

I couldn't thank you enough! I will work on the bug now, if I have a question I'll comment here.

(In reply to Aaditya Arora from comment #10)

@honza, please correct me if I have assumed something wrong.

Thanks for helping out (helping others counts!)

Honza

Flags: needinfo?(odvarko)

Hi everyone,

So, I found that the problem were on HeadersPanel resource://devtools/client/netmonitor/src/components/HeadersPanel.js:71

the PropType of the member was member: PropTypes.object.isRequired and running a few console.log on the render of the class (HeadersPanel), I found that the component HeadersPanel is mounted before the prop member is passed to the components that uses them.

So, the simple solution is remove isRequired of the PropType.

member is the data that's used to fill in the rows of the header on the network panel. So, from my understand, when the member is undefined, there's no row at all to mount, so it's no needed.

When I removed the isRequired from the PropType the warning didn't appears anymore.

I'm testing now, as the starting guide tells to do.

Is there something more that I missed? any feedback will be welcome!

Hi Honza,

In this case, Do I need to write a test to confirm that everything is ok?

I run some tests, mochitest and the ESlint, both passed without problems.

The next step is to send to code review?

Sorry for a lot of questions, it's my first bug

Thanks!

Flags: needinfo?(odvarko)

Thanks for the update!

Next step is attaching a patch with your changes, so I can review it.
We don't need a test for this.

You can attach a simple diff file directly to this bug or (preferred) you can upload the patch to Phabricator - the system we use for code reviews.

You can read docs here:
https://wiki.mozilla.org/Phabricator

Honza

Flags: needinfo?(odvarko)

Before this change, member was considered a required Prop on the file
HeadersPanel.js. The component itself wasn't using this prop, it was only passing to the
renderValue as a prop, and then renderValue uses member to render the data. So, the simpler
solution is remove isRequired from the PropTypes.

Pushed by jodvarko@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/ad6491a32481
HeadersPanel: unecessary isRequired on PropTypes r=Honza

https://hg.mozilla.org/mozilla-central/rev/ad6491a32481

Status: ASSIGNED → RESOLVED
Closed: 2 years ago
status-firefox67: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 67
Whiteboard: good-first-bug → good-first-bug[good first verify]
You need to log in before you can comment on or make changes to this bug.