From fe814aea9f79b94912ac6ecf88e4abe17f2a7dfe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?berislav=20grgi=C4=8Dak?= <berislav.grgicak@gmail.com>
Date: Wed, 24 Apr 2024 07:07:51 +0200
Subject: [PATCH] Add network error message (#1281)

Fixes #1205

## What is this PR doing?

It adds an error message for blueprint network errors.

## What problem is it solving?

It will help users identify the root cause of blueprints failing.

## How is the problem addressed?

By returning a custom error message with debug instructions.

## Testing Instructions

- Checkout this branch
- [Open Playground with this
blueprint](http://localhost:5400/website-server/#{%20%22features%22:%20{%20%22networking%22:%20true%20},%20%22steps%22:%20[%20{%20%22step%22:%20%22installPlugin%22,%20%22pluginZipFile%22:%20{%20%22resource%22:%20%22url%22,%20%22url%22:%20%22https://github.com/helgatheviking/simple-user-listing-demo-avatars/releases/download/1.0.0/simple-user-listing-demo-avatars.1.0.0.zip%22%20},%20%22options%22:%20{%20%22activate%22:%20true%20}%20}%20]%20})
- Open the browser console and see the new error

**Note**: The error is currently displayed multiple times because of
uncaught promises somewhere in the code.

---------

Co-authored-by: Adam Zielinski <adam@adamziel.com>
---
 .../blueprints/src/lib/resources.ts           | 53 ++++++++++++++++---
 1 file changed, 45 insertions(+), 8 deletions(-)

diff --git a/packages/playground/blueprints/src/lib/resources.ts b/packages/playground/blueprints/src/lib/resources.ts
index 5d4ac62fe8..a6a32f7f61 100644
--- a/packages/playground/blueprints/src/lib/resources.ts
+++ b/packages/playground/blueprints/src/lib/resources.ts
@@ -212,15 +212,52 @@ export abstract class FetchResource extends Resource {
 	async resolve() {
 		this.progress?.setCaption(this.caption);
 		const url = this.getURL();
-		let response = await fetch(url);
-		response = await cloneResponseMonitorProgress(
-			response,
-			this.progress?.loadingListener ?? noop
-		);
-		if (response.status !== 200) {
-			throw new Error(`Could not download "${url}"`);
+		try {
+			let response = await fetch(url);
+			if (!response.ok) {
+				throw new Error(`Could not download "${url}"`);
+			}
+			response = await cloneResponseMonitorProgress(
+				response,
+				this.progress?.loadingListener ?? noop
+			);
+			if (response.status !== 200) {
+				throw new Error(`Could not download "${url}"`);
+			}
+			return new File([await response.blob()], this.name);
+		} catch (e) {
+			throw new Error(
+				`Could not download "${url}".
+				Check if the URL is correct and the server is reachable.
+				If the url is reachable, the server might be blocking the request.
+				Check the console and network for more information.
+
+				## Does the console shows an error about "No 'Access-Control-Allow-Origin' header"?
+
+				This means the server where your file is hosted does not allow requests from other sites
+				(cross-origin requests, or CORS).	You will need to move it to another server that allows
+				cross-origin file downloads. You can learn more about CORS at
+				https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS.
+
+				If you're loading a file from https://github.com/, there's an easy fix – you can load it from
+				raw.githubusercontent.com instead. Here's how to do that:
+
+				1. Start with the original GitHub URL for the file. For example:
+				'''
+				https://github.com/username/repository/blob/branch/filename
+				'''
+				2. Replace 'github.com' with 'raw.githubusercontent.com'.
+				3. Remove the '/blob/' part of the URL.
+
+				The resulting URL should look like this:
+				'''
+				https://raw.githubusercontent.com/username/repository/branch/filename
+				'''
+
+				Error:
+				${e}`
+			);
 		}
-		return new File([await response.blob()], this.name);
 	}
 
 	/**