API change detection for frontend teams

Know when an API change will break your frontend.

Frontend Contract Guard captures real API responses, compares changes across sessions, detects response-schema differences and helps developers investigate potential frontend impact before production.

Download Explore how it works

Built for frontend developers. Designed for real API changes.

GET /api/v1/hotels/search2 findings

Unchanged~ Type changed− Removed

Baseline

 {   "id": "HTL-102",   "name": "Example Hotel",   "rating": 4.5,   "price": {     "amount": 140,~    "currency": "USD"   },−  "amenities": ["Wi-Fi", "Pool"] }

Candidate

 {   "id": "HTL-102",   "name": "Example Hotel",   "rating": 4.5,   "price": {     "amount": 140,~    "currency": 840   } }

Potential frontend impact

price.currency is read in hotel-price.component.ts on route /hotels.

High severityHigh confidence

The problem

API changes shouldn't become frontend surprises.

Backend tests can pass while the screen that reads a response breaks. These are the gaps Contract Guard is built for.

Silent contract changes
A response field can disappear, change type or become nullable without the frontend team noticing.
Unreliable test fixtures
Mocks and saved fixtures drift away from what the backend actually returns.
Slow debugging
Mismatches are often found only after a screen or user journey breaks.
Difficult impact analysis
One changed field can be read by several endpoints, routes and components.

How it works

From captured responses to actionable insights.

A deterministic workflow: the same inputs always give the same findings.

01
Capture
Record a journey in an isolated browser where capture is set up, or import a HAR file from DevTools.
02
Compare
Compare a baseline with a new capture to find removed fields, type changes and new nulls.
03
Investigate
Explore endpoints, response structures, shared fields and the routes where each one was seen.
04
Verify
Decide which journeys and regression tests to review, starting from a draft Playwright test per finding.

Features

Everything you need to review an API change.

API discovery

See how frontend routes connect to APIs.

Explore the routes, endpoints and response structures observed in your captures, and how they relate, in one map.

Three layers: frontend route, API endpoint, response structure
Captured, inferred and manual content kept apart
Select any node to inspect its fields and connections

Frontend route/hotels/hotels/:id

API endpointGET /api/v1/hotels/searchGET /api/v1/hotels/:id

Response structureHotelSearchResultHotel

InspectorObserved

GET /api/v1/hotels/search

6 fieldsSeen on 2 routes

id          string
name        string
rating      number
price       object
amenities   string[]

Schema diff

See exactly what changed.

Compare captured responses and see the structural differences: added, removed and retyped fields, nested objects and arrays.

Nested objects and array items compared field by field
Nullability changes reported on their own
Volatile values such as timestamps and IDs can be ignored with rules

+ Added− Removed~ Changed

−amenitiesstring[]

~price.currencystring → number

~rooms[].refundableboolean → boolean | null

+price.taxIncludedboolean

price.amountnumber

rooms[].idstring

Impact investigation

Understand what deserves a closer look.

Each change is linked to the TypeScript, Angular or Vue code that reads the field and the routes where it was observed, with a confidence level.

Evidence for every finding: field, endpoint, route and source line
Shown as potential impact, never as a guaranteed break
Severity and confidence rated separately

Changed fieldprice.currency string → number
EndpointGET /api/v1/hotels/search
Source referencesrc/app/hotels/hotel-price.component.ts:42
Route/hotels

Potential impactA source reference does not prove the code path runs.

API explorer

Understand the responses your UI depends on.

Search every captured call by path and method, read its request and response, browse the response as a tree and copy it as cURL or TypeScript.

Search and filter captured calls
Response bodies as readable, collapsible trees
Generate cURL and TypeScript types from a call

Filter by path…

GET /api/v1/hotels/search 200GET /api/v1/hotels/HTL-102 200POST /api/v1/bookings 201

ResponseRequest

▾ results [1]
  ▾ 0
      id        "HTL-102"
      name      "Example Hotel"
      rating    4.5
    ▸ price     {2}
    ▸ amenities [2]

Journey comparison

Compare real application journeys.

Capture the same journey against two builds, by HAR import or browser capture, and review what changed per endpoint.

Import HAR files or record in an isolated browser
Replay a recorded journey against a candidate base URL
A list of endpoint changes per comparison

/hotels/hotels/HTL-102/checkout

Endpoints	Changes
`GET /api/v1/hotels/search`	1 removed1 type change
`GET /api/v1/hotels/:id`	No change
`POST /api/v1/bookings`	No change

Developer workflow

Designed around the way developers work.

Use the parts that fit your team, on the desktop or on your own server.

Browser capture
Isolated Chromium on desktop; a capture worker on the web server when enabled.
HAR import
Drop a HAR saved from DevTools. It is parsed, sanitized and discarded.
Baselines and candidates
Keep known-good baselines per environment and compare new builds against them.
Schema exploration
Endpoint docs grouped by path, shared fields and data structures.
Draft regression tests
A draft Playwright test for each finding, to review and keep.
CLI and reports
The fcg CLI runs the same comparison anywhere and exports HTML, Markdown and JSON reports.

For developers

Keep API contract changes visible during development.

Run the same comparison from the command line. It exits with a non-zero code when findings reach the threshold you set, and writes the report next to your build.

Read the docs

$ fcg compare \
    --baseline baseline.har \
    --candidate candidate.har \
    --src ./src \
    --format html,json --out reports \
    --fail-on high
wrote reports/contract-guard-report.html
wrote reports/contract-guard-report.json
fcg: 14 endpoints compared, 3 findings, 2 potentially breaking,
     2 at or above high/medium, 212 source files scanned
$ echo $?
1

Exit code 1: findings at or above high

Data handling

Know how your API data is handled.

Captured traffic can contain credentials and personal data, so it is sanitized before anything is stored.

Redacted before storage
Authorization, cookies, tokens and sensitive query parameters and body fields are replaced with [REDACTED] before a capture is saved.
Encrypted at rest
Captures, results and uploaded source files are encrypted with AES-256-GCM in both the desktop and the self-hosted web app.
Source is parsed, never run
Repositories are analysed statically. Uploaded code is never executed and is not sent to AI providers or third parties.
Desktop or your own server
The desktop app keeps data on your machine and sends nothing by default. The web app stores data on the server you run.

Privacy and data handling Desktop vs web

Desktop app

Download Contract Guard for your computer

Capture and compare locally on Windows, macOS or Linux. Your captures stay on your machine.

Finding the right installer for your device…

All downloads

Installed apps update themselves when a new version is released.

FAQ

Frequently asked questions

A desktop app, a self-hosted web app and a CLI that compare API responses from a known-good baseline with a new build and show which frontend routes and source files may be affected.

Stop finding API changes through broken screens.

Capture API responses, compare changes and investigate potential frontend impact with a workflow designed for developers.

Download Sign in

Know when an API change will break your frontend.

Silent contract changes

Unreliable test fixtures

Slow debugging

Difficult impact analysis

Capture

Compare

Investigate

Verify

See how frontend routes connect to APIs.

See exactly what changed.

Understand what deserves a closer look.

Understand the responses your UI depends on.

Compare real application journeys.

Designed around the way developers work.

Browser capture

HAR import

Baselines and candidates

Schema exploration

Draft regression tests

CLI and reports

Keep API contract changes visible during development.

Redacted before storage

Encrypted at rest

Source is parsed, never run

Desktop or your own server

What is Frontend Contract Guard?

How does API change detection work?

Can I import a HAR file?

How does API Discovery & Visual Mapping work?

Can it automatically identify every affected frontend component?

Does it replace existing API testing?

Where is captured API data stored?

How do I get started?

Stop finding API changes through broken screens.