docket-image: handle broken images

pkg/grid/src/components/DocketImage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Docket } from '@urbit/api/docket';
 import cn from 'classnames';
 import { useTileColor } from '../tiles/useTileColor';
@@ -19,13 +19,20 @@ const sizeMap: Record<DocketImageSizes, string> = {
 
 export function DocketImage({ color, image, className = '', size = 'full' }: DocketImageProps) {
   const { tileColor } = useTileColor(color);
+  const [imageError, setImageError] = useState(false);
+
   return (
     <div
       className={cn('flex-none relative bg-gray-200 overflow-hidden', sizeMap[size], className)}
       style={{ backgroundColor: tileColor }}
     >
-      {image && (
+      {image && !imageError && (
-        <img className="absolute top-0 left-0 h-full w-full object-cover" src={image} alt="" />
+        <img
+          className="absolute top-0 left-0 h-full w-full object-cover"
+          src={image}
+          alt=""
+          onError={() => setImageError(true)}
+        />
       )}
     </div>
   );

pkg/interface/src/views/apps/permalinks/embed.tsx

@@ -199,6 +199,8 @@ const ClampedText = styled(Text)`
 type AppTileProps = Treaty & BoxProps;
 
 export function AppTile({ color, image, ...props }: AppTileProps) {
+  const [imageError, setImageError] = useState(false);
+
   return (
     <Box
       position="relative"
@@ -210,7 +212,7 @@ export function AppTile({ color, image, ...props }: AppTileProps) {
       bg={color || 'washedGray'}
       {...props}
     >
-      {image && (
+      {image && !imageError && (
         <Image
           src={image}
           position="absolute"
@@ -218,6 +220,7 @@ export function AppTile({ color, image, ...props }: AppTileProps) {
           left="0"
           width="100%"
           height="100%"
+          onError={() => setImageError(true)}
         />
       )}
     </Box>