え？CKEditorのwatchdog使っていないの？ヤバイよ！ヤバイよ！
watchdog（監視犬）にちなんで、
Copilotでいくつか柴犬の画像生成してみました。
柴犬は可愛いですね
かわいい！！！
私のテンション上がるから
今回はwatch(shiba)dog（監視柴犬）多めです！すみません。
どうも、あっきーです🍉
CKEditorのエディターがクラッシュする事象があったため、
watchdogの導入を決めました。
いざやってみると、
簡単かつすぐにユーザビリティの向上につながりますので、
CKEditorを利用しているならwatchdogは必須だと思いました🐶
CKEditorのwatchdogとは？
エディターはクラッシュする生き物
実装したソース以外にも、
ブラウザ、CKEditor、サードパーティのアドオンなどにも
バグは紛れ込んでします。
そのバグが原因でエディターがクラッシュすることがあります。
例えば、
「今までは正常に動いていたのにブラウザのバージョンが変わると
エディターがクラッシュするようになった！」
「あるユーザの特定の操作のときにエディターがクラッシュする！」
といったことが起こりえます。
エディターがクラッシュするとどうなるの？
エディターがクラッシュすると、
ユーザが入力した値が消えてしまうことがあります😨
一生懸命に時間をかけて考えた文章も、
エディターがクラッシュして保存できなくなることがあるんです😨
出くわしたらすごいショックですよね。
watchdogがしてくれること
エディターがクラッシュしたとき、
新しくエディターを自動的に再起動して
クラッシュ直前のコンテンツを表示してくれます✨
詳細はコチラに記載あります。
これはwatchdogを導入するしかなくないですか？
こいつやるな！
エディターのクラッシュを実演
以下の記事でCKEditorをアプリに組み込みました。
そのアプリでエディターをクラッシュさせてみます。
クラッシュの方法は
issueに上がっているバグをもとに再現させてみます。
【再現手順】
1. 画像を挿入する
2. 「↑」を押下してカーソルを画像の上に配置する
3. 全角文字を入力する
4. カーソルを3で入力した文字の後ろに配置する
5. 「Enter」を押下する
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にエラーが吐かれます。
すぐにエディターが再起動され、
その後は入力してもエラーが吐かれなくなっています。
エディターが正常に動作するようになっています。
ざっくりコード説明
① 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も検討してみてください！
最後に
弊社は一緒に働いていただける方を募集中です！
就職/転職活動中や、まだ情報収集中の方、
少しでも興味を持っていただけた方は、以下のアドレスに「note見た！」とご連絡いただけると幸いです💡
プロダクト推進部/採用担当アドレス：pdo_js@persol.co.jp
この記事が気に入ったらサポートをしてみませんか？