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.

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;
}