arrow_back Back to Blog

Connect Frontend Bugs to Backend Logs with Workspace Builder

How Signal Workspace Builder automatically links frontend network exceptions to Azure Log Analytics, Sentry, and Grafana traces in a single view.

The Gap Between Frontend and Backend

A frontend exception is only half the story. When POST /api/checkout returns a 500, the meaningful error is deep in the backend stack trace - not in the browser's network tab.

Historically, connecting the two required:

  1. Copy the failing request's trace ID from the browser
  2. Open Azure Monitor, Grafana, or Sentry in a separate tab
  3. Search for that trace ID
  4. Correlate timestamps manually across two systems

Signal's Workspace Builder closes this gap automatically.

What is a Workspace?

A workspace is a structured definition of your app's architecture. You tell Signal:

  • What domains belong to this application
  • Where the backend services are located
  • Which log provider each service is connected to

Once configured, Signal correlates frontend network requests with backend log entries in real time inside the viewer, without leaving the browser.

Setting Up a Workspace

In the Settings tab, go to Workspaces and click Builder. The form lets you:

  1. Name the workspace (e.g. "Production" or "Staging")
  2. Add web services - the recording domain is auto-detected and added automatically
  3. Add integrations - connect Azure Log Analytics, Sentry, or Grafana Loki to each service

For Azure Log Analytics, you need:

  • Workspace ID
  • Shared Key
  • A KQL query template with {START} and {END} timestamp placeholders

A default query targeting AppExceptions is provided. You can customize it to target any table in your workspace.

For Sentry, you need:

  • Organization slug
  • Project slug
  • Auth token

For Grafana Loki, you need the endpoint URL and any required headers.

The Correlation Engine

When you open the Network tab in the viewer, each request now shows a badge indicating how many backend log entries were matched. Signal uses three correlation strategies in priority order:

  1. Distributed trace headers - traceparent, x-request-id, or any custom header you configure
  2. Time window fallback - logs within a short window around the request timestamp
  3. URL path matching - as a last resort for requests without trace headers

Expanding any network request reveals the matched backend logs inline. JSON field values in log entries are automatically pretty-printed.

Try It Without Credentials

The Azure integration includes a Use Demo Account toggle that queries Microsoft's public Azure Log Analytics demo workspace. No credentials are needed. This lets you explore correlated logs immediately before connecting your own workspace.

Adding Domains on the Fly

When you are viewing a recording and see a request to a domain not yet in your workspace (a third-party API, a microservice, a CDN), you can hover over that request in the Network tab and click the + workspace button. The domain is added to your workspace as a new service entry immediately.

The Result

Instead of context-switching between browser DevTools and Azure Monitor, you get one view: the frontend exception, the network request that triggered it, and the backend log entries that explain why it failed.

For teams running distributed systems, this single feature eliminates the most common category of debugging overhead: the time spent manually connecting dots across systems.