How can I view network traffic?

[MattStayner]

Is it possible to view network traffic in AppStudio? I am running into an issue. I have a POST running in Postman. When I try to do the same thing in my .qml file, I get:

errorText:Error transferring https://myserver/someendpoint - server replied: Internal Server Error
errorCode:401‍‍‍‍

The errorText and errorCode don't seem to match. 401 should be unauthorized not Internal Server Error.

If this happened while I was developing a web app, I would just look at the network tab in the Chrome dev console to see exactly what was sent, and what the response was. Is there an equivalent with AppStudio? If not, is there a way to see more information about what the request? For example, I would like to see the payload and headers.

Thanks!

Matt

[ErwinSoekianto · Accepted solution]

Matt, 

We should be able to use any web debugging proxy application installed on your machine while running the app in the AppRun. 

For example on my mac, I can run the app in the AppRun, and have Charles running, and then we can see all the network traffics that go out with all the details. I think it is the same as Fiddler for a Windows machine. 

Thank you,

Erwin

[MattStayner]

Hi Erwin,

Perfect! Fiddler worked great for me. It turned out the Content-Type in the header was incorrect. 

I have 2 quick follow-up questions:

1. What is the preferred method for setting the Content-Type header? Below is what I initially tried, but it didn't change the header.

    NetworkRequest {
        id: req
        url: "https://somedomain/someEndpoint"
        method: "POST"
        responseType: "json"

        onReadyStateChanged: {
            console.log("readyState: ", readyState);
            if (readyState !== 4) return;
            if (status !== 200) return;
            console.log("Response Received!");
        }

        onError: {
            console.log("********************** Request Failed >")
            console.log("errorText:" + errorText)
            console.log("errorCode:" + errorCode)
        }

        function sendRequest(portalToken) {
            var payload = {
                "access_token": portalToken,
                "portal_url": "https://www.arcgis.com"
            };
            headers.value('Content-Type', 'application/json');
            send(JSON.stringify(payload, undefined, 2));
        }
    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I ended up setting the header outside of the NetworkRequest, like this:

req.headers["Content-Type"] = "application/json";
req.sendRequest(securedPortal.credential.token);‍‍

That strikes me as odd. Is there a way to set the headers inside of the NetworkRequest?

2. I was watching this great free Udemy course on Qt and QML, and he used HttpRequest directly. That approach seems more intuitive to me. I tried using it in Qt Creator, and it wasn't recognized. Is it possible to use HttpRequest with AppStudio?

Thanks,

Matt

[ErwinSoekianto]

Matt,

Oh, the Content-Type. I am glad it worked out for you. See this doc, Work with networking services—AppStudio for ArcGIS | Documentation 

1. You should be able to do it inside the NetworkRequest. 

NetworkRequest {
   ...
  
         Component.onCompleted: {
            req.headers["Content-Type"] = "application/json";
        }

   ...
}

2. I don't have access to the Udemy, but I think that's a javascript function, correct? You can use XMLHttpRequest by Javascript in AppStudio, XMLHttpRequest - Web APIs | MDN , which is pretty much the same.

Thank you,

Erwin

[MattStayner]

Erwin,

1. That worked great for me. I also a way to set it in my sendRequest function (see below).

    NetworkRequest {
        id: req
        url: "https://somedomain/someEndpoint"
        method: "POST"
        responseType: "json"

        onReadyStateChanged: {
            console.log("readyState: ", readyState);
            if (readyState !== 4) return;
            if (status !== 200) return;
            console.log("Response Received!");
        }

        onError: {
            console.log("********************** Request Failed >")
            console.log("errorText:" + errorText)
            console.log("errorCode:" + errorCode)
        }

        function sendRequest(portalToken) {
            var payload = {
                "access_token": portalToken,
                "portal_url": "https://www.arcgis.com"
            };
            headers.json = {
                "Content-Type": "application/json"
            };
            send(JSON.stringify(payload, undefined, 2));
        }
    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

2. It turns out in the Udemy course they were using a custom library. I'm sure the just built something on top of XMLHttpRequest. For anyone else who is interested in using a promise-based approach, I ended up using this post as a guide to create my own custom network request function. It turned out great.

Thanks again!

Matt