alexbrazier/react-native-network-logger

An HTTP network request monitor for React Native with in-app interface for iOS and Android with no native code

react-native-network-logger's Issues

is it possible to show console.log ?

Feature Request

i want to see console log in release build, is it possible to show console log like Vconsole ?

Add option to ignore host

Feature Request
Add an option to ignore logs from certain hosts

Having a small problem importing package

When I try importing your package into my currently existing react-native project I get a problem from the package saying in the import part there is a syntax error with an unexpected token. All I did was yarn add react-native-network-logger then tried running my project again. Thank you for any help! I have attached an image of the error message.

Close button content overlap

Hi, excellent job!

Just one small UI thing noticed:
Close button is overlap with request url.
I think having close button in same header row as more would be better.

Error: Text strings must be rendered within a <Text> component.

When tapping on a specific request in the list view I am unable to view the details. I receive the following error message:

Error: Text strings must be rendered within a <Text> component.

This is in a fairly new app using RN 0.62.2

Looking at the code in Header.tsx it seems it's rendering children into a <Text> element. Not exactly sure what's in children but that seems to be where the error occurs.

Screenshots

Platform:

• iOS
• Android

Export all Logs

Feature Request

Having the ability to export the full list of logged request to a JSON file stored locally on the device.

I know the project right now doesn't have any dependencies (that's really nice), but the easiest and most practical way to do it would include using a package like react-native-fs.

Additional context

Functionality for SIP/Protocols other than HTTP

I've downloaded and used this package and I've verified that it works for HTTP requests but I'm curious as to whether this also captures network requests from other protocols like SIP?

Conflict with `reactotron-react-native` library

Hi! First of all, awesome work on this library, it is amazing.

Well, I open this issue using the "Other" template because I really don't know if the problem that I found has some workaround.

As you can see in the image below, at this point in code, the library checks if the interceptor is enabled or not, and if it is already enabled, the code just returns:

So after debugging, I just check that the reactotron-react-native library was enabling that by default, just by importing the library, and that was making the Logger skip the setup and because of that do not log any request.

What I did was remove the Reactotron and put it again manually just when I want to debug other things in my application.

So, I was wondering if there's any way to work around this conflict between these two libraries and make them work together.

Thanks!

is there a way of tracking request made by webviews?

Hey! I hope you are doing well!
This library only tracks requests that are made by the app, right? For example, if I develop a web with React and I render it in a webview in my RN app, am I able to see the requests made by that web page?

Configure max number of requests that get stored

Feature Request

Set a default max number of requests to be stored before removing old ones and add option to configure when starting the logger.

The response body is in the `Loading...` state

Describe the bug
The response body is in the Loading... state

Expected behavior
I should see the body response

Screenshots

Platform:

• iOS
• Android (not tested)

Additional context
react-native-network-logger: v1.14.0
react-native: v0.71.3

was working on the previous react-native version v0.69.5

Web support?

Feature Request

Web browsers have a network logger. The only thing that this library should do is "Nothing"!
When i use this library with react-native-web,i got this error:

Failed to compile.
/Users/xxx/xxx/xxx/node_modules/react-native/Libraries/Network/XMLHttpRequest.js
Module not found: Can't resolve './RCTNetworking' in '/Users/xxx/xxx/SellerCenterApp/node_modules/react-native/Libraries/Network'

I finally solve this error by DELETE all references of this library when i am building for the web.

Additional context

On the web platform, this library should do nothing, because the browsers have their logging already.

Response Body not rendering

Describe the bug

• When launching the network debug and clicking onto a request, it does not show the response body even though the request was successful.
• However, it does show a large chunk of space where the response would have been.

Expected behavior

• Should show the response body

Screenshots

Platform:

• iOS
• Android

Additional context

How difficult it is to log network request for images?

Add option to clear all requests from the log

Feature Request
It should be possible to clear all the requests on the monitor screen to make it easier to debug requests from a certain point.

Log mqtt request via websockets

Feature Request
It's possible to log mqtt requests (web sockets)
Thanks

stuck at pending state

I'm using Axios. Logs are stuck at pending state also it is only showing response and request headers not the body of the request.
In reactron I'm able to see logs properly

Does not work with Pinch

Describe the bug
Network Calls made by Pinch not showing the log.

Platform:

• [x ] iOS
• [x ] Android

Change sorting order

Feature Request
It should be possible to sort requests by most recent at the top or most recent at the bottom depending on the users preference.

Share as curl should extract form data

Feature Request
When making a request using FormData the data part of the curl request is empty. It should include the data as a form data object.

Add filters to let you filter by request method or status code

Feature Request
Filters should be added to the monitor page to filter by request method (POST, GET, PUT etc.) and by the response status code, e.g. to only show errors.

Save and share api requests

Feature Request

Add feature to export/copy api request information from the monitor screen so it can be sent to others via email or slack etc.

does this lib can get request network from other app?

as title, thanks

Not working on Axios

I am using Axios for network call and using router-flux for the navigation.
I have followed all the steps from README

import { startNetworkLogging } from 'react-native-network-logger';

startNetworkLogging();
AppRegistry.registerComponent(appName, () => App);

            <Scene
              key="networkLogger"
              component={() => <NetworkLogger theme={'dark'} />}
              back
              headerLayoutPreset="center"
              renderTitle={() => <PlainTitleBar />}
            />

      Actions.networkLogger({
        onBack: () => { Actions.pop() }
      });

But no request or response was shown. I have tested it using the simulator, also on a real devices with both debug and release variants. Is there any config that I missed? Thanks

Changed `ignoredHosts` to `ignoredPatterns`

Feature Request
I want to filter out the /ping calls from the server done by NetInfo but they're in the same host as my main server that I am trying to monitor.

If we say the request has the following text

HEAD https://trajano.net/ping

It would simplify us by having rules that look like

ignoredPatterns: [
  /^HEAD https:\/\/trajano.net\/ping$/
]

Additional context

Response types sometimes come back as blobs

The response type is sometimes returned as a blob, particularly if it is a large response.
Blobs should be loaded and returned in the reponse string.

Friendlier response body section

Feature Request
Make response body section more user friendly. Mobile screen is limited and let say the response is very big, then it could hurt UX when inspecting. We can collapse the JSON value like redux-devtools.

There is also react-native-json-tree which is based on react-json-tree used by redux-devtools.

Thanks!

Additional context

  const getFullRequest = () => {
    const processedRequest = {
      ...request,
      response: responseBody ? JSON.parse(responseBody) : undefined,
      duration: request.duration,
    };
    return JSON.stringify(processedRequest, null, 2);
  };

FormData in POST requests crash app

Describe the bug
If there is a request that contains FormData in the body, navigating to the details section of that request crashes the app.

Expected behavior
FormData should be parsed correctly and displayed to the user.

Screenshots

Platform:

• iOS
• Android

Additional context
I believe the issue lies in this method that's inside NetworkRequestInfo.ts:

  private stringifyFormat(data: string) {
    try {
      return JSON.stringify(JSON.parse(data), null, '\t');
    } catch (e) {
      return data;
    }
  }

JSON.parse throws an error, it's caught, then the FormData is passed onto <LargeText> as a child but since it's an object still, it crashes

Add a search box to filter requests

Feature Request
Add a search box to the monitor page so that requests can be filtered by URL

Network recording starts automatically?

Describe the bug

I noticed in the example app that startNetworkLogging never gets called. I traced this down to the useEffect hook to the UI component that starts it. So if at any time the UI component was rendered when it shouldn't be, then all network traffic in the session would be recorded.

react-native-network-logger/src/components/NetworkLogger.tsx

Line 44 in 4b3ab62

logger.enableXHRInterception();

Judging by the readme this is not expected.

Is this a Bug and should this line be deleted?

Expected behavior

Screenshots

Platform:

• iOS
• Android

Additional context

Single Request not showing as pending

Describe the bug

When only one request is made at a time, it does not show up a pending, and will only be added to the list after it completes.
If more then one API request is created at the same time, then the pending API request will show as pending.

Expected behavior

When only 1 API request is fired, then it should show up in the request list as pending. Once the request is completed the status number and time should be updated.

Screenshots

It was easier for me to post videos on my fork and screenshots

Working as expected: https://github.com/Spencer-Yoder/react-native-network-logger/blob/Git-issue/Two%20Request(Working%20as%20expected).mp4
Defect: https://github.com/Spencer-Yoder/react-native-network-logger/blob/Git-issue/Single%20Request(Defect).mp4

Platform:

• iOS - I have not tested on iOS
• Android - Tested on Emulator and Physical Device

Additional context

Checked out master at v1.7.0 and ran the example project
It is easy to recreate it for me, if there is a delay in the request. Using https://postman-echo.com/delay/5 worked for me.

Is there any way to perform this on a website by just using node.js ?

I want to log out all requests made by a website and interact with its data but without an app like this.