# Network

### Getting Started

To allow our Luciq [App Performance Monitoring](https://www.luciq.ai/product/app-performance-monitoring) to monitor your network requests, you will need to follow these steps.

### GraphQL Support

Luciq officially supports capturing and aggregating [GraphQL](https://graphql.org/) requests made using [Apollo](https://www.apollographql.com/).

In order to enable this, follow the network monitoring steps mentioned in the [getting started](broken://pages/9bceaac1cd7109d3d39bcd17b9932f249547c7ee#section-getting-started) section.

The below sample code snippet should be added after Luciq is initialized in order for the SDK to be able to track GraphQL requests made using Apollo.

JavaScript

{% code title="apollo-setup.js" %}

```javascript
import { ApolloClient, HttpLink, ApolloLink, InMemoryCache, from } from 'apollo-boost';
import { NetworkLogger } from '@luciq/react-native';

//Setting up the handler
const LCQApolloLink = new ApolloLink(NetworkLogger.apolloLinkRequestHandler);

//Sample code
const httpLink = new HttpLink({ uri: 'https://example.com/api' });
const client = new ApolloClient({  cache: new InMemoryCache(),  link: from([LCQApolloLink, httpLink])});
```

{% endcode %}

{% hint style="info" %}
If you're currently using a client other than Apollo, please feel free to reach out to our support team to verify support and add it to our backlog.
{% endhint %}

### Payload Size

By default, Luciq captures the payload size of the request and response; this should help with determining if the payload size could be causing any issues with network delays. The payload size is the size of the payload itself, so it does not include the header's size.

Luciq automatically buckets payload sizes into different buckets based on the distribution of the data per network group, with a minimum sensitivity of 10 bytes per bucket.

### URL Patterns

URL patterns are used to group the relevant network call occurrences and aggregate their numbers. Let's take the following examples:

* `sample.com/list/3/item/1`
* `sample.com/list/3/item/2`
* `sample.com/profile/`

It looks like 1 and 2 are the same request, but asking for different resources. While 3 is an entirely different one. Those three examples result in the following 2 URL patterns:

* `sample.com/list/*/item/*`
* `sample.com/profile/`

#### What Are the URL Pattern Components?

* Plain text: works with exact string matching
* `*`: matches with any URL part. `*` matches with only one part at a time. For example if you are mapping `sample.com/part/variable1/variable2`, your pattern should be `sample.com/part/*/*` and **not** `sample.com/part/*`

#### Does Luciq Detect Patterns Automatically?

Luciq automatically detects numbers and hexadecimal tokens in your URLs and replaces them with `*`.

#### Can You Create Custom Patterns?

If you are using more complex URLs where variable parts may contain plain text and not only numbers and hexadecimal, we recommend defining your custom patterns. Just click on the **"Create URL pattern"** button in your network list.

![2880](/files/ec5c7591a249219f0d1d9c267a6db470fdcb462b)

Click on the highlighted action to create new URL patterns. URL patterns are used to group relevant network calls.

Here are a few examples:

| URL pattern example          | Matches with                         | Doesn't match with                                                        |
| ---------------------------- | ------------------------------------ | ------------------------------------------------------------------------- |
| `sample.com/part1/part2`     | `sample.com/part1/part2`             | `sample.com/part1`                                                        |
| `sample.com/part1/*`         | `sample.com/part1/part2`             | `sample.com/part1/part2/part3`                                            |
| `sample.com/part1/*/part3`   | `sample.com/part1/part2/part3`       | `sample.com/part1/part3/part4` `sample.com/part1/part2/part3/part4`       |
| `sample.com/part1/*/*/part4` | `sample.com/part1/part2/part3/part4` | `sample.com/part1/part2/part4` `sample.com/part1/part2/part3/part4/part5` |
| `sample.com/part1/*/*/*`     | `sample.com/part1/part2/part3/part4` | `sample.com/part1/part2/part3/part4/part5` `sample.com/part1/part2/part3` |

Some notes to consider while creating your URL patterns:

* Custom URL patterns that you define have higher precedence than the auto-generated ones. If the same call matches with a custom and an auto pattern, it gets grouped with the custom.
* At any point, you can delete a pattern to prevent grouping new calls with it.
* URL patterns shouldn't overlap. Each incoming network call gets grouped with only one pattern. In case of conflict, it gets merged with the newest pattern.

{% hint style="info" %}
Creating or deleting patterns doesn’t affect your old data that has already been grouped. It only affects the upcoming network requests.
{% endhint %}

### Disabling/Enabling Network Performance Monitoring

**iOS**

When APM is enabled in your account, network monitoring works out of the box. If needed, you can disable it on iOS by calling the following API after initializing the SDK.

JavaScript

{% code title="apm-ios-toggle.js" %}

```javascript
// Enable
APM.setNetworkEnabledIOS(true)

// Disable
APM.setNetworkEnabledIOS(false)
```

{% endcode %}

{% hint style="warning" %}
Please note that disabling network monitoring in APM **on iOS** will disable [Network Logs](broken://pages/44fe7c5a194377c560b0975de61e0f2dc31e5742#network-logs) in Bug Reporting and Crash Reporting as well.
{% endhint %}

**Android**

When APM is enabled in your account, network monitoring works out of the box. If needed, you can disable it on Android via the relevant flag in Luciq's Gradle plugin [as described here](broken://pages/3d3fcb6c968375004ccc8cf93b5e87efd6e5e9a7#disablingenabling-network-performance-monitoring).

{% hint style="info" %}
Please note that, unlike iOS, disabling network monitoring in APM **on Android** will **not** disable [Network Logs](broken://pages/44fe7c5a194377c560b0975de61e0f2dc31e5742#network-logs) in Bug Reporting and Crash Reporting.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.luciq.ai/react-native/setup-luciq-for-react-native/setup-application-performance-monitoring/network.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.