Prevent blurhash crashes (#13866)

Author: swissspidy

packages/story-editor/src/components/canvas/renderResourcePlaceholder.js

@@ -20,6 +20,11 @@
 import styled, { css } from 'styled-components';
 import { Blurhash } from 'react-blurhash';
 
+/**
+ * Internal dependencies
+ */
+import { HideOnError } from '../hideOnError';
+
 const placeholderStyles = css`
   position: absolute !important;
   top: 0;
@@ -40,7 +45,14 @@ const BaseColorContainer = styled.div`
 function renderResourcePlaceholder({ blurHash, baseColor }) {
   if (blurHash) {
     return (
-      <BlurhashContainer hash={blurHash} punch={1} height="100%" width="100%" />
+      <HideOnError>
+        <BlurhashContainer
+          hash={blurHash}
+          punch={1}
+          height="100%"
+          width="100%"
+        />
+      </HideOnError>
     );
   }
 

packages/story-editor/src/components/hideOnError.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import type { PropsWithChildren } from 'react';
+import { Component } from '@googleforcreators/react';
+
+interface HideOnErrorState {
+  error: Error | null;
+}
+
+export class HideOnError extends Component<PropsWithChildren<unknown>> {
+  state: HideOnErrorState;
+
+  constructor(props: PropsWithChildren<unknown>) {
+    super(props);
+
+    this.state = {
+      error: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  render() {
+    const { error } = this.state;
+    if (!error) {
+      return this.props.children;
+    }
+
+    return null;
+  }
+}

packages/story-editor/src/components/library/panes/media/common/mediaElement.js

@@ -38,6 +38,7 @@ import DropDownMenu from '../local/dropDownMenu';
 import { ContentType, useLocalMedia } from '../../../../../app/media';
 import Tooltip from '../../../../tooltip';
 import { noop } from '../../../../../utils/noop';
+import { HideOnError } from '../../../../hideOnError';
 import Attribution from './attribution';
 import InnerElement from './innerElement';
 import InsertionMenu from './insertionMenu';
@@ -211,12 +212,14 @@ function Element({
         />
         {attribution}
         {isPlaceholder && blurHash && (
-          <BlurhashContainer
-            hash={blurHash}
-            width={width}
-            height={height}
-            punch={1}
-          />
+          <HideOnError>
+            <BlurhashContainer
+              hash={blurHash}
+              width={width}
+              height={height}
+              punch={1}
+            />
+          </HideOnError>
         )}
         {(!src ||
           isCurrentResourceProcessing(resourceId) ||

packages/story-editor/tsconfig.json

@@ -47,6 +47,7 @@
     "src/app/pageDataUrls",
     "src/app/story",
     "src/app/taxonomy",
+    "src/components/hideOnError.tsx",
     "src/components/library/panes/text/textPresets.ts",
     "src/components/canvas/*.ts",
     "src/components/canvas/utils/*.ts",