Return visible errors for unsupported Notion content

src/block.tsx

@@ -17,6 +17,22 @@ import PageIcon from "./components/page-icon";
 import PageHeader from "./components/page-header";
 import { classNames, getTextContent, getListNumber } from "./utils";
 
+const unsupportedBlockTypeMessages: Record<string, string> = {
+  checkbox:
+    "This Notion document includes a Checkbox property, which react-notion cannot import. Please remove the Checkbox to render this page.",
+  collection_view:
+    "This Notion document includes a Database, which react-notion cannot import. Please remove the Database to render this page."
+};
+
+const UnsupportedBlock: React.FC<{ type?: string }> = ({ type }) => {
+  const message = type
+    ? unsupportedBlockTypeMessages[type] ||
+      `This Notion document includes an unsupported ${type} block, which react-notion cannot import. Please remove it to render this page.`
+    : "This Notion document includes unsupported content, which react-notion cannot import.";
+
+  return <div className="notion-error">{message}</div>;
+};
+
 export const createRenderChildText = (
   customDecoratorComponents?: CustomDecoratorComponents
 ) => (properties: DecorationType[]) => {
@@ -360,7 +376,9 @@ export const Block: React.FC<Block> = props => {
           </blockquote>
         );
       case "collection_view":
-        if (!block) return null;
+        if (!block?.collection) {
+          return <UnsupportedBlock type={blockValue.type} />;
+        }
 
         const collectionView = block?.collection?.types[0];
 
@@ -519,7 +537,7 @@ export const Block: React.FC<Block> = props => {
         if (process.env.NODE_ENV !== "production") {
           console.log("Unsupported type " + block?.value?.type);
         }
-        return <div />;
+        return <UnsupportedBlock type={block?.value?.type} />;
     }
     return null;
   };

src/styles.css

@@ -339,6 +339,15 @@ img.notion-page-icon {
   padding: 3px 2px;
 }
 
+.notion-error {
+  background: rgba(235, 87, 87, 0.08);
+  border: 1px solid rgba(235, 87, 87, 0.35);
+  border-radius: 3px;
+  color: #a61b1b;
+  margin: 4px 0;
+  padding: 8px 10px;
+}
+
 .notion .notion-code {
   font-size: 85%;
 }