From b86bb82417ad098ed73037159886c4d0481ba34e Mon Sep 17 00:00:00 2001
From: Anton Korzunov <thekashey@gmail.com>
Date: Sat, 5 Sep 2020 13:33:44 +1000
Subject: [PATCH] fix: human readable errors

---
 packages/component/.size-snapshot.json   | 14 +++++++-------
 packages/component/src/createLoadable.js | 11 +++++++++++
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/component/.size-snapshot.json b/packages/component/.size-snapshot.json
index e02b655c9..7a595a141 100644
--- a/packages/component/.size-snapshot.json
+++ b/packages/component/.size-snapshot.json
@@ -1,20 +1,20 @@
 {
   "dist/loadable.cjs.js": {
-    "bundled": 13945,
-    "minified": 6737,
-    "gzipped": 2397
+    "bundled": 14563,
+    "minified": 7172,
+    "gzipped": 2534
   },
   "dist/loadable.esm.js": {
-    "bundled": 13566,
-    "minified": 6433,
-    "gzipped": 2326,
+    "bundled": 14184,
+    "minified": 6868,
+    "gzipped": 2467,
     "treeshaked": {
       "rollup": {
         "code": 276,
         "import_statements": 276
       },
       "webpack": {
-        "code": 5408
+        "code": 5744
       }
     }
   }
diff --git a/packages/component/src/createLoadable.js b/packages/component/src/createLoadable.js
index d77c0bfa6..353dfa3c0 100644
--- a/packages/component/src/createLoadable.js
+++ b/packages/component/src/createLoadable.js
@@ -34,6 +34,7 @@ function createLoadable({
   function loadable(loadableConstructor, options = {}) {
     const ctor = resolveConstructor(loadableConstructor)
     const cache = {}
+
     function getCacheKey(props) {
       if (options.cacheKey) {
         return options.cacheKey(props)
@@ -167,6 +168,11 @@ function createLoadable({
           this.state.result = result
           this.state.loading = false
         } catch (error) {
+          console.error('loadable-components: failed to synchronously load component, which expected to be available', {
+            fileName: ctor.resolve(this.props),
+            chunkName: ctor.chunkName(this.props),
+            error: error.message,
+          });
           this.state.error = error
         }
       }
@@ -202,6 +208,11 @@ function createLoadable({
               return loadedModule
             })
             .catch(error => {
+              console.error('loadable-components: failed to asynchronously load component', {
+                fileName: ctor.resolve(this.props),
+                chunkName: ctor.chunkName(this.props),
+                error: error.message,
+              });
               cachedPromise.status = STATUS_REJECTED
               throw error
             })