From 4b5718f6e39e5d9658c62ddd9dfc15b85ebde565 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@ghost.org>
Date: Thu, 7 Dec 2023 14:11:07 +0000
Subject: [PATCH] Added error reporting when editor instances fail to load
 (#19284)

no issue

- recently we introduced code that broke the editor in older versions of
Safari but we weren't alerted to it until we started getting customer
reports
- we have an `ErrorBoundary` around the React editor components but this
wasn't reporting the error anywhere and simply showed an error message
- updated the boundary to report to Sentry when configured so we can
notice and fix any editor-breaking issues faster
---
 .../app/components/koenig-lexical-editor-input.js  | 14 +++++++++++++-
 .../admin/app/components/koenig-lexical-editor.js  | 14 +++++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/ghost/admin/app/components/koenig-lexical-editor-input.js b/ghost/admin/app/components/koenig-lexical-editor-input.js
index 950859846c..526b6cd34b 100644
--- a/ghost/admin/app/components/koenig-lexical-editor-input.js
+++ b/ghost/admin/app/components/koenig-lexical-editor-input.js
@@ -14,6 +14,18 @@ class ErrorHandler extends React.Component {
         return {hasError: true};
     }
 
+    componentDidCatch(error) {
+        if (this.props.config.sentry_dsn) {
+            Sentry.captureException(error, {
+                tags: {
+                    lexical: true
+                }
+            });
+        }
+
+        console.error(error, errorInfo); // eslint-disable-line
+    }
+
     render() {
         if (this.state.hasError) {
             return (
@@ -82,7 +94,7 @@ export default class KoenigLexicalEditorInput extends Component {
     ReactComponent = (props) => {
         return (
             <div className={['koenig-react-editor', this.args.className].filter(Boolean).join(' ')}>
-                <ErrorHandler>
+                <ErrorHandler config={this.config}>
                     <Suspense fallback={<p className="koenig-react-editor-loading">Loading editor...</p>}>
                         <KoenigComposer
                             editorResource={this.editorResource}
diff --git a/ghost/admin/app/components/koenig-lexical-editor.js b/ghost/admin/app/components/koenig-lexical-editor.js
index de54ccc3f7..5c2f26c4d4 100644
--- a/ghost/admin/app/components/koenig-lexical-editor.js
+++ b/ghost/admin/app/components/koenig-lexical-editor.js
@@ -49,6 +49,18 @@ class ErrorHandler extends React.Component {
         return {hasError: true};
     }
 
+    componentDidCatch(error) {
+        if (this.props.config.sentry_dsn) {
+            Sentry.captureException(error, {
+                tags: {
+                    lexical: true
+                }
+            });
+        }
+
+        console.error(error, errorInfo); // eslint-disable-line
+    }
+
     render() {
         if (this.state.hasError) {
             return (
@@ -513,7 +525,7 @@ export default class KoenigLexicalEditor extends Component {
 
         return (
             <div className={['koenig-react-editor', 'koenig-lexical', this.args.className].filter(Boolean).join(' ')}>
-                <ErrorHandler>
+                <ErrorHandler config={this.config}>
                     <Suspense fallback={<p className="koenig-react-editor-loading">Loading editor...</p>}>
                         <KoenigComposer
                             editorResource={this.editorResource}