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

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}

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}