1514537 - Developer Tools - fetch POST requests not show in Network tab

Status: RESOLVED WONTFIX

(DevTools :: Netmonitor, defect, P3)

Description

[betsy.gamrat]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:65.0) Gecko/20100101 Firefox/65.0

Steps to reproduce:

Executed this code:

        return new Promise((resolve) => {
                fetch('/api/asset_statuses.json',
                        {'method': 'POST', 
                            'body': JSON.stringify(state.items),
                            'headers': 'Content-Type: application/json; charset=utf-8'})
                        .then(res => res.json())
                        .then(res => {
                            alert('ha');
                            console.log(res);
                            resolve();
                        })
            })

Was hoping to use the Network tab to look at the response, but the request is not displayed in the Network tab.

Quick test - paste this in the web console tab - 

new Promise((resolve) => { fetch('/api/asset_statuses.json', {'method': 'POST', 'body': {"i":"j"}, 'headers': 'Content-Type: application/json; charset=utf-8'}) .then(res => res.json()) .then(res => { alert('ha'); console.log(res); resolve(); }) })

Then paste this -

            var xhr = new XMLHttpRequest();
            xhr.open("POST", '/api/asset_statuses.json', true);

            //Send the proper header information along with the request
            xhr.setRequestHeader("Content-Type", "application/json");

            xhr.onreadystatechange = function () { // Call a function when the state changes.
                if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
                    // Request finished. Do processing here.
                }
            }
            xhr.send('{"i":"j"}');

Firefox Developer Edition - 65.0b4 (64-bit) - Ubuntu 18.04
Also occurs with Firefox 64.0 (64-bit)


Actual results:

Nothing65.0b4 (64-bit)


Expected results:

I was expecting to see the request and response in the Network tab of the Developer Tools

Comment 1

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to betsy.gamrat from comment #0)

Executed this code:

    return new Promise((resolve) => {
            fetch('/api/asset_statuses.json',
                    {'method': 'POST', 
                        'body': JSON.stringify(state.items),
                        'headers': 'Content-Type: application/json;

charset=utf-8'})
.then(res => res.json())
.then(res => {
alert('ha');
console.log(res);
resolve();
})
})

Quick test - paste this in the web console tab -

new Promise((resolve) => { fetch('/api/asset_statuses.json', {'method':
'POST', 'body': {"i":"j"}, 'headers': 'Content-Type: application/json;
charset=utf-8'}) .then(res => res.json()) .then(res => { alert('ha');
console.log(res); resolve(); }) })

I am getting an error when executing these examples:
TypeError: 'headers' member of RequestInit could not be converted to any of: Headers, ByteStringSequenceSequence, ByteStringByteStringRecord.

That error blocks the XHR from actual excution.

Do you see that?
Is this the issue?

Honza

Comment 2

[betsy.gamrat]

Attachment: console-tab.png

Console tab entry and result - Firefox Developer Edition ("Mozilla/5.0 (X11; Linux x86_64; rv:65.0) Gecko/20100101 Firefox/65.0")

Same results occur with Firefox Quantum ("Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:64.0) Gecko/20100101 Firefox/64.0")

Comment 3

[betsy.gamrat]

Attachment: network-tab.png

Network tab display (same for both Firefox Quantum and Firefox Developer Edition)

Comment 4

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: image.png

I did fix the way how headers how passed into fetch (it should be an object not string in 66) and I a now able to execute it.

My Example looks as follows:

new Promise((resolve) => {
  fetch("/api/asset_statuses.json", {
    method: "POST", 
    body: {"i": "j"},
    headers: {
      "Content-Type": "application/json;"
    },
  }).then(res => {
    alert("ha");
    console.log(res);
    resolve();
  });
})

I can see the request in the Console (see the screenshot) as well as in the Network monitor panel.

Can you try my version on your machine?
Does it work for you?

Honza

Comment 5

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Note that in order to see the XHR requests in the Console you need to check the XHR filter
Honza

Comment 6

[betsy.gamrat]

Attachment: network tab 2.png

Request is shown but Params not readable

Comment 7

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Thanks for the update, I can see the problem now!

New STR:

1. Open DevTools Toolbox on any page (e.g. google.com)
2. Select the Network panel (so the monitoring is activated) and consequently go to the Console panel
3. Execute the following script in the Console panel:

new Promise((resolve) => {
  fetch("/api/asset_statuses.json", {
    method: "POST", 
    body: {"i": "j"},
    headers: {
      "Content-Type": "application/json;"
    },
  }).then(res => {
    alert("ha");
    console.log(res);
    resolve();
  });
})

3. Go the Network panel and click on the request
4. Check out the Params tab. It shows [object Object] instead of posted JSON -> BUG

See this screenshot: https://bugzilla.mozilla.org/attachment.cgi?id=9037709

Honza

Comment 8

[Jan Honza Odvarko [:Honza] (always need-info? me)]

A link for anyone interested in fixing this bug:

This is the place where the Param side panel is rendered and the bug could be somewhere around:
https://searchfox.org/mozilla-central/rev/c035ee7d3a5cd6913e7143e1bce549ffb4a566ff/devtools/client/netmonitor/src/components/ParamsPanel.js#132

Honza

Comment 9

[Sakshaat Choyikandi]

Hi Jan, I am new to contributing to Mozilla's codebase. Would it be okay if I give this bug a shot?

Comment 10

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Sure, thanks!
Honza

Comment 11

[Hengyeow (:tanhengyeow)]

Hi Sakshaat

Are you still working on this? Do you require assistance? :)

Comment 12

[Hengyeow (:tanhengyeow)]

Hi Honza

So I read up on the proper syntax use fetch to POST JSON data here.

The correct syntax should then be (the only change is that we JSON.stringify the object to pass in the body):

new Promise((resolve) => {
  fetch("/api/asset_statuses.json", {
    method: "POST", 
    body: JSON.stringify({"i": "j"}),
    headers: {
      "Content-Type": "application/json;"
    },
  }).then(res => {
    alert("ha");
    console.log(res);
    resolve();
  });
})

Is this still a valid bug then? Or should we display a message saying something like "Params cannot be parsed" in the Params Panel?

Comment 13

[Hengyeow (:tanhengyeow)]

Official documentation on proper syntax here:

body: Any body that you want to add to your request: this can be a Blob, BufferSource, FormData, URLSearchParams, or USVString object. Note that a request using the GET or HEAD method cannot have a body.

Comment 14

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to Heng Yeow (:tanhengyeow) from comment #12)

Is this still a valid bug then? Or should we display a message saying something like "Params cannot be parsed" in the Params Panel?

Good point. I think we can close (I also checked with Chrome DevTools and it works the same way)

Thanks!
Honza

Comment 15

[Sakshaat Choyikandi]

Sorry about that, I couldn't get to it early enough, but it seems to be resolved so that's great.