✨ add verbose error message while assets fetching failed (#101)

kuitos · Jun 17, 2024 · e3bcda8 · e3bcda8
1 parent 8d558e5
commit e3bcda8
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 40 deletions.
diff --git a/example/index.html b/example/index.html
@@ -6,11 +6,21 @@
 </head>
 <body>
 <script type="module">
-	import('../dist/index.js').then(({importEntry}) => {
+	window.onerror = e => {
+		console.log('error', e.message);
+	};
+	window.onunhandledrejection = (e) => {
+		console.log('unhandledrejection', e.reason.message);
+	};
+
+	import('../dist/index.js').then(({ importEntry }) => {
 		importEntry('./template.html').then(res => {
-			res.execScripts().then(exports => {
+			console.log(res.template);
+			return res.execScripts().then(exports => {
 				console.log(exports);
 			});
+		}).catch(e => {
+			console.log('importEntry failed', e.message);
 		});
 	});
 </script>

diff --git a/example/template.html b/example/template.html
@@ -14,5 +14,6 @@
 <script src="./c.js"></script>
 <script src="https://unpkg.com/react@16.4.2/umd/react.production.min.js"></script>
 <script src="https://unpkg.com/mobx@5.0.3/lib/mobx.umd.js"></script>
+<script src="https://www.baidu.com"></script>
 </body>
 </html>
diff --git a/src/allSettled.js b/src/allSettled.js
diff --git a/src/allSettledButCanBreak.js b/src/allSettledButCanBreak.js
@@ -0,0 +1,16 @@
+export function allSettledButCanBreak(promises, shouldBreakWhileError) {
+	return Promise.all(promises.map((promise, i) => {
+			return promise
+				.then(value => {
+					return { status: 'fulfilled', value };
+				})
+				.catch(reason => {
+					if (shouldBreakWhileError?.(i)) {
+						throw reason;
+					}
+
+					return { status: 'rejected', reason };
+				});
+		}));
+	;
+}
diff --git a/src/index.js b/src/index.js
@@ -4,7 +4,7 @@
  * @since 2018-08-15 11:37
  */
 
-import { allSettled } from './allSettled';
+import { allSettledButCanBreak } from './allSettledButCanBreak';
 import processTpl, { genLinkReplaceSymbol, genScriptReplaceSymbol } from './process-tpl';
 import {
 	defaultGetPublicPath,
@@ -42,8 +42,10 @@ function getEmbedHTML(template, styles, opts = {}) {
 
 	return getExternalStyleSheets(styles, fetch)
 		.then(styleSheets => {
-			embedHTML = styles.reduce((html, styleSrc, i) => {
-				html = html.replace(genLinkReplaceSymbol(styleSrc), isInlineCode(styleSrc) ? `${styleSrc}` : `<style>/* ${styleSrc} */${styleSheets[i]}</style>`);
+			embedHTML = styleSheets.reduce((html, styleSheet) => {
+				const styleSrc = styleSheet.src;
+				const styleSheetContent = styleSheet.value;
+				html = html.replace(genLinkReplaceSymbol(styleSrc), isInlineCode(styleSrc) ? `${styleSrc}` : `<style>/* ${styleSrc} */${styleSheetContent}</style>`);
 				return html;
 			}, embedHTML);
 			return embedHTML;
@@ -76,17 +78,39 @@ function getExecutableScript(scriptSrc, scriptText, opts = {}) {
 
 // for prefetch
 export function getExternalStyleSheets(styles, fetch = defaultFetch) {
-	return allSettled(styles.map(styleLink => {
+	return allSettledButCanBreak(styles.map(async styleLink => {
 			if (isInlineCode(styleLink)) {
 				// if it is inline style
 				return getInlineCode(styleLink);
 			} else {
 				// external styles
 				return styleCache[styleLink] ||
-					(styleCache[styleLink] = fetch(styleLink).then(response => response.text()));
+					(styleCache[styleLink] = fetch(styleLink).then(response => {
+						if (response.status >= 400) {
+							throw new Error(`${styleLink} load failed with status ${response.status}`);
+						}
+						return response.text();
+					}).catch(e => {
+						try {
+							if (e.message.indexOf(styleLink) === -1) {
+								e.message = `${styleLink} ${e.message}`;
+							}
+						} catch (_) {
+							// e.message 可能是 readonly，此时会触发异常
+						}
+						throw e;
+					}));
 			}
 		},
-	)).then(results => results.filter(result => {
+	)).then(results => results.map((result, i) => {
+		if (result.status === 'fulfilled') {
+			result.value = {
+				src: styles[i],
+				value: result.value,
+			};
+		}
+		return result;
+	}).filter(result => {
 		// 忽略失败的请求，避免异常下载阻塞后续资源加载
 		if (result.status === 'rejected') {
 			Promise.reject(result.reason);
@@ -97,7 +121,7 @@ export function getExternalStyleSheets(styles, fetch = defaultFetch) {
 }
 
 // for prefetch
-export function getExternalScripts(scripts, fetch = defaultFetch) {
+export function getExternalScripts(scripts, fetch = defaultFetch, entry) {
 
 	const fetchScript = (scriptUrl, opts) => scriptCache[scriptUrl] ||
 		(scriptCache[scriptUrl] = fetch(scriptUrl, opts).then(response => {
@@ -108,9 +132,20 @@ export function getExternalScripts(scripts, fetch = defaultFetch) {
 			}
 
 			return response.text();
+		}).catch(e => {
+			try {
+				if (e.message.indexOf(scriptUrl) === -1) {
+					e.message = `${scriptUrl} ${e.message}`;
+				}
+			} catch (_) {
+				// e.message 可能是 readonly，此时会触发异常
+			}
+			throw e;
 		}));
 
-	return allSettled(scripts.map(script => {
+	// entry js 下载失败应该直接 break
+	const shouldBreakWhileError = (i) => scripts[i] === entry;
+	return allSettledButCanBreak(scripts.map(async script => {
 
 			if (typeof script === 'string') {
 				if (isInlineCode(script)) {
@@ -136,21 +171,23 @@ export function getExternalScripts(scripts, fetch = defaultFetch) {
 				return fetchScript(src, fetchOpts);
 			}
 		},
-	)).then(results => results.map((result, i) => {
-		if (result.status === 'fulfilled') {
-			result.value = {
-				src: scripts[i],
-				value: result.value,
-			};
-		}
-		return result;
-	}).filter(result => {
-		// 忽略失败的请求，避免异常下载阻塞后续资源加载
-		if (result.status === 'rejected') {
-			Promise.reject(result.reason);
-		}
-		return result.status === 'fulfilled';
-	}).map(result => result.value));
+	), shouldBreakWhileError)
+		.then(results =>
+			results.map((result, i) => {
+				if (result.status === 'fulfilled') {
+					result.value = {
+						src: scripts[i],
+						value: result.value,
+					};
+				}
+				return result;
+			}).filter(result => {
+				// 忽略失败的请求，避免异常下载阻塞后续资源加载
+				if (result.status === 'rejected') {
+					Promise.reject(result.reason);
+				}
+				return result.status === 'fulfilled';
+			}).map(result => result.value));
 }
 
 function throwNonBlockingError(error, msg) {
@@ -184,7 +221,7 @@ export function execScripts(entry, scripts, proxy = window, opts = {}) {
 		scopedGlobalVariables = [],
 	} = opts;
 
-	return getExternalScripts(scripts, fetch)
+	return getExternalScripts(scripts, fetch, entry)
 		.then(scriptsText => {
 
 			const geval = (scriptSrc, inlineScript) => {