Improve safety of Blurhash component (#14278)

There was a missed empty hash check. As well as rendering is now wrapped
in try/catch block, so app won't crash if any Blurhash component fails
to render its contents as it's not that critical.

diff --git a/app/javascript/mastodon/components/blurhash.js b/app/javascript/mastodon/components/blurhash.js
index 172f8c2f5e1928426768b43e5c60ca51404275a4..2af5cfc5685f8127d8331f5328cb6ff49bafb64c 100644 (file)
--- a/app/javascript/mastodon/components/blurhash.js
+++ b/app/javascript/mastodon/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 (