handling render errors on PostCard

packages/app/src/components/PostCard/components/attachments/index.jsx

@@ -30,7 +30,7 @@ import "plyr-react/dist/plyr.css"
 import "./index.less"
 
 const Attachment = React.memo((props) => {
-    const { url, id, name } = props.attachment
+    const { url, id } = props.attachment
 
     const [loaded, setLoaded] = React.useState(false)
 
@@ -108,9 +108,19 @@ const Attachment = React.memo((props) => {
         return <ContentFailed />
     }
 
-    return <div className="attachment" id={id}>
+    try {
+        return <div
+            key={props.index}
+            id={id}
+            className="attachment"
+        >
             {renderMedia()}
         </div>
+    } catch (error) {
+        console.error(`Failed to render attachment ${props.attachment.name} (${props.attachment.id})`, error)
+
+        return <ContentFailed />
+    }
 })
 
 export default (props) => {
@@ -158,8 +168,8 @@ export default (props) => {
             stopOnHover={true}
         >
             {
-                props.attachments.map((attachment, index) => {
-                    return <Attachment key={index} attachment={attachment} />
+                props.attachments?.length > 0 && props.attachments.map((attachment, index) => {
+                    return <Attachment index={index} attachment={attachment} />
                 })
             }
         </Carousel>

packages/app/src/components/PostCard/components/content/index.jsx

@@ -8,19 +8,10 @@ import { processString } from "utils"
 import "./index.less"
 
 export default (props) => {
-    let { message, data } = props.data
+    let { message } = props.data
 
     const [nsfwAccepted, setNsfwAccepted] = React.useState(false)
 
-    if (typeof data === "string") {
-        try {
-            data = JSON.parse(data)
-        } catch (error) {
-            console.error(error)
-            data = {}
-        }
-    }
-
     // parse message
     const regexs = [
         {

packages/app/src/components/PostCard/index.jsx

@@ -133,6 +133,7 @@ export default ({
         return <antd.Skeleton active />
     }
 
+    try {
         return <div
             key={data.key ?? data._id}
             id={data._id}
@@ -187,4 +188,17 @@ export default ({
                 />
             }
         </div>
+    } catch (error) {
+        console.error(error)
+
+        return <div className="postCard error">
+            <h1>
+                <Icons.AlertTriangle />
+                <span>Cannot render this post</span>
+                <span>
+                    Maybe this version of the app is outdated or is not supported yet
+                </span>
+            </h1>
+        </div>
+    }
 }