Duplicated editors after crash with watchdog #601

Activity

1. FilipTokarski

   added

   type:bug

   squad:coreIssue to be handled by the Core team.Issue to be handled by the Core team.

   support:2An issue reported by a commercially licensed client.An issue reported by a commercially licensed client.

   on Jun 13, 2025
2. Mati365

   self-assigned this

   on Jun 16, 2025
3. Mati365 commented on Jun 16, 2025

   

   Mati365

   on Jun 16, 2025

   Last edited by Mati365

   Member

   More actions

   I briefly checked this case, and it doesn't seem directly related to the integration itself. The problem is that the editor doesn't properly destroy itself, and some leftover elements stay in the DOM.

   In this specific case, the editor changes its state from isFocused = true to isFocused = false, which triggers a change event and then throws an error about an invalid element.

   While we can't fix every possible exception that might happen during the destroy() process, we can at least detach unused editors from the DOM. They'll still stay in memory, but at least they won't be duplicated on the frontend.
4. Mati365 commented on Jun 17, 2025

   

   Mati365

   on Jun 17, 2025

   Last edited by Mati365

   Member

   More actions

   I managed to track down what’s actually going wrong here.

   The problem occurs when an invalid element is inserted into the editor model - something that isn’t registered in the schema. Interestingly, the editor doesn’t crash immediately. It stays mounted and looks fine at first, but it’s already in a broken state under the hood.

   The real crash happens later, typically during some internal interaction - for example, when the editor tries to update its state, or during destruction. At that point, it fires a change event, and because the model contains an invalid element, that event throws. This breaks the rest of the flow.

   If the crash happens during destruction:

   • onAfterDestroy is never called,
   • the editor’s UI is left behind in the DOM,
   • and Watchdog tries to restart the editor using the same invalid model,
   • which causes an immediate crash in the new instance too.

   Workaround

   What worked for me was wrapping the editor in a React Error Boundary and forcing a full remount of the component when a crash is caught. This way, even if the editor doesn’t clean up correctly, React unmounts everything and gives me a clean slate.

   Here’s a minimal example:

   // ...
   const [revision, setRevision] = useState(0);
   const onUpdateRevision = () => setRevision(prev => prev + 1);
   
   //..
   const dataRef = useRef('');
   const onHandleData = (...) => {
       dataRef.current = ...;
   };
   
   <CKEErrorBoundary onError={onUpdateRevision}>
       <CKEditor5
           key={revision}
           onChange={onHandleData}
           config={{ ...config, initialData: dataRef.current }}
       />
   </CKEErrorBoundary>

   This makes the editor recoverable, using the last known good data, and React handles cleanup of any leftover DOM from the broken instance.