Does developer tools network tab show all network traffic for a Dash app?

Dash Python
1

Hoping I can ask this as a general question initially - I can probably put together an example showing what I mean if needed:

I’ve seen instances where the the devel tools network tab (in either Firefox or Chrome) shows much less network traffic than I’d expected. For example I’ve got a callback that uses a 500KB dcc.Store as a State, but when it’s triggered the Network tab only reports a few hundred bytes of traffic.

Does anyone know why the 500K transfer isn’t being reported (or maybe isn’t happening?)

I’m using DMC 0.14, so React 18.2.0, and Dash 2.17.1

2

Hello @davidharris,

It should be the whole thing, is the transfer on the backend not showing all of the data?

All traffic should be there.

3

Hi, thanks for the response. Not sure what you mean by ‘transfer on the backend’.

Here’s a simple working example, using dcc:

import random
from dash import Dash, dcc, Input, Output, State, html
import plotly.express as px

df = px.data.gapminder()
app = Dash(__name__)
app.layout = html.Div(
    children=
    [
        html.Button(children="Upload", id="button-upload"),
        dcc.Store(id="store-data", storage_type="session"),
        html.Button(children="Get random item", id="button-get"),
        html.Div(children="Not selected", id="random-item"),
    ]
)

@app.callback(
    Output("store-data","data"),
    Input("button-upload","n_clicks"),
)
def init_store(_):
    return df.to_dict(orient="records")

@app.callback(
    Output("random-item","children"),
    Input("button-get","n_clicks"),
    State("store-data", "data"),
    prevent_initial_call=True
)
def get_random_item(_, store_data):
    return str(random.choice(store_data))

if __name__ == '__main__':
    app.run(host="0.0.0.0", port=8050)

… and here’s what I see in (Chrome) developer tools. The first row shown corresponds to a click of ‘Upload’ showing 247kB transferred to the store, the second and third to clicks of ‘Get random item’. These show under 400 bytes transferred, even though the callback triggered here has the 247kB store as a State.

image
image1304×593 55 KB

4

I suspect that it might be associated to gzip?

Look at the actual response from the server and see if there is compression in the response.

5

Thanks, I think I get it now - I’ve basically been misunderstanding what the Network tab does and doesn’t show.

I’m only expecting a small response from the server, but much more data has to be transferred to the server to be used as inputs to the callback.

This data (the 247kB in the example) is all bundled up into the fetch request, and the size of the fetch request isn’t shown in the network tab.

So I’m feeling the Network tab isn’t really showing all the network traffic - it doesn’t show the size of the request, and in a Dash app the request could be very large, and could be most of the actual network traffic.

6

The network tab should house the size of the response from the server, you are looking for the size of the request.

To see this, you can look at the content-length of the request:

image

1 Like
7

Thanks, I was expecting it would be there somewhere.

But still quite surprised that, if you just look at the ‘Network’ tab, it can give a completely misleading indication of what the network traffic actually is (and it’s really quite a pain to go looking at the details of each request separately to get accurate figures).

1 Like