Misskey: iOS/macOS Safariでpost-formやノートメニューをたまに表示できない

[tamaina]

事象

どういうわけか、storeにpostFormActionsやnoteActionsが存在しないことがある。

再現条件が不明。

バージョン

Safari

13.1.1 (15609.2.9.1.2)

v14だと普通に動くらしい*

Misskey

Misskey v12.41.0 ~2

[tamaina]

this.$refs.text.focusがundefinedらしい

[syuilo]

Misskeyのバージョンいくつ？

[tamaina]

12.41.1…そういえばアプデしてないわ

[tamaina]

でもpost-formは.2にアプデしても変わらなさそう…？

というか原因箇所の目星はついてる

https://github.com/syuilo/misskey/blob/develop/src/client/components/post-form.vue#L330

[tamaina]

↑の箇所をnextTickにしたらやっぱり直った

[tamaina]

$store.state.postFormActions.lengthがないといわれるエラーも一緒に出ていたように記憶しているので、それが原因かもしれない

[syuilo]

ぽい
https://mewl.me/notes/817342746c276044f14274bd

[tamaina]

私のVueレベルが低いのでどうして$store.state.postFormActionsが虚無なのかよくわからない

[syuilo]

私のVueレベルが低いのでどうして$store.state.postFormActionsが虚無なのかよくわからない

私もこれで頭抱えてる

[syuilo]

というか再現条件もよくわからない

[tamaina]

だからSafari固有のバグなのか()

[syuilo]

謎すぎてもはやVue側のバグを疑うレベル

[rinsuki]

iOS 14.0 b2 / Safari Technology Preview (Release 109 (Safari 14.0, WebKit 15610.1.17.2))だと普通に動く
Safari バージョン13.1.1 (15609.2.9.1.2) はだめ

[syuilo]

特定のブラウザバージョンでのみ発生する現象ということ？

[tamaina]

原因、たぶんこれ これも違った
https://github.com/syuilo/misskey/pull/6484

[tkmrgit]

12.41.0までは全く報告されていなかった/起きなかった気がするのだが、もしかしてPolyfill関連なのでは...?

[rinsuki]

polyfill消して早くなったから間に合わなくなった説🥴

[tkmrgit]

Can I use... Support tables for HTML5, CSS3, etc
https://caniuse.com/#feat=resizeobserver

変更点調べたらResizeObserverが出てきたので調べてみましたがSafari側の実装に問題ありが正しいのかも。
一応サポートされていないとされているiOS 12.4.1/12.4.6で問題なくメニューを開くことが確認できました。

[Xeltica]

古い iOS で問題なく動くのであれば、iOSではとりあえずResizeObserverを使用するコードを無効化してしまうのが良いのかな:thinking:

[syuilo]

12.41.0までは全く報告されていなかった/起きなかった気がするのだが、もしかしてPolyfill関連なのでは...?

今回のエラーは、プラグインシステムに関連するプロパティが無いというエラー。だからプラグインシステムが原因(なぜそうなるのかは謎)
Polyfillは無関係

[rinsuki]

まさかのSafari固有バグではなかった
macOS 10.15.5 + Firefox 78.0.2
でも Safari ほど確実に再現はしない

[syuilo]

undefinedになるのはどの時点からなのか(ページ読み込み直後からとか、それ以降からとか)とか、undefinedになったときその他のプロパティは有るのかなども調べると何か手掛かりになりそう

[syuilo]

ちょっと外出するので帰ったらやる…と思ったけど私の環境だと再現しないんだよな
iPhoneだとたまに再現するけどiPhoneでデバッグは困難

[rinsuki]

Safariだと this.$refs.text.focus() でコケる時は this.$refs が空っぽい

[rinsuki]

[rinsuki]

その時の this.$el はこう

[rinsuki]

components に dynamic import を使ってる場合それが終わらないと $refs が使えないらしい?
ref. https://forum.vuejs.org/t/refs-is-undefined-in-mounted/1700/4

[syuilo]

$el や $refs が無いのは $store.state.postFormActions がundefinedになってエラーになってるからコンポーネントのマウント自体が失敗してるからとかではなく？

[rinsuki]

っぽいな

[rinsuki]

何らかの理由で this.$store.state.postFormActions がundefinedなことがある (なんで?)

そもそもこのエラーが出る状態だと永続化されているやつしか this.$store.state に存在しない?

https://github.com/syuilo/misskey/blob/aae9bc4cf4c583b4d675391fe3da2fa53b7f18e0/src/client/store.ts#L92-L106

[rinsuki]

本来はこうなるはず

[rinsuki]

うしろむきな解決案として https://github.com/syuilo/misskey/commit/d327bb8ff1b8765e92d6815d244e74f0793f6157 で上げられた vuex のバージョンを下げるなどがある

[rinsuki]

とはいったものの https://github.com/vuejs/vuex/compare/v3.4.0...v3.5.1 対した変更はないな…

[syuilo]

お手上げ🙌

[syuilo]

せめてこのプロパティが消える現象がいつから起きていたのかが分かればなぁ

[syuilo]

実際は昔からこの現象が起きてて、たまたま最近プラグインシステム実装したおかげで(？)顕在化したという可能性があるんだよな

[syuilo]

なんもわからん

[syuilo]

Chrome拡張機能のVueDevToolには、Vuexの状態がどのように変わってきたかを履歴で見れる機能あるんだけど、それ見て何か分かったりしないかな

[syuilo]

あと、VuexとVuexPersistenceのソースコードを読んでみて最初に定義したプロパティが消えてしまうようなことが起こり得る実装になってないかも確認したい

[syuilo]

しゅいろPCでは一回も再現しないのつらい

[syuilo]

@rinsuki 再現するコツとかある？

キャッシュ有効/無効にしたりネットワーク速度激遅にしても再現しないからそれらは無関係っぽいけど...

[rinsuki]

全くわかってない、謎

[tamaina]

@syuilo
検索ボックスってやっぱり関係ないかしら？

[syuilo]

@syuilo
検索ボックスってやっぱり関係ないかしら？

はっきりしたことは何も言えないけどさすがにCSSが影響するとは考えにくい

[syuilo]

@rinsuki ioじゃなく、ローカルの開発環境とかでも再現しました？

[rinsuki]

io以外では試してない

[syuilo]

なるほど

[syuilo]

ioは広告が入ってたりするからそれらが不具合を引き起こしてる可能性もゼロではないな...

[syuilo]

まぁほぼゼロだとは思うけど

[syuilo]

再現しないことにはなかなか調査も難しい

[tamaina]

他の小規模インスタンスやローカルでも不具合を確認してます

[syuilo]

なるほどなるほど

[tamaina]

たまに普通に動くのが厄介

[syuilo]

あーずっとChromeでテストしてたけどrinsukiが使ってたのFirefoxか

[syuilo]

でもアレか 仮にFirefoxで再現できたとしてもVueDevToolが使えないからあまり調査の役には立たないか

[syuilo]

お手上げ🙌

[tamaina]

いや、（macは知らないけど）Firefoxアドオンある

[syuilo]

あらそうなのか

[tamaina]

私のmacのFirefoxで再現しませんでした…

[tamaina]

ストアのdeviceUser/setTlが原因かも？

[tamaina]

これ使ってみた

https://github.com/vuejs/vue-devtools/tree/dev/packages/shell-electron

[tamaina]

発生条件として、タイムラインの切り替えをするとストアがだめになることが判明した（Safari）

[tamaina]

[tamaina]

つまり、永続化するべきデータを変更するとストアがだめになる…？

[syuilo]

ふむふむ
こっちだとTL切り替えても再現しない

[tamaina]

@syuilo Safari? FIrefox?

[syuilo]

ChromeなのでFireFoxでもやってみる

[syuilo]

Firefoxでやっても再現しなかった

[syuilo]

@tamaina aqzの環境だとTL切り替えると100%再現する？

[syuilo]

setTl 見ても単に state.tl にオブジェクトを代入してるに過ぎないので謎

[tamaina]

@syuilo iOS/macOS 最新develop+デバッグ用コードで、SafariでTL切り替えると100%ダメになります

あと、ウィジェットを挿入してもダメになったのでpersistedstateの問題の可能性が高くなった

[syuilo]

@tamaina よかったら vuex-persistedstate を削除した状態で再現するか確認してもらえると嬉しい

import createPersistedState from 'vuex-persistedstate';

と

    plugins: [createPersistedState({
        paths: ['i', 'device', 'deviceUser', 'settings', 'instance']
    })],

を削除すればおK

[syuilo]

ありがとう🥰🥰🥰
vuex-persistedstateが犯人でよさそう

[syuilo]

このあたり怪しい
https://github.com/robinvdvleuten/vuex-persistedstate/blob/ff2e71119955a5253e60c998858cab59c8e3f6a6/src/index.ts#L57-L63

[syuilo]

['i', 'device', 'deviceUser', 'settings', 'instance']

で列挙した以外のプロパティがすべて消えることを考えると、reducerの処理が何らかの原因でstateにそのまま上書きされている(?)みたいな感じだろうなぁ

[tamaina]

@syuilo persistedstate消したら直りました（キャッシュ削除して一応再確認したけどやっぱりそんな感じだった）

[syuilo]

これ以上詳細に調査するにはやっぱり手元で再現しないと...

[tamaina]

reducerはオプションで外部から指定できるっぽい

[syuilo]

デフォルトのreducerでもコード的には問題なさそうに見えるから謎

[tamaina]

reducerがどうしたところでストアのstateには影響しないし、persistedstateのコードに問題はないように見える

[tamaina]

アプデしたWebpackのせいとかは？

[tamaina]

あ〜、報告忘れてた

persistedstateのオプションにreducer: (state, paths) => stateを追加したところ、ちゃんと動くようになりましたが全てのstateがlocalStorage.vuexに記録されました

[tamaina]

Webpackの問題だったらSafariだけバグが起きるってことは考えにくいか…

オブジェクトの参照が入れ替わってるとかそういうことなんだろうけど……

[tamaina]

localStorage.vuexにはちゃんとreducedなデータが入っているので入れ替わってはないっぽい

[syuilo]

ついに原因が分かった

[syuilo]

再現条件

1. 複数のタブでMisskeyを開いている状態で、
2. 片方でlocalStorageの更新を行うと、
3. もう片方でstateが消える

原因

Misskeyでは、複数のタブ間でlocalStorageに永続化されたVuexの状態を同期する仕組みがあり、その処理にバグがあった。具体的には、localStorageに更新があると、永続化されないstateまでlocalStorageの情報で上書きされ、結果的に永続化されないstateは消えることになる。
当該箇所: https://github.com/syuilo/misskey/blob/b6c3399abeab100f0991f5c77bc47919fdcbfaad/src/client/init.ts#L106-L112

解決策

store.replaceState(JSON.parse(localStorage['vuex']));

の部分を、まるごと上書きではなく現在のstateとマージするようなコードにすればよい。

[syuilo]

「ひとつのタブしか開いていないが、この現象が発生する」という報告もチラホラあるな
これについてはよくわからないが、いずれにせよ上に挙げた当該コードの修正で直るはず