nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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<SPAN class="punctuation token">:</SPAN>Error transferring https<SPAN class="punctuation token">:</SPAN><SPAN class="operator token">/</SPAN><SPAN class="operator token">/</SPAN>myserver<SPAN class="operator token">/</SPAN>someendpoint <SPAN class="operator token">-</SPAN> server replied<SPAN class="punctuation token">:</SPAN> Internal Server Error
errorCode<SPAN class="punctuation token">:</SPAN><SPAN class="number token">401</SPAN>‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

Najděte více příspěvků označených jako

Accepted answers

ErwinSoekianto

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

All comments

MattStayner

Erwin,

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

    NetworkRequest <SPAN class="punctuation token">{</SPAN>
        id<SPAN class="punctuation token">:</SPAN> req
        url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://somedomain/someEndpoint"</SPAN>
        method<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"POST"</SPAN>
        responseType<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"json"</SPAN>

        onReadyStateChanged<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
            console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"readyState: "</SPAN><SPAN class="punctuation token">,</SPAN> readyState<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>readyState <SPAN class="operator token">!==</SPAN> <SPAN class="number token">4</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="keyword token">return</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>status <SPAN class="operator token">!==</SPAN> <SPAN class="number token">200</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="keyword token">return</SPAN><SPAN class="punctuation token">;</SPAN>
            console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Response Received!"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>

        onError<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
            console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"********************** Request Failed >"</SPAN><SPAN class="punctuation token">)</SPAN>
            console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"errorText:"</SPAN> <SPAN class="operator token">+</SPAN> errorText<SPAN class="punctuation token">)</SPAN>
            console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"errorCode:"</SPAN> <SPAN class="operator token">+</SPAN> errorCode<SPAN class="punctuation token">)</SPAN>
        <SPAN class="punctuation token">}</SPAN>

        <SPAN class="keyword token">function</SPAN> <SPAN class="token function">sendRequest</SPAN><SPAN class="punctuation token">(</SPAN>portalToken<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">var</SPAN> payload <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="string token">"access_token"</SPAN><SPAN class="punctuation token">:</SPAN> portalToken<SPAN class="punctuation token">,</SPAN>
                <SPAN class="string token">"portal_url"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://www.arcgis.com"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
            headers<SPAN class="punctuation token">.</SPAN>json <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="string token">"Content-Type"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"application/json"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="token function">send</SPAN><SPAN class="punctuation token">(</SPAN>JSON<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stringify</SPAN><SPAN class="punctuation token">(</SPAN>payload<SPAN class="punctuation token">,</SPAN> undefined<SPAN class="punctuation token">,</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>
    <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

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.

<CODE>&nbsp;&nbsp;         Component.onCompleted: {NetworkRequest <SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">{
&nbsp;&nbsp;&nbsp;...
</SPAN>

            req.headers["Content-Type"] = "application/json";

<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;"><BR />   ...<BR />}</SPAN>

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

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 <SPAN class="punctuation token">{</SPAN>
        id<SPAN class="punctuation token">:</SPAN> req
        url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://somedomain/someEndpoint"</SPAN>
        method<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"POST"</SPAN>
        responseType<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"json"</SPAN>

        onReadyStateChanged<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
            console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"readyState: "</SPAN><SPAN class="punctuation token">,</SPAN> readyState<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>readyState <SPAN class="operator token">!==</SPAN> <SPAN class="number token">4</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="keyword token">return</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>status <SPAN class="operator token">!==</SPAN> <SPAN class="number token">200</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="keyword token">return</SPAN><SPAN class="punctuation token">;</SPAN>
            console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Response Received!"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>

        onError<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
            console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"********************** Request Failed >"</SPAN><SPAN class="punctuation token">)</SPAN>
            console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"errorText:"</SPAN> <SPAN class="operator token">+</SPAN> errorText<SPAN class="punctuation token">)</SPAN>
            console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"errorCode:"</SPAN> <SPAN class="operator token">+</SPAN> errorCode<SPAN class="punctuation token">)</SPAN>
        <SPAN class="punctuation token">}</SPAN>

        <SPAN class="keyword token">function</SPAN> <SPAN class="token function">sendRequest</SPAN><SPAN class="punctuation token">(</SPAN>portalToken<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">var</SPAN> payload <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="string token">"access_token"</SPAN><SPAN class="punctuation token">:</SPAN> portalToken<SPAN class="punctuation token">,</SPAN>
                <SPAN class="string token">"portal_url"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://www.arcgis.com"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
            headers<SPAN class="punctuation token">.</SPAN><SPAN class="token function">value</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'Content-Type'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'application/json'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="token function">send</SPAN><SPAN class="punctuation token">(</SPAN>JSON<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stringify</SPAN><SPAN class="punctuation token">(</SPAN>payload<SPAN class="punctuation token">,</SPAN> undefined<SPAN class="punctuation token">,</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>
    <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

req<SPAN class="punctuation token">.</SPAN>headers<SPAN class="punctuation token">[</SPAN><SPAN class="string token">"Content-Type"</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">=</SPAN> <SPAN class="string token">"application/json"</SPAN><SPAN class="punctuation token">;</SPAN>
req<SPAN class="punctuation token">.</SPAN><SPAN class="token function">sendRequest</SPAN><SPAN class="punctuation token">(</SPAN>securedPortal<SPAN class="punctuation token">.</SPAN>credential<SPAN class="punctuation token">.</SPAN>token<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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,

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

Thank you,

Erwin

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.