Chunk loading error handling

fixes webpack#692 fixes webpack#758 fixes webpack#686 fixes webpack#785
pateatlau · Oct 24, 2015 · bf1f114 · bf1f114
1 parent 383fd71
commit bf1f114
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 0 deletions.
diff --git a/lib/JsonpMainTemplatePlugin.js b/lib/JsonpMainTemplatePlugin.js
@@ -31,6 +31,7 @@ JsonpMainTemplatePlugin.prototype.apply = function(mainTemplate) {
 		var chunkFilename = this.outputOptions.chunkFilename || "[id]." + filename;
 		var chunkMaps = chunk.getChunkMaps();
 		var crossOriginLoading = this.outputOptions.crossOriginLoading;
+		var chunkLoadTimeout = this.outputOptions.chunkLoadTimeout || 120000;
 		return this.asString([
 			"if(installedChunks[chunkId] === 0)",
 			this.indent([
@@ -49,6 +50,7 @@ JsonpMainTemplatePlugin.prototype.apply = function(mainTemplate) {
 			"script.type = 'text/javascript';",
 			"script.charset = 'utf-8';",
 			"script.async = true;",
+			"script.timeout = " + chunkLoadTimeout + ";",
 			crossOriginLoading ? "script.crossOrigin = '" + crossOriginLoading + "';" : "",
 			"script.src = " + this.requireFn + ".p + " +
 			this.applyPluginsWaterfall("asset-path", JSON.stringify(chunkFilename), {
@@ -70,6 +72,22 @@ JsonpMainTemplatePlugin.prototype.apply = function(mainTemplate) {
 					name: "\" + (" + JSON.stringify(chunkMaps.name) + "[chunkId]||chunkId) + \""
 				}
 			}) + ";",
+			"var timeout = setTimeout(onScriptComplete, " + chunkLoadTimeout + ");",
+			"script.onerror = script.onload = onScriptComplete;",
+			"function onScriptComplete() {",
+			this.indent([
+				"// avoid mem leaks in IE.",
+				"script.onerror = script.onload = null;",
+				"clearTimeout(timeout);",
+				"var chunk = installedChunks[chunkId];",
+				"if(chunk !== 0) {",
+				this.indent([
+					"if(chunk) chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));",
+					"installedChunks[chunkId] = undefined;"
+				]),
+				"}"
+			]),
+			"};",
 			"head.appendChild(script);",
 			"",
 			"var promise = new Promise(function(resolve, reject) {",

diff --git a/test/browsertest/lib/index.web.js b/test/browsertest/lib/index.web.js
@@ -92,6 +92,25 @@ describe("main", function() {
 		});
 	});
 
+	describe("chunk error handling", function() {
+		it("should be able to handle chunk loading errors and try again", function(done) {
+			var old = __webpack_public_path__;
+			__webpack_public_path__ += "wrong/";
+			System.import("./three").then(function() {
+				done(new Error("Chunk shouldn't be loaded"));
+			}).catch(function(err) {
+				err.should.be.instanceOf(Error);
+				__webpack_public_path__ = old;
+				System.import("./three").then(function(three) {
+					three.should.be.eql(3);
+					done();
+				}).catch(function(err) {
+					done(new Error("Shouldn't result in an chunk loading error"));
+				});
+			});
+		});
+	});
+
 	var testCasesContext = require.context("../../cases", true, /^\.\/[^\/_]+\/[^\/_]+\/index$/);
 	var testCasesMap = testCasesContext.keys().map(function(key) {
 		return key.substring(2, key.length - "/index".length).split("/");

diff --git a/test/browsertest/lib/three.js b/test/browsertest/lib/three.js
@@ -0,0 +1 @@
+module.exports = 3;