Render unsupported blocks with a warning

README.md

@@ -101,6 +101,7 @@ List of pages that implement this library.
 ## Supported Blocks
 
 Most common block types are supported. We happily accept pull requests to add support for the missing blocks.
+Unsupported block types render an explicit warning so pages do not fail silently.
 
 | Block Type        | Supported  | Notes                                                                                 |
 | ----------------- | ---------- | ------------------------------------------------------------------------------------- |

src/block.test.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { NotionRenderer } from "./renderer";
+
+test("renders a clear message for unsupported block types", () => {
+  const blockMap = {
+    unsupported: {
+      role: "reader",
+      value: {
+        id: "unsupported",
+        version: 1,
+        type: "database",
+        created_time: 0,
+        last_edited_time: 0,
+        parent_id: "",
+        parent_table: "block",
+        alive: true,
+        created_by_table: "notion_user",
+        created_by_id: "",
+        last_edited_by_table: "notion_user",
+        last_edited_by_id: ""
+      }
+    }
+  } as any;
+
+  const html = renderToStaticMarkup(<NotionRenderer blockMap={blockMap} />);
+
+  expect(html).toContain("Unsupported Notion block type: database");
+  expect(html).toContain("notion-unsupported-block");
+});

src/block.tsx

@@ -7,7 +7,6 @@ import {
   MapPageUrl,
   MapImageUrl,
   CustomBlockComponents,
-  BlockValueProp,
   CustomDecoratorComponents,
   CustomDecoratorComponentProps
 } from "./types";
@@ -516,10 +515,15 @@ export const Block: React.FC<Block> = props => {
           </details>
         );
       default:
+        const unsupportedType = block?.value?.type || "unknown";
         if (process.env.NODE_ENV !== "production") {
-          console.log("Unsupported type " + block?.value?.type);
+          console.warn("Unsupported Notion block type: " + unsupportedType);
         }
-        return <div />;
+        return (
+          <div className="notion-unsupported-block">
+            Unsupported Notion block type: {unsupportedType}
+          </div>
+        );
     }
     return null;
   };
@@ -531,12 +535,14 @@ export const Block: React.FC<Block> = props => {
     // Do not use custom component for base page block
     level !== 0
   ) {
-    const CustomComponent = customBlockComponents[blockValue?.type]!;
+    const CustomComponent = customBlockComponents[blockValue?.type]! as React.FC<
+      any
+    >;
     return (
       <CustomComponent
         renderComponent={renderComponent}
         blockMap={blockMap}
-        blockValue={blockValue as BlockValueProp<typeof blockValue.type>}
+        blockValue={blockValue}
         level={level}
       >
         {children}

src/styles.css

@@ -197,6 +197,14 @@ img.notion-page-icon-offset {
 .notion-small-text {
   font-size: 14px;
 }
+.notion-unsupported-block {
+  padding: 0.75em 1em;
+  border: 1px solid rgba(224, 62, 62, 0.35);
+  border-radius: 3px;
+  color: rgb(224, 62, 62);
+  background: rgb(251, 228, 228);
+  font-size: 0.875em;
+}
 .notion-quote {
   white-space: pre-wrap;
   word-break: break-word;