Marker.io's Network Requests Recorder is a key part of our Developer Tools suite, designed to help developers easily understand, reproduce, and fix issues faster by providing detailed logs of all network requests that occurred during a session. This guide provides a comprehensive overview of how to use the Network Requests Recorder.
How it Works
Here’s a simple overview of how the Network Requests Recorder functions:
Report an Issue: A user reports a website issue using the Marker.io widget.
Log Network Requests: During the session, all network requests are automatically logged and transmitted.
Review the Logs: Team members can access these logs on the issue page, similar to viewing a browser’s developer tools.
Filter Requests: You can filter recorded logs based on the type of request to make finding specific details easier.
Integration Access: If your project is linked to an integration like Jira, you'll have a quick access link to directly view any failed requests associated with the issue.
Getting Started
Follow these steps to start using the Network Requests Recorder:
Embed the Widget: Add your widget’s snippet code to your website or web application. This is necessary for recording to work correctly.
Enable the Network Requests Recorder (Enabled by default):
Go to your project settings.
Find the Developer Tools menu under the widget settings.
Toggle the Network Requests Recorder to 'Enabled' to begin recording network requests.
Exclude Sensitive Data:
You can prevent sensitive data from being recorded by excluding specific values in headers and JSON bodies within your Developer Tools settings.
Supported & Not Yet Supported Network Request Types and Data
Understanding what Marker.io's Network Requests Recorder captures is crucial for effective debugging.
Currently Supported
Our recorder provides comprehensive logging for the following:
Network Request Types:
Fetch API Requests: Modern web requests made using the
fetch()API.XMLHttpRequest (XHR) Requests: Traditional AJAX requests.
Performance Resource Timing API: Data for other resources like images, scripts, and stylesheets, providing insight into their loading performance.
Recorded Data: For each supported request, the following detailed information is captured:
Request Method: (e.g., GET, POST, PUT, DELETE)
Request URL
Request Headers
Request Body
Response Status Code
Response Status Text
Response Headers
Response Body: Captured in multiple formats including JSON, plain text, blob, arrayBuffer, and formData.
Response Size
Timing Information: Includes start and end times, both absolute and relative to the session start.
Request Status: (e.g., pending, success, failed, unknown)
Error Tracking: Specific tracking for failed requests to aid in quick identification of issues.
Not Yet Supported
The following network communication types are not currently supported by the Network Requests Recorder:
WebSocket Connections: Real-time, persistent connections.
Server-Sent Events (SSE): One-way event streams from a server to a client.
WebRTC Data Channels: Peer-to-peer data transfer channels.
Service Worker Requests: Requests handled or intercepted by Service Workers.
Beacon API &
sendBeacon()Requests: Used for sending small amounts of data asynchronously without impacting page navigation.
Handling GraphQL Queries & Repetitive Requests
Important: Some GraphQL queries or API calls may not appear in the logs if Marker.io identifies them as identical, repeated requests without unique identifiers. For example, if your application sends the same endpoint request multiple times without differentiating parameters, those calls may be considered duplicates and filtered out.
How to Ensure All Requests Appear:
Append Unique Parameters: For GraphQL calls, consider appending unique query parameters to the endpoint (e.g.,
https://api.example.com/graphql?operation=GetUserData). Adding an operation name or any unique identifier to the URL ensures that each request is recognized as distinct and will be logged.Use Operation Names: If possible, include the GraphQL operation name in the request URL. This helps Marker.io differentiate one GraphQL call from another.
Viewing Multiple Fetches & Limitations
Currently, the Marker.io UI allows toggling visibility for a limited number of fetch requests at a time. If your application makes many simultaneous requests (e.g., dozens of GraphQL queries or API calls), you may need to:
Adjust Filters: Use the filters to quickly find the request type you need.
Unique Identifiers: Ensure each request is uniquely identifiable as noted above.
Frequently Asked Questions
Here are some common questions users have about the Network Requests Recorder:
Does the Network Requests Recorder slow down my website?
No, it doesn't. The Marker.io script runs entirely in the background and shouldn’t affect your website’s performance. See here for more details.
How do I enable or disable the Network Requests Recorder?
After embedding the Marker.io script on your site, navigate to any project under Widget > Developer Tools > Network Requests and toggle the setting to enable or disable the recorder.
Does it record sensitive information?
Yes, but you have control over what gets recorded. In your Developer Tools settings, you can exclude specific keys from all headers and JSON bodies to protect sensitive information.
Need Help?
If you have any questions, comments, or corrections, chat with us at the bottom right of our web pages.