hotfix(notion): error boundary + null guard in NotionRenderer

react-notion-x crashes (client-side white-screen) on a null or partial
recordMap, e.g. when Notion is temporarily unreachable and fetchNotionPage
returns null. Guard empty recordMaps and wrap the renderer in an error
boundary so a bad lesson degrades to a notice instead of crashing the app.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: hkirat

apps/web/components/NotionRenderer.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useMemo } from "react";
+import { Component, ReactNode, useMemo } from "react";
 import { NotionRenderer as NotionRendererLib } from "react-notion-x";
 import { useTheme } from "next-themes";
 import { useRecoilValue } from "recoil";
@@ -8,6 +8,37 @@ import { isLegacyViewMode } from "@repo/store";
 
 import CodeBlock from "./CodeBlock";
 
+function UnavailableNotice() {
+  return (
+    <div className="flex flex-col items-center justify-center gap-2 py-24 text-center">
+      <p className="text-lg font-medium">This lesson is temporarily unavailable</p>
+      <p className="text-sm text-muted-foreground">
+        We couldn&apos;t load the content right now. Please refresh in a little while.
+      </p>
+    </div>
+  );
+}
+
+// react-notion-x throws on a null/partial recordMap. An error boundary ensures a single
+// bad lesson degrades to a notice instead of white-screening the whole app.
+class NotionErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean }> {
+  constructor(props: { children: ReactNode }) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error: unknown) {
+    // eslint-disable-next-line no-console
+    console.error("[NotionRenderer] render failed:", error);
+  }
+  render() {
+    if (this.state.hasError) return <UnavailableNotice />;
+    return this.props.children;
+  }
+}
+
 // Week-4-1-647987d9b1894c54ba5c822978377910
 export const NotionRenderer = ({ recordMap }: { recordMap: any }) => {
   const { resolvedTheme } = useTheme();
@@ -23,15 +54,21 @@ export const NotionRenderer = ({ recordMap }: { recordMap: any }) => {
     []
   );
 
+  if (!recordMap?.block || Object.keys(recordMap.block).length === 0) {
+    return <UnavailableNotice />;
+  }
+
   return (
-    <NotionRendererLib
-      bodyClassName="text-base sm:text-lg"
-      className={isLegacyMode ? "" : "pt-12 dark:!bg-[#0a0a0a]"}
-      components={components}
-      darkMode={isDarkMode}
-      disableHeader
-      fullPage
-      recordMap={recordMap}
-    />
+    <NotionErrorBoundary>
+      <NotionRendererLib
+        bodyClassName="text-base sm:text-lg"
+        className={isLegacyMode ? "" : "pt-12 dark:!bg-[#0a0a0a]"}
+        components={components}
+        darkMode={isDarkMode}
+        disableHeader
+        fullPage
+        recordMap={recordMap}
+      />
+    </NotionErrorBoundary>
   );
 };