> ## Documentation Index
> Fetch the complete documentation index at: https://docs.spurtest.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Network & Console Monitoring

> Use Log steps to assert against network requests and console logs during test execution.

The Log step lets you validate what happens behind the scenes during a test run. Instead of checking what the user sees on screen (that's what [Verify](/authoring-tests/test-side-peek/step-types/verify) does), Log steps assert against **network requests** and **browser console output** — giving you visibility into API calls, error messages, and other under-the-hood behavior.

You describe what you expect in plain language, and the Spur agent intelligently searches through the captured data to verify your assertion. It returns the matching evidence — the endpoint, a data snippet, and timestamp — so you can see exactly what it found.

To learn how to add a Log step to your tests, see the [Log Step](/authoring-tests/test-side-peek/step-types/log/log-assertions) guide.

## Understanding the Result

When a Log step completes, Spur expands the result to show exactly how it verified your assertion. Here's what each part means:

<Frame caption="A passing Log step result with full verification details">
  <img src="https://mintcdn.com/spur/ouU-TQ6bqhYcyB2r/images/Log/3.png?fit=max&auto=format&n=ouU-TQ6bqhYcyB2r&q=85&s=6e33b65a14e3c5db6e449b96a4c36bc3" alt="" width="1226" height="1496" data-path="images/Log/3.png" />
</Frame>

* **Reasoning** — The agent restates your assertion to confirm what it set out to verify.
* **Verification Analysis** — The agent breaks your assertion into a **primary subject** (the request or event type to find) and a **qualifier** (the specific condition to check within it). This is how the agent decides where to look and what to look for.
* **What I Found** — A detailed breakdown of the matching evidence, including the endpoint, request method, status code, URL parameters, and any relevant payload data. This is the raw proof that supports the result.
* **Conclusion** — A plain-language summary of whether the assertion passed or failed and why.
* **Examined requests** — A clickable badge linking to the specific network request the agent inspected. Click it to jump directly to the full request details in the Network Logs panel.

## Use Cases

### Event & Analytics Tracking

Analytics, tracking pixels, and third-party event calls break silently — they don't affect the UI, so regressions go unnoticed. Log steps let you confirm these events fire correctly during key user flows.

<AccordionGroup>
  <Accordion title="Check tracking events">
    <Frame caption="Confirming a tracking event was sent to the expected endpoint">
      <img src="https://mintcdn.com/spur/ouU-TQ6bqhYcyB2r/images/Log/4.png?fit=max&auto=format&n=ouU-TQ6bqhYcyB2r&q=85&s=8ba724c0d141808231e149c83a959a4b" alt="" width="1274" height="144" data-path="images/Log/4.png" />
    </Frame>
  </Accordion>

  <Accordion title="Check external service calls">
    <Frame caption="Confirming an external service was called during test execution">
      <img src="https://mintcdn.com/spur/ouU-TQ6bqhYcyB2r/images/Log/5.png?fit=max&auto=format&n=ouU-TQ6bqhYcyB2r&q=85&s=4acbb9e249916f17695400bfb589963a" alt="" width="1284" height="210" data-path="images/Log/5.png" />
    </Frame>
  </Accordion>
</AccordionGroup>

### Validate API Status Codes & Responses

The UI might show a success message even when the backend returns an error or unexpected data. Log steps let you check the actual API responses your application receives.

<AccordionGroup>
  <Accordion title="Check status codes">
    <Frame caption="Confirming a specific API call returned the expected status code">
      <img src="https://mintcdn.com/spur/ouU-TQ6bqhYcyB2r/images/Log/6.png?fit=max&auto=format&n=ouU-TQ6bqhYcyB2r&q=85&s=6b0784529ef77ad6c2b8d59fefa1ae5d" alt="" width="1282" height="106" data-path="images/Log/6.png" />
    </Frame>
  </Accordion>

  <Accordion title="Check response body fields">
    <Frame caption="Validating specific fields in an API response body">
      <img src="https://mintcdn.com/spur/ouU-TQ6bqhYcyB2r/images/Log/7.png?fit=max&auto=format&n=ouU-TQ6bqhYcyB2r&q=85&s=340a66bc7ed2db5f6e5391f4b75d0f8f" alt="" width="1274" height="148" data-path="images/Log/7.png" />
    </Frame>
  </Accordion>

  <Accordion title="Detect server errors">
    <Frame caption="Catching server errors that the UI might gracefully hide">
      <img src="https://mintcdn.com/spur/ouU-TQ6bqhYcyB2r/images/Log/8.png?fit=max&auto=format&n=ouU-TQ6bqhYcyB2r&q=85&s=deb2b9b2fbdd7dfa91ca449413d9d393" alt="" width="1292" height="114" data-path="images/Log/8.png" />
    </Frame>
  </Accordion>
</AccordionGroup>

### Validate Request Payloads

Confirm that your application sends the correct data to the backend — not just that the form submitted successfully.

<AccordionGroup>
  <Accordion title="Check submitted data">
    <Frame caption="Confirming the correct data was sent in the request body">
      <img src="https://mintcdn.com/spur/ouU-TQ6bqhYcyB2r/images/Log/9.png?fit=max&auto=format&n=ouU-TQ6bqhYcyB2r&q=85&s=90a25456f97479474db028c2969f023c" alt="" width="1282" height="148" data-path="images/Log/9.png" />
    </Frame>
  </Accordion>

  <Accordion title="Check request headers">
    <Frame caption="Ensuring requests include the correct headers">
      <img src="https://mintcdn.com/spur/ouU-TQ6bqhYcyB2r/images/Log/10.png?fit=max&auto=format&n=ouU-TQ6bqhYcyB2r&q=85&s=a7821b0a74f750366bdeeae4844dd5e6" alt="" width="1290" height="110" data-path="images/Log/10.png" />
    </Frame>
  </Accordion>
</AccordionGroup>

## What Data Is Available

During every test run, Spur captures all **network requests** and **browser console output** from your application. The Log step agent searches through this data to evaluate your assertions, and you can also inspect it directly from the test results view.

<Columns cols={2}>
  <Card title="Network Requests" icon="globe">
    Every HTTP request and response, including:

    * URL, method, and status code
    * Request and response headers
    * Request body (POST data)
    * Response body
    * Timing and duration
    * Error details (HTTP and network errors)
  </Card>

  <Card title="Console Logs" icon="terminal">
    All browser console output, including:

    * Log messages (`console.log`, `console.warn`, `console.error`)
    * JavaScript errors and stack traces
    * Source file locations
    * Timestamps
  </Card>
</Columns>

## Viewing Logs in Test Results

After a test run completes, you can inspect the raw network and console data directly from the results view.

### Network Logs

<Frame caption="Inspect network logs by clicking the examined request in the step result">
  <img src="https://mintcdn.com/spur/mhIYYsnOSr0Pa3An/images/Log/req-badge.gif?s=95102a8f9869b0aa7a58c0c29199b46b" alt="" width="1172" height="720" data-path="images/Log/req-badge.gif" />
</Frame>

You can inspect the exact requests examined by the Spur agent by clicking the examined request in the step result.

<Frame caption="The Network Logs panel shows every HTTP request captured during the test">
  <img src="https://mintcdn.com/spur/ouU-TQ6bqhYcyB2r/images/Log/11.png?fit=max&auto=format&n=ouU-TQ6bqhYcyB2r&q=85&s=faa2579648ed3d597207752cd8a770e1" alt="" width="1378" height="1730" data-path="images/Log/11.png" />
</Frame>

You can filter network logs by status code, HTTP method, or URL pattern. Click any entry to see full request and response details including headers and body content.

### Console Logs

<Frame caption="The Console Logs panel shows all browser console output with log levels">
  <img src="https://mintcdn.com/spur/ouU-TQ6bqhYcyB2r/images/Log/12.png?fit=max&auto=format&n=ouU-TQ6bqhYcyB2r&q=85&s=6937213bce6b095781fb1bd9c7dede0c" alt="" width="1380" height="1732" data-path="images/Log/12.png" />
</Frame>

Console logs display the message type, timestamp, content, and source location. You can search and filter logs to find specific entries.

## Best Practices

### Writing Effective Assertions

<Columns cols={2}>
  <Card title="Pair with Verify Steps" icon="layer-group">
    Use a Verify step to check what the user sees, then follow it with a Log step to confirm the right data was sent and received. Together they give you full coverage — UI and backend in one test.

    <Frame>
      <img src="https://mintcdn.com/spur/mhIYYsnOSr0Pa3An/images/Log/13.png?fit=max&auto=format&n=mhIYYsnOSr0Pa3An&q=85&s=3937afdd055d66cbd1283f99467d20f4" alt="" width="2238" height="350" data-path="images/Log/13.png" />
    </Frame>
  </Card>

  <Card title="Give Context When You Can" icon="bullseye">
    Mention the specific assertion you want to perform: network or console. For example, "Validate the payload for collect-tag contains event\_code" should specify whether the agent needs to look for it in the console output or the network requests. So this should be rewritten as "Validate in the console ..."
  </Card>

  <Card title="One Assertion per Step" icon="arrows-split-up-and-left">
    Keep each Log step focused on a single check. Instead of "confirm the API returned 200 and the tracking event fired," split that into two separate Log steps. This makes results easier to interpret and debug.

    <Frame>
      <img src="https://mintcdn.com/spur/mhIYYsnOSr0Pa3An/images/Log/14.png?fit=max&auto=format&n=mhIYYsnOSr0Pa3An&q=85&s=6b018732847ba2492aebb13e7ae7adc1" alt="" width="2270" height="236" data-path="images/Log/14.png" />
    </Frame>
  </Card>

  <Card title="The Agent Handles the Rest" icon="lightbulb">
    You don't need to know the exact request format, header names, or payload structure. Describe the behavior you expect and the agent will figure out where and how to look for it.
  </Card>
</Columns>

### When to Use Log Steps

<Columns cols={2}>
  <Card title="Add to Regression Suites" icon="rotate">
    Log steps are great for regression testing. Add them to your existing tests to make sure API behavior doesn't silently change between releases.
  </Card>

  <Card title="Catch What Users Can't See" icon="bug">
    The UI might gracefully handle a 500 error or swallow a failed analytics call. Log steps surface these hidden issues that would otherwise go unnoticed.
  </Card>

  <Card title="Guard Critical Flows" icon="shield">
    Add Log steps to your most important user journeys — signup, form submissions, data updates, key workflows. These are the flows where a broken API call has real consequences.
  </Card>

  <Card title="Monitor Third-Party Integrations" icon="chart-line">
    Analytics, ad pixels, and third-party scripts break silently. Use Log steps to verify these calls fire on the right pages so you catch regressions early.
  </Card>
</Columns>

## Limitations

* **Logs are analyzed after capture, not in real-time.** The agent evaluates network and console data that has already been recorded during the test run. It does not monitor logs as they stream in.
* **Late-firing requests may not be captured.** If a network request or event fires after the test step has finished executing, it may not be included in the data the agent searches through. This can affect assertions on deferred or asynchronous calls that take a long time to complete.

## Troubleshooting

<AccordionGroup>
  <Accordion title="Log step reports Not Found but the request was made" icon="circle-question">
    Make sure your assertion names the endpoint or event clearly. For example, instead of "Confirm the homepage event fired," try "Confirm the request to **/collect** contains **homepage** in the payload." Being specific about the endpoint helps the agent find the right request.
  </Accordion>

  <Accordion title="Log step passes but shouldn't have" icon="circle-question">
    Try making your assertion more specific. Instead of "check the API response is correct," specify the exact endpoint, field, and expected value. A vague assertion could match unrelated data.
  </Accordion>

  <Accordion title="Log step fails but the UI looks correct" icon="circle-question">
    This usually means there's a real backend issue the UI is masking. Check the network logs panel in the test results to see the actual API responses.
  </Accordion>

  <Accordion title="Cannot find the Log step type" icon="circle-question">
    Log steps are only available for web tests. If you're authoring a native/mobile test, this step type will not appear in the step menu.
  </Accordion>
</AccordionGroup>
