Fix MessagePopover key handling and render behavior

src/api/ChatButtons.tsx

@@ -104,7 +104,7 @@ function VencordChatBarButtons(props: ChatBarProps) {
             {Array.from(ChatBarButtonMap)
                 .filter(([key]) => chatBarButtons[key]?.enabled !== false)
                 .map(([key, { render: Button }]) => (
-                    <ErrorBoundary noop key={key} onError={e => logger.error(`Failed to render ${key}`, e.error)}>
+                    <ErrorBoundary noop key={key} message={`Failed to render chat button ${key}`}>
                         <Button {...props} isMainChat={analyticsName === "normal"} isAnyChat={["normal", "sidebar"].includes(analyticsName)} />
                     </ErrorBoundary>
                 ))}

src/api/MessagePopover.tsx

@@ -64,6 +64,19 @@ export function removeMessagePopoverButton(identifier: string) {
     MessagePopoverButtonMap.delete(identifier);
 }
 
+function VencordPopoverButton(props: {
+    Component: React.ComponentType<MessagePopoverButtonItem>;
+    message: Message;
+    render: MessagePopoverButtonFactory;
+}) {
+    const { Component, message, render } = props;
+    const item = render(message);
+
+    if (!item) return null;
+
+    return <Component {...item} />;
+}
+
 function VencordPopoverButtons(props: { Component: React.ComponentType<MessagePopoverButtonItem>, message: Message; }) {
     const { Component, message } = props;
 
@@ -72,20 +85,11 @@ function VencordPopoverButtons(props: { Component: React.ComponentType<MessagePo
     const elements = Array.from(MessagePopoverButtonMap.entries())
         .filter(([key]) => messagePopoverButtons[key]?.enabled !== false)
         .map(([key, { render }]) => {
-            try {
-                // FIXME: this should use proper React to ensure hooks work
-                const item = render(message);
-                if (!item) return null;
-
-                return (
-                    <ErrorBoundary noop>
-                        <Component key={key} {...item} />
-                    </ErrorBoundary>
-                );
-            } catch (err) {
-                logger.error(`[${key}]`, err);
-                return null;
-            }
+            return (
+                <ErrorBoundary noop key={key} message={`Failed to render message popover button ${key}`}>
+                    <VencordPopoverButton Component={Component} message={message} render={render} />
+                </ErrorBoundary>
+            );
         });
 
     return <>{elements}</>;