Skip to main content

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 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.
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.

​
Properties

Inherits all properties from BeagleLog, plus:
​
url
string
required
The full URL of the network request.
​
host
string
required
The hostname extracted from the URL (e.g., api.example.com).
​
request
NetworkingRequest
required
The request details including method, URL, headers, and body.
​
response
NetworkingResponse
Optional response details. Present when the request has completed.

​
Constructor

​
request
NetworkingRequest
required
The network request object containing URL, method, headers, and body.
​
response
NetworkingResponse
Optional response object. If provided, determines the log level based on status code.
​
id
string
Optional custom ID for the log entry.
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.
​
query
string
required
The search query to filter by.
Returns: boolean - true if the query matches the message or host (case-insensitive).

​
Type Definitions

​
NetworkingRequest

interface NetworkingRequest {
  url: string;
  method: string;
  headers?: NetworkingHeaders;
  body?: any;
}

​
NetworkingResponse

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

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)

// 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

// 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

// 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

class NetworkingLog extends BeagleLog {
  url: string;
  host: string;
  request: NetworkingRequest;
  response?: NetworkingResponse;

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

Build docs developers (and LLMs) love

Get started for freeTalk to us