fix: make PDF rendering more resilient

Author: vsgoulart

packages/form-js-viewer/src/render/components/form-fields/DocumentPreview.js

@@ -156,6 +156,62 @@ function useValidDocumentData(dataSource) {
   return data.filter(isValidDocument);
 }
 
+/**
+ * @param {Object} props
+ * @param {string} props.url
+ * @param {string} props.fileName
+ * @param {Function} props.onError
+ * @param {string} props.errorMessageId
+ * @returns {import("preact").JSX.Element}
+ */
+function PdfRenderer(props) {
+  const { url, onError, errorMessageId } = props;
+  /** @type {ReturnType<typeof import("preact/hooks").useState<null | string>>} */
+  const [pdfObjectUrl, setPdfObjectUrl] = useState(null);
+  const [hasError, setHasError] = useState(false);
+
+  useEffect(() => {
+    /** @type {null | string} */
+    let objectUrl = null;
+
+    const fetchPdf = async () => {
+      try {
+        const response = await fetch(url);
+
+        if (!response.ok) {
+          setHasError(true);
+          onError();
+          return;
+        }
+
+        const blob = await response.blob();
+        objectUrl = URL.createObjectURL(blob);
+        setPdfObjectUrl(objectUrl);
+      } catch {
+        setHasError(true);
+        onError();
+      }
+    };
+
+    fetchPdf();
+
+    return () => {
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      }
+    };
+  }, [url, onError]);
+
+  return (
+    <>
+      {pdfObjectUrl !== null ? (
+        <embed src={pdfObjectUrl} type="application/pdf" class={`fjs-${type}-pdf-viewer`} />
+      ) : null}
+      {hasError ? <Errors id={errorMessageId} errors={['Unable to download document']} /> : null}
+    </>
+  );
+}
+
 /**
  *
  * @param {Object} props
@@ -207,8 +263,12 @@ function DocumentRenderer(props) {
         class={singleDocumentContainerClassName}
         style={{ maxHeight }}
         aria-describedby={hasError ? errorMessageId : undefined}>
-        <embed src={fullUrl} type="application/pdf" class={`fjs-${type}-pdf-viewer`} />
-        {hasError ? <Errors id={errorMessageId} errors={[errorMessage]} /> : null}
+        <PdfRenderer
+          url={fullUrl}
+          fileName={metadata.fileName}
+          onError={() => setHasError(true)}
+          errorMessageId={errorMessageId}
+        />
       </div>
     );
   }