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
+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"
-    type="application/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