プロジェクトホームを開くとエラーが出る2024/4/14→ページ遷移で#text-inputが消えるせい
まとめ
このことによって#text-inputが存在することを仮定している各種のUserScriptやサードパーティツールが影響を受けている
エラーは出ないがバグる
リロードすると治る
動かないときはリロードするとなおる
https://gyazo.com/1168cefc7b7255c4d971910ca210b64c
ヘンなエラーが出てる
あと改行が2行になってる
なんのUserScriptのしわざだ
認知しているけど、問題なく使えているため修正するモチベがいまのところないtakker.icon
あとscrapbubble
リロードで直るので直すモチベがないtakker.icon
ただ原因がわからないのが気になる
上のスクショによると、#editorがないタイミングがあるのが原因だろうか
しかしtakker.iconのコンソールには、#editorのエラーが発生しない
にも関わらず動かなくなる
keep-indentのせいぽいな
わからないけど治った...
なおってない...
keep-indent初耳takker.icon
どこの部品の名前だろう
スクボのHTMLからは見つからなかった
ああ、これは上の/foldrr/foldrr.iconさんのUserScriptですwogikaze.icon(気づかなかった)
検証中wogikaze.icon
エラーは出ないが動かなくなる
これ一番謎takker.icon
エラーがでて動かなくなる
https://gyazo.com/987c0a2bdbf98adcf03cbd595bcfe761
予想
scrapboxのレンダリング方式が変わって、#text-inputが存在しないケースが発生した
2024-04-17 15:15:30 検証中
#text-inputのtype guard周りにブレークポイントを置いた
とりあえずこれでデバッガーが立ち上がるまで待つ
まだ発生条件を絞り込めていないので、そこから調べるしかない
15:17:20 こういうときに限ってエラーが出ないんだよな~~
でてくれ~
index.js
https://gyazo.com/c095944db0b6c5e2b90cf74e9fc8ce92
これは遭遇したことないかもtakker.icon
2024-04-17 15:21:21 エラーの原因わかった!!!!!!!!!!!!!!!takker.icon*5
わかったこと
以前はdisplay: none;されるだけだった
#text-inputは#editorの中にあるので、これらも巻き添えになって消える
つまり、バグ発生のタイミングは「編集画面以外にアクセスする」こと
バグ発生の仕組み
このコードは常に#text-inputが存在する前提でコードを組んでいる
そのため、存在しない場合はエラーを吐いてしまう
ただし、偶然にもエラーを吐いてもコードが止まらないような設計になっていたらしく、エラーを吐く以外の実害はなかった
上に同じ
これを考慮していないコードはかなり有りそうtakker.icon
document.getElementById("text-input").addEventListener系は全部修正が必要だと思っていい
2024-04-17 16:08:01 修正済み
#editor内にdivを作り、その中でPreactを動かす仕組みになっている
そのため、#editorの巻き添えを食らってUIが消えてしまっていた
エラーでrenderingが止まったわけではなかったので、原因に気づきにくかったtakker.icon
2024-05-03 14:25:16 修正完了!
対策
#text-inputが存在しない可能性を考慮してコードを書く
event listenerを登録したいときは、ページ遷移するたびに登録し直す
#editorになにかDOMを生やすときは、ページ遷移するたびに生やし直す
今日(2024-04-17)はもう時間がないので、明日やります
しばしお待ちを
大偉業.iconandありがとうイドバタニシの茶2.iconwogikaze.icon