> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/ailtonvivaz/react-native-beagle/llms.txt
> Use this file to discover all available pages before exploring further.

# NetworkingLog

> Log class for HTTP requests and responses in React Native Beagle

`NetworkingLog` extends `BeagleLog` to provide specialized handling for network requests and responses. It automatically tracks request details, response status, and sets appropriate log levels based on HTTP status codes.

<Warning>
  `NetworkingLog` is **not exported** from the public API. Network logging is handled automatically by the `BeagleProvider` component. This documentation is provided for reference to understand how network logs are structured.
</Warning>

## Properties

Inherits all properties from [`BeagleLog`](/api/beagle-log), plus:

<ResponseField name="url" type="string" required>
  The full URL of the network request.
</ResponseField>

<ResponseField name="host" type="string" required>
  The hostname extracted from the URL (e.g., `api.example.com`).
</ResponseField>

<ResponseField name="request" type="NetworkingRequest" required>
  The request details including method, URL, headers, and body.
</ResponseField>

<ResponseField name="response" type="NetworkingResponse">
  Optional response details. Present when the request has completed.
</ResponseField>

## Constructor

<ParamField path="request" type="NetworkingRequest" required>
  The network request object containing URL, method, headers, and body.
</ParamField>

<ParamField path="response" type="NetworkingResponse">
  Optional response object. If provided, determines the log level based on status code.
</ParamField>

<ParamField path="id" type="string">
  Optional custom ID for the log entry.
</ParamField>

**Behavior:**

* Extracts host and path from the request URL
* Sets message to `{METHOD} {path}` (e.g., `GET /api/users`)
* If response is provided:
  * Sets level to `'error'` for status >= 400 or kind === 'error'
  * Sets level to `'warning'` for status 300-399
  * Sets level to `'success'` for status \< 300
* If no response, sets level to `'loading'`

## Methods

### filter()

Overrides the base `filter()` method to search both message and host.

<ParamField path="query" type="string" required>
  The search query to filter by.
</ParamField>

**Returns:** `boolean` - `true` if the query matches the message or host (case-insensitive).

## Type Definitions

### NetworkingRequest

```typescript theme={null}
interface NetworkingRequest {
  url: string;
  method: string;
  headers?: NetworkingHeaders;
  body?: any;
}
```

### NetworkingResponse

```typescript theme={null}
type NetworkingResponse = NetworkingResponseData | NetworkingResponseError;

interface NetworkingResponseData {
  kind: 'data';
  status: number;
  headers: NetworkingHeaders;
  body: any;
  duration: number;
}

interface NetworkingResponseError {
  kind: 'error';
  status: number;
  error: string;
  duration: number;
}
```

### NetworkingHeaders

```typescript theme={null}
type NetworkingHeaders = Record<string, string>;
```

## How It's Used Automatically

When you enable the Networking plugin, React Native Beagle automatically intercepts network requests and creates `NetworkingLog` entries:

1. **Request starts**: A log is created with `'loading'` level
2. **Response received**: The log is updated with response data and appropriate level
3. **Error occurs**: The log level becomes `'error'`

You typically don't need to create `NetworkingLog` instances manually.

## Log Structure Examples

These examples show the structure of `NetworkingLog` instances as they appear in your Beagle inspector. Network logs are created automatically - you don't create them manually.

### Request in Progress (Loading)

```typescript theme={null}
// Structure of a pending network request log
{
  id: "abc123",
  time: Date,
  message: "GET /users",
  level: "loading",
  url: "https://api.example.com/users",
  host: "api.example.com",
  request: {
    url: "https://api.example.com/users",
    method: "GET",
    headers: { "Authorization": "Bearer token" }
  },
  response: undefined
}
```

### Successful Response

```typescript theme={null}
// Structure after successful response
{
  id: "abc123",
  time: Date,
  message: "POST /users",
  level: "success",
  url: "https://api.example.com/users",
  host: "api.example.com",
  request: {
    url: "https://api.example.com/users",
    method: "POST",
    body: { name: "John" }
  },
  response: {
    kind: "data",
    status: 201,
    headers: { "content-type": "application/json" },
    body: { id: 1, name: "John" },
    duration: 234
  }
}
```

### Error Response

```typescript theme={null}
// Structure for error response
{
  id: "abc123",
  time: Date,
  message: "GET /users/999",
  level: "error",
  url: "https://api.example.com/users/999",
  host: "api.example.com",
  request: {
    url: "https://api.example.com/users/999",
    method: "GET"
  },
  response: {
    kind: "error",
    status: 404,
    error: "User not found",
    duration: 123
  }
}
```

## Class Definition

```typescript theme={null}
class NetworkingLog extends BeagleLog {
  url: string;
  host: string;
  request: NetworkingRequest;
  response?: NetworkingResponse;

  constructor(
    request: NetworkingRequest,
    response?: NetworkingResponse,
    id?: string
  );
  
  filter(query: string): boolean;
}
```