Network Traffic Monitor

With Appetize, you can capture, inspect and troubleshoot all network traffic occurring during your app session for real-time or later analysis.

Note by default, a user needs to be authenticated to view network traffic using the built-in intercept proxy. See App Permissions for more information.

Capture Network Traffic

To allow Appetize to capture all network events, you need to set the proxy of the device to intercept.

With Query Parameter

Add the proxy query parameter to your app or embed URL with intercept as value.

&proxy=intercept

See Query Params Reference for more information.

With JavaScript SDK

Set proxy to intercept in the configuration e.g.

await client.config({
    proxy: "intercept",
    ...
})

See Configuration for more information.

Inspecting Network Traffic

With App Page

The app page provides a simple network log of all the events that took place. You can access this via your app's app link

https://appetize.io/app/{publicKey}?&proxy=intercept

or by going to your Apps page and clicking debug under the app you want to inspect.

Select "Debug" under your app

You can also open the network logs in Chrome DevTools if you are running the app in a Chrome Browser by selecting the Chrome DevTools button.

Alternatively you can download the HAR file and open it in your favorite Network Monitoring tool.

Network log tab with associated action buttons for downloading the HAR or opening in Chrome DevTools

With JavaScript SDK

You can listen for all network events via our JavaScript SDK. To easily view them in the browser you can print them to the console or you can store it to file for later analysis

session.on('network', (data) => {
    // intercepted network request
    if (data.type === 'request') {
        console.log(`[${data.request.method}]: ${data.request.url}`)
    } 
    
    // intercepted network response
    if (data.type === 'response') {
        console.log(data.response.postData)
    }
})

See our JavaScript API Reference for more information.

getNetworkInspectorUrl provides a direct URL for opening network logs in Chrome DevTools