diff --git a/CHANGELOG.md b/CHANGELOG.md
index b0e27a388c..ad3a901a3e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@
 - Soft theme label color fix by [@aliabid94](https://github.com/aliabid94) in [PR 4070](https://github.com/gradio-app/gradio/pull/4070) 
 - Fix `gr.Slider` `release` event not triggering on mobile by [@space-nuko](https://github.com/space-nuko) in [PR 4098](https://github.com/gradio-app/gradio/pull/4098) 
 - Removes extraneous `State` component info from the `/info` route by [@abidlabs](https://github.com/freddyaboulton) in [PR 4107](https://github.com/gradio-app/gradio/pull/4107)
+- Make .then() work even if first event fails by [@aliabid94](https://github.com/aliabid94) in [PR 4115](https://github.com/gradio-app/gradio/pull/4115).
 
 ## Documentation Changes:
 
diff --git a/js/app/src/Blocks.svelte b/js/app/src/Blocks.svelte
index 3e237c6466..a65a9722ec 100644
--- a/js/app/src/Blocks.svelte
+++ b/js/app/src/Blocks.svelte
@@ -235,12 +235,10 @@
 	app.on("data", ({ data, fn_index }) => {
 		handle_update(data, fn_index);
 		let status = loading_status.get_status_for_fn(fn_index);
-		if (status === "complete" || status === "error") {
+		if (status === "complete") {
+			// handle .success and successful .then here, after data has updated
 			dependencies.forEach((dep, i) => {
-				if (
-					dep.trigger_after === fn_index &&
-					(!dep.trigger_only_on_success || status === "complete")
-				) {
+				if (dep.trigger_after === fn_index) {
 					trigger_api_call(i, null);
 				}
 			});
@@ -249,6 +247,14 @@
 
 	app.on("status", ({ fn_index, ...status }) => {
 		loading_status.update({ ...status, fn_index });
+		if (status.status === "error") {
+			// handle failed .then here, since "data" listener won't trigger
+			dependencies.forEach((dep, i) => {
+				if (dep.trigger_after === fn_index && !dep.trigger_only_on_success) {
+					trigger_api_call(i, null);
+				}
+			});
+		}
 	});
 
 	function set_prop<T extends ComponentMeta>(obj: T, prop: string, val: any) {