From 9d4139529e3ce2ca8428caa725ceafb9e5528b87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonatan=20K=C5=82osko?= <jonatanklosko@gmail.com>
Date: Thu, 17 Jun 2021 18:24:03 +0200
Subject: [PATCH] Show clear error when rendering VegaLite plot fails (#362)

---
 assets/js/vega_lite/index.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/assets/js/vega_lite/index.js b/assets/js/vega_lite/index.js
index 87c4638d9..998a1abed 100644
--- a/assets/js/vega_lite/index.js
+++ b/assets/js/vega_lite/index.js
@@ -36,9 +36,15 @@ const VegaLite = {
         spec.data = { values: [] };
       }
 
-      this.state.viewPromise = vegaEmbed(this.state.container, spec, {}).then(
-        (result) => result.view
-      );
+      this.state.viewPromise = vegaEmbed(this.state.container, spec, {})
+        .then((result) => result.view)
+        .catch((error) => {
+          const message = `Failed to render the given Vega-Lite specification, got the following error:\n\n    ${error.message}\n\nMake sure to check for typos.`;
+
+          this.state.container.innerHTML = `
+            <div class="text-red-600 whitespace-pre-wrap">${message}</div>
+          `;
+        });
     });
 
     this.handleEvent(