Diagnosing and Resolving API Failures with Zipy

Overview

Zipy helps you watch what your APIs are doing - how fast they are, where they fail, and why. You get both the big picture and the “hey, this one’s breaking a lot” details, so fixing weird API problems gets way easier.

Before we dive in: a few things to check

Before diving into API failure triage with Zipy

• Make sure Zipy is installed in your app (either with the script tag or via npm).
• Check that the API Performance dashboard is enabled - if it’s not showing up, you’ll need to ping Zipy support.
• It really helps if you already know what APIs your app uses - otherwise, it’s like debugging with a blindfold on.

Step-by-step Instructions

Step 1: Get the big picture

• Alright, first things first - open up the API Performance page in Zipy.
• You’ll see a bunch of graphs here. Stuff like how fast your APIs are, how often they fail, and when things start getting weird.
• Just take a look around. Any random spikes? Is one API way slower than the others? Something crashing more than usual?
• This is where you get the full lay of the land - the “okay, what’s going on here?” moment before you dive into the details.

Step 2: Zoom in on one API

• See something weird? Or maybe just something that makes you go “huh?” Click on it!
• Now you’re looking at all the juicy details - how that one API is performing, where it’s slowing down, when it’s failing... the whole background scene.
• And here’s the cool part - you can actually watch how it played out for real users. Like, you see the API call, and then “boom!” - the user gets stuck. It’s basically bug forensics.
• So yeah, now you’re not just guessing. You know what’s breaking and how it’s messing with your users.

Step 3: Peek under the hood with Zipy’s Dev Tools

• Okay, now it’s time to open up your Zipy’s Network tab (yep, the one in Dev Tools for Zipy Session replay).
• Click around and look at what’s actually happening with the API call - things like response size, how long each step took, payloads (if you’ve got that turned on)... all the nerdy stuff.
• This is where you go from “this API is slow” to why it’s slow.

Step 4: Unlock timing info for cross-origin APIs

• Using APIs from a different origin? (Like, not the same domain?) You’ll wanna tweak a setting so Zipy can actually see what’s going on.
• Here’s the trick: set the Timing-Allow-Origin header in your API responses. That’s what tells the browser, “yep, it’s cool to share detailed timing data.”
• Without that? It’s like trying to debug with half the lights off. You’ll miss key info about what’s slowing things down.
• Turn it on, and “boom!” - full visibility, even for the cross-origin stuff