[Glitch] Improve safety of Blurhash component

Port 3ef94c00444f2b72a6f68e0fd9cff1b3f783c555 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>

diff --git a/app/javascript/flavours/glitch/components/blurhash.js b/app/javascript/flavours/glitch/components/blurhash.js
index 172f8c2f5e1928426768b43e5c60ca51404275a4..2af5cfc5685f8127d8331f5328cb6ff49bafb64c 100644 (file)
--- a/app/javascript/flavours/glitch/components/blurhash.js
+++ b/app/javascript/flavours/glitch/components/blurhash.js
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 
 /**
  * @typedef BlurhashPropsBase
- * @property {string} hash Hash to render
+ * @property {string?} hash Hash to render
  * @property {number} width
  * Width of the blurred region in pixels. Defaults to 32
  * @property {number} [height]
@@ -37,13 +37,17 @@ function Blurhash({
     const { current: canvas } = canvasRef;
     canvas.width = canvas.width; // resets canvas
 
-    if (dummy) return;
+    if (dummy || !hash) return;
 
-    const pixels = decode(hash, width, height);
-    const ctx = canvas.getContext('2d');
-    const imageData = new ImageData(pixels, width, height);
+    try {
+      const pixels = decode(hash, width, height);
+      const ctx = canvas.getContext('2d');
+      const imageData = new ImageData(pixels, width, height);
 
-    ctx.putImageData(imageData, 0, 0);
+      ctx.putImageData(imageData, 0, 0);
+    } catch (err) {
+      console.error('Blurhash decoding failure', { err, hash });
+    }
   }, [dummy, hash, width, height]);
 
   return (