PDF error handling

web/src/components/PDF/PDF.tsx

@@ -1,19 +1,37 @@
+import { useState } from 'react'
+
+import { mdiAlertOutline } from '@mdi/js'
+import Icon from '@mdi/react'
+
 interface PDFProps {
   url: string
   form?: boolean
 }
 
-const PDF = ({ url, form = false }: PDFProps) => (
-  <embed
-    src={url}
-    title="PDF"
-    type="application/pdf"
-    style={{
-      width: 'calc(100vw - 1rem)',
-      height: `calc(100vh - ${form ? '8.5rem' : '6rem'})`,
-    }}
-    className="rounded-xl"
-  />
-)
+const PDF = ({ url, form = false }: PDFProps) => {
+  const [error, setError] = useState<boolean>(false)
+
+  return error ? (
+    <div role="alert" className="alert alert-warning">
+      <Icon path={mdiAlertOutline} className="size-7" />
+      <span>
+        Could not load PDF, this is common in in-app browsers, try opening this
+        page in a regular browser
+      </span>
+    </div>
+  ) : (
+    <iframe
+      src={url}
+      title="PDF"
+      style={{
+        width: 'calc(100vw - 1rem)',
+        height: `calc(100vh - ${form ? '8.5rem' : '6rem'})`,
+      }}
+      className="rounded-xl"
+      onError={() => setError(true)}
+      onLoad={() => setError(false)}
+    />
+  )
+}
 
 export default PDF