見出し画像

え？CKEditorのwatchdog使っていないの？ヤバイよ！ヤバイよ！

Akamine Akinori

watchdog（監視犬）にちなんで、
Copilotでいくつか柴犬の画像生成してみました。
柴犬は可愛いですね

watchdog1

かわいい！！！
私のテンション上がるから
今回はwatch(shiba)dog（監視柴犬）多めです！すみません。

どうも、あっきーです🍉

CKEditorのエディターがクラッシュする事象があったため、
watchdogの導入を決めました。

いざやってみると、
簡単かつすぐにユーザビリティの向上につながりますので、
CKEditorを利用しているならwatchdogは必須だと思いました🐶

watchdog2

CKEditorのwatchdogとは？

エディターはクラッシュする生き物

実装したソース以外にも、
ブラウザ、CKEditor、サードパーティのアドオンなどにも
バグは紛れ込んでします。
そのバグが原因でエディターがクラッシュすることがあります。

例えば、
「今までは正常に動いていたのにブラウザのバージョンが変わると
エディターがクラッシュするようになった！」
「あるユーザの特定の操作のときにエディターがクラッシュする！」
といったことが起こりえます。

エディターがクラッシュするとどうなるの？

エディターがクラッシュすると、
ユーザが入力した値が消えてしまうことがあります😨

一生懸命に時間をかけて考えた文章も、
エディターがクラッシュして保存できなくなることがあるんです😨

出くわしたらすごいショックですよね。

watchdogがしてくれること

エディターがクラッシュしたとき、
新しくエディターを自動的に再起動して
クラッシュ直前のコンテンツを表示してくれます✨

詳細はコチラに記載あります。

これはwatchdogを導入するしかなくないですか？
こいつやるな！

watchdog3

エディターのクラッシュを実演

以下の記事でCKEditorをアプリに組み込みました。
そのアプリでエディターをクラッシュさせてみます。

クラッシュの方法は
issueに上がっているバグをもとに再現させてみます。

【再現手順】
1. 画像を挿入する
2. 「↑」を押下してカーソルを画像の上に配置する
3. 全角文字を入力する
4. カーソルを3で入力した文字の後ろに配置する
5. 「Enter」を押下する

CKEditor crash

Console見るとエラーが吐かれているのが分かりますでしょうか。
またクラッシュ後は入力するたびにエラーが吐かれています。

gif画像だとわかりづらいですが、
クラッシュ後はキー入力しても反応しなくなったり、
アプリ側のプログラムからエディターの値を取得できなくなったりします。

以下のデモサイトからでも事象の再現はできます。
※ 今後再現できなくなる可能性があります。
（確認日：2024/7/12,  CKEditor5 v42.0.0）

How to "watchdogの実装"🚀

それでは、以前の記事で紹介したCKEditorのインストール方法の続きから
実装を進めてみます！

#環境
.NET8.0
Blazor WebAssembly
CKEditor5 42.0.0

まず実装したソースコード


"EditorWatchdog"をimportします。

[ckeditor.js]

import {
    EditorWatchdog,
    // 省略
} from 'ckeditor5';

次のように"BalloonEditor.create()"を"watchdog.create()"に変更します。
※ 詳細は後程説明します。

    window.CKEditorInterop = async () => {
        // .create(document.querySelector('#editor'), editorConfig);

        // ==============================
        // Watchdog Settings
        // ==============================
        const watchdog = new EditorWatchdog(BalloonEditor,{
            minimumNonErrorTimePeriod: 5000,
            crashNumberLimit: 3,
            saveInterval: 1000
        });

        watchdog.on('error', (error) => {
            console.log('error');
        });

        watchdog.on('restart', () => {
            console.log('restart');
        });

        let prevState = watchdog.state;
        watchdog.on('stateChange', () => {
            console.log('stateChange');
            const currentState = watchdog.state;

            console.log( `State changed from ${ prevState } to ${  currentState}` );
            prevState = currentState;
        });

        await watchdog
            .create(document.querySelector('#editor'), editorConfig)
            .catch((error) => handleCKEditorError(error));
    };

watchdogの挙動を確認！🚀

クラッシュしてConsoleにエラーが吐かれます。
すぐにエディターが再起動され、
その後は入力してもエラーが吐かれなくなっています。
エディターが正常に動作するようになっています。

restart after crash

ざっくりコード説明

① watchdogのインスタンスの作成
第2引数はwatchdogの設定です。※ 省略可

    const watchdog = new EditorWatchdog(BalloonEditor,{
            minimumNonErrorTimePeriod: 5000,
            crashNumberLimit: 3,
            saveInterval: 1000
        });

今回はデータが保持されることをgif画像内で表現したかったため、
saveIntervalを初期値から短い時間に変更しています。
設定内容の詳しい説明はコチラに記載があります。

② イベント発生時の処理の実装

watchdog.on("error", (error) => {
  console.log("error");
});

watchdog.on("restart", () => {
  console.log("restart");
});

let prevState = watchdog.state;
watchdog.on("stateChange", () => {
  console.log("stateChange");
  const currentState = watchdog.state;

  console.log(`State changed from ${prevState} to ${currentState}`);
  prevState = currentState;
});

　error：エディタクラッシュ時の任意の処理を実装ができる。
　restart：エディタ再起動時の任意の処理を実装ができる。
　stateChange：エディタのステータス変更時の任意の処理を実装ができる。

今回はwatchdogの動作が分かりやすくなるように
各イベントにconsole.logを仕込みました。

③ エディターインスタンスの作成

await watchdog
.create(document.querySelector('#editor'), editorConfig)
.catch((error) => handleCKEditorError(error));

ここはwatchdog導入前と引数は変更ないです。

まとめ

今回は単純な設定のエディターへのwatchdogの導入でしたので、
空行含めてたった26行ほどでできました。
難しい設定をしていたらもう少し複雑になるとは思いますが、
やらない理由は見るからないですね！

wathcdogのメリットが伝わると嬉しいです。
ぜひCKEditorを利用していたらwathcdogも検討してみてください！

watchdog4

最後に

弊社は一緒に働いていただける方を募集中です！
就職/転職活動中や、まだ情報収集中の方、
少しでも興味を持っていただけた方は、以下のアドレスに「note見た！」とご連絡いただけると幸いです💡
プロダクト推進部/採用担当アドレス：pdo_js@persol.co.jp


いいなと思ったら応援しよう！