Show nicer error if pdf fails to load (#3184)

Co-authored-by: miko <[email protected]>

static/app-strings.json

@@ -2965,6 +2965,8 @@
   "Default action when clicking a playlist.": "Default action when clicking a playlist.",
   "Default playlist action": "Default playlist action",
   "Optionally the email change can be requested using \"Submit Feedback\" button below.": "Optionally the email change can be requested using \"Submit Feedback\" button below.",
+  "Failed to load": "Failed to load",
+  "This file failed to load. Some browser extension may be blocking it. If the issue persists, please reach out to [email protected]": "This file failed to load. Some browser extension may be blocking it. If the issue persists, please reach out to [email protected]",
 
   "--end--": "--end--"
 }

ui/component/IframeReact/view.jsx

@@ -1,5 +1,6 @@
 // @flow
 import React from 'react';
+import Card from 'component/common/card';
 
 type Props = {
   fullHeight: boolean,
@@ -10,11 +11,20 @@ type Props = {
 export default function I18nMessage(props: Props) {
   const { src, title } = props;
 
-  // const iframeRef = useRef();
+  const [failedToLoadSrc, setFailedToLoadSrc] = React.useState(false);
+  // const iframeRef = React.useRef();
 
   // const [iframeHeight, setIframeHeight] = useState('80vh');
 
   function onLoad() {
+    const checkIfSrcCanBeLoaded = async () => {
+      const response = await fetch(src);
+      if (response.status !== 200) {
+        setFailedToLoadSrc(true);
+      }
+    };
+    checkIfSrcCanBeLoaded();
+
     /*
 
     iframe domain restrictions prevent naive design :-(
@@ -30,6 +40,19 @@ export default function I18nMessage(props: Props) {
   return (
     // style={{height: iframeHeight}}
     // ref={iframeRef}
-    <iframe src={src} title={title} onLoad={onLoad} sandbox={!IS_WEB} />
+    !failedToLoadSrc ? (
+      <iframe src={src} title={title} onLoad={onLoad} sandbox={!IS_WEB} />
+    ) : (
+      <Card
+        title={__('Failed to load')}
+        subtitle={
+          <p>
+            {__(
+              'This file failed to load. Some browser extension may be blocking it. If the issue persists, please reach out to [email protected]'
+            )}
+          </p>
+        }
+      />
+    )
   );
 }