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:
The full URL of the network request.
The hostname extracted from the URL (e.g., api.example.com).
request
NetworkingRequest
required
The request details including method, URL, headers, and body.
Optional response details. Present when the request has completed.
Constructor
request
NetworkingRequest
required
The network request object containing URL, method, headers, and body.
Optional response object. If provided, determines the log level based on status code.
Optional custom ID for the log entry.
- 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.
The search query to filter by.
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;
}
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:
- Request starts: A log is created with
'loading' level
- Response received: The log is updated with response data and appropriate level
- 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;
}