Marker.io's Network Requests Recorder is part of our Developer Tools, designed to help you fix bugs faster. It automatically captures a detailed log of all network activity, so your developers can see exactly what was happening when a bug occurred.
How it works
The process is simple and fully automated:
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.
Access in integrations: 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. This filtering happens on the client-side, meaning sensitive data never reaches Marker.io's servers.
Supported features
Here’s a quick overview of what the recorder can and cannot capture right now.
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.
Troubleshooting
If some API calls (especially GraphQL queries) are missing from the logs, it may be because Marker.io groups identical, repetitive requests.
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.
FAQs
Does the Network Recorder affect website performance?
Does the Network Recorder affect website performance?
No, it doesn't. The Marker.io script runs entirely in the background and shouldn’t impact your website’s performance. See here for more details.
How do I enable or disable the recorder?
How do I enable or disable the 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?
Does it record sensitive information?
By default, it can, but you have full control. In your Developer Tools settings, you can exclude any sensitive keys from being recorded. This filtering happens client-side in the user's browser, so sensitive data is never transmitted to our servers.