From f91af211f6c1951abaa94d3bfc36771b9c602927 Mon Sep 17 00:00:00 2001
From: Jansen Kantor <jkantor@edx.org>
Date: Mon, 20 Oct 2025 12:03:07 -0400
Subject: [PATCH] feat: add plugin slot for content iframe error component
 (#1771)

* feat: add plugin slot for content iframe error component

* style: quality

* fix: copilot suggestions
---
 .../course/sequence/Unit/ContentIFrame.jsx    |  8 +++-
 .../ContentIFrameErrorSlot/README.md          | 39 +++++++++++++++++++
 .../ContentIFrameErrorSlot/index.tsx          | 15 +++++++
 3 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 src/plugin-slots/ContentIFrameErrorSlot/README.md
 create mode 100644 src/plugin-slots/ContentIFrameErrorSlot/index.tsx

diff --git a/src/courseware/course/sequence/Unit/ContentIFrame.jsx b/src/courseware/course/sequence/Unit/ContentIFrame.jsx
index bc771825..c39ac9a9 100644
--- a/src/courseware/course/sequence/Unit/ContentIFrame.jsx
+++ b/src/courseware/course/sequence/Unit/ContentIFrame.jsx
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 
-import { ErrorPage } from '@edx/frontend-platform/react';
 import { ModalDialog } from '@openedx/paragon';
 import { ContentIFrameLoaderSlot } from '../../../../plugin-slots/ContentIFrameLoaderSlot';
+import { ContentIFrameErrorSlot } from '../../../../plugin-slots/ContentIFrameErrorSlot';
 
 import * as hooks from './hooks';
 
@@ -66,7 +66,11 @@ const ContentIFrame = ({
   return (
     <>
       {(shouldShowContent && !hasLoaded) && (
-        showError ? <ErrorPage /> : <ContentIFrameLoaderSlot courseId={courseId} loadingMessage={loadingMessage} />
+        showError ? (
+          <ContentIFrameErrorSlot courseId={courseId} />
+        ) : (
+          <ContentIFrameLoaderSlot courseId={courseId} loadingMessage={loadingMessage} />
+        )
       )}
       {shouldShowContent && (
         <div className="unit-iframe-wrapper">
diff --git a/src/plugin-slots/ContentIFrameErrorSlot/README.md b/src/plugin-slots/ContentIFrameErrorSlot/README.md
new file mode 100644
index 00000000..e3bd0b42
--- /dev/null
+++ b/src/plugin-slots/ContentIFrameErrorSlot/README.md
@@ -0,0 +1,39 @@
+# Content iFrame Error Slot
+
+### Slot ID: `org.openedx.frontend.learning.content_iframe_error.v1`
+
+### Parameters: `courseId`
+
+## Description
+
+This slot is used to replace/modify the content iframe error page.
+
+## Example
+
+The following `env.config.jsx` will replace the error page with emojis.
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.learning.content_iframe_error.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_error_page',
+            type: DIRECT_PLUGIN,
+            RenderWidget: ({courseId}) => (
+              <h1>🚨🤖💥</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
diff --git a/src/plugin-slots/ContentIFrameErrorSlot/index.tsx b/src/plugin-slots/ContentIFrameErrorSlot/index.tsx
new file mode 100644
index 00000000..1202e4a3
--- /dev/null
+++ b/src/plugin-slots/ContentIFrameErrorSlot/index.tsx
@@ -0,0 +1,15 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { ErrorPage } from '@edx/frontend-platform/react';
+
+interface Props {
+  courseId: string;
+}
+
+export const ContentIFrameErrorSlot : React.FC<Props> = ({ courseId }: Props) => (
+  <PluginSlot
+    id="org.openedx.frontend.learning.content_iframe_error.v1"
+    pluginProps={{ courseId }}
+  >
+    <ErrorPage />
+  </PluginSlot>
+);