特定の手順を踏むとページが正常に描画されない

[mattyatea]

💡 Summary

このような感じになり、リロードをしない限り正常に閲覧することができない。

🥰 Expected Behavior

正常に閲覧できる

🤬 Actual Behavior

正常に閲覧できない

📝 Steps to Reproduce

1. Google Chromeなどの 開発者ツール の パフォーマンスタブ から CPUをx6ぐらいにスロットリングする
   
2. タイムライン を開いた状態で、リロードして 通知 を連打する
   3.添付画像のようになる
   文章にするのが難しいのでGifを添付します。
   

https://mattyaski.co , https://prismisskey.space , https://misskey.io と手元の開発用サーバーで同様の問題を起こすことができます。

💻 Frontend Environment

* Model and OS of the device(s): Windows 11
* Browser: Vivaldi 6.8.3381.46
* Server URL: https://misskey.io 
* Misskey: 2024.5.0-io.1a

🛰 Backend Environment (for server admin)

* Installation Method or Hosting Service:
* Misskey:
* Node:
* PostgreSQL:
* Redis:
* OS and Architecture:

Do you want to address this bug yourself?

• Yes, I will patch the bug myself and send a pull request

[fruitriin]

スマホで見てるとTLがシュッと消えて操作不能になるやつの気がする
エラーメッセージは parentNode がうんちゃらっぽい

[fruitriin]

[fruitriin]

null に parentNode がないよ　とのこと

[mattyatea]

関係あるかわからないけどpnpm devのほうでログを見ると

nirax.ts:373 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core . 
  at <KeepAlive max=3 exclude=undefined > 
  at <RouterView> 
  at <MkStickyContainer ref="contents" class="ui-universal-contents" style= {container-type: 'inline-size'}  ... > 
  at <Universal> 
  at <AsyncComponentWrapper>

っていうログを吐いてる

[fruitriin]

KeepAliveのexcludeにundefined って入れていいんだっけ
よく覚えてないけど少し嫌な予感がする

[fruitriin]

KeepAliveのexcludeにundefined渡したら死にそう
https://ja.vuejs.org/api/built-in-components.html#keepalive

interface KeepAliveProps {
  /**
   * 指定された場合、`include` でマッチした名前の
   * コンポーネントのみがキャッシュされます。
   */
  include?: MatchPattern
  /**
   * `exclude` でマッチした名前のコンポーネントは
   * キャッシュされません。
   */
  exclude?: MatchPattern
  /**
   * キャッシュするコンポーネントインスタンスの最大数。
   */
  max?: number | string
}

type MatchPattern = string | RegExp | (string | RegExp)[]

[kakkokari-gtyih]

? だから死なないとは思うけど（propsが無い判定されるので）

[KisaragiEffective]

exactOptionalPropertyTypesが無効なので意図的にundefinedを渡すことができる

[kakkokari-gtyih]

excludeの値がないときにプロパティごと消すやつを実装してみたけど、実装してもして無くてもこのバグは現在手元で再現できてない

[mattyatea]

https://soranakiproject.com/notes/9v9r1tzgya
https://soranakiproject.com/notes/9vihow2ms7
私以外のユーザーからの報告で気がついたバグだったりします👀

[kakkokari-gtyih]

あーいけた
（ある種のグリッチっぽいな）

[kakkokari-gtyih]

vuejs/core#6463

[fruitriin]

iPhoneのSafariで頻発する、MacのSafariでも稀に起きることがあるからメモリ周りをスロットリングすると再現するかも

[MineCake147E]

そういえばAndroidのFirefoxでも開いてすぐ通知ページに移動して戻って来るとこのようになりますね...

[Sayamame-beans]

iPhoneのSafariで頻発する、MacのSafariでも稀に起きることがあるからメモリ周りをスロットリングすると再現するかも

(私の環境において)iPhoneでスワイプして前のページに戻ったりすると高頻度でフリーズしてMisskeyが操作不能になる(絵文字のアニメーションなども止まる)挙動があるなと思ってたんですが、確かにこれかもしれません…

[mattyatea]

vuejs/core#10899
これな気がする
開発環境でvueのバージョンを最新にしたら治った気がする

[mattyatea]

少なくとも自分の環境では Vueのバージョンを上げる ことで解決できた気がする

[kakkokari-gtyih]

ならUpdate depsは2週間前程度にdevelopに入ってるので多分治ってるんじゃないかしら

[kakkokari-gtyih]

• Misskey v2024.5.0にはVue v3.4.26が入っている
• Vue v3.4.28以降に10899のfixが入っている
• Vue v3.4.31が入る次期リリースでは修正済みとみてよさそう

[kakkokari-gtyih]

連打しなくとも画面が表示されない現象を確認（このissueとは別問題の可能性あり）

1. トップページを読み込む（トップページでMisskeyを起動する）
2. 設定に飛ぶ
3. 設定のページをいくつか遷移する（3回目くらいでエラーになる）

以下のdevelopに近い環境・開発環境の両方で確認

• 0key.dev
• misskey.systems

[kakkokari-gtyih]

ページキャッシュ数の限界にぶち当たったら起こるっぽい

[Vue warn]: Unhandled error during execution of render function 
  at <KeepAlive max=3 exclude=undefined > 
  at <RouterView> 
  at <MkSpacer contentMax=900 marginMin=20 marginMax=32 > 
  at <MkStickyContainer> 
  at <Index key="/settings{}" > 
  at <AsyncComponentWrapper key="/settings{}" > 
  at <KeepAlive max=3 exclude=undefined > 
  at <RouterView> 
  at <MkStickyContainer ref="contents" class="ui-universal-contents" style= {container-type: 'inline-size'}  ... > 
  at <Universal> 
  at <AsyncComponentWrapper>


Promise.then (async)		
navigate	@	nirax.ts:372
push	@	nirax.ts:410
push	@	main.ts:72
nav	@	MkA.vue:102

[mattyatea]

連打って書いてるのは再現が一番しやすかったのが連打だったから書いてるだけかも

[kakkokari-gtyih]

@mattyatea vueのバージョン上げて、かつ#14202 マージ後のdevelopで試してもまだ再現する？

[kakkokari-gtyih]

再現する報告あり

[kakkokari-gtyih]

関係するかもしれないissue

vuejs/core#11344

[mattyatea]

今最新コミットで確かめましたが再現できました

[kakkokari-gtyih]

これ結局何なんだろう・・・

[tai-cha]

関連するかわからないけど高速じゃなくてもコントロールパネルと設定を交互に遷移すると表示が狂うと聞いた

[kakkokari-gtyih]

ゔえのバグ踏んだ可能性がある
（KeepAliveにmaxを設定した状態だと、maxを超過すると vuejs/core#10899 が再発するのを確認した）

https://play.vuejs.org/#__PROD__eNrNVN9P2zAQ/ldO2QNFKkkL7CUKlVrEwza0ocEbQZNJLtSQ2JHtpK2q/u87O07WSowh7YWXyLn77rvP98PbYF7XYdtgEAeJzhSvDWg0TT1LBa9qqQxsQWEBOyiUrOCIoEeD61JW9dw7wsj9Wa5DwOIAsPCAVGRS6A5xzelwAfepgI5y3J8WdHrooVmjFAqLJEGjybEliSKYhnC74iZbgpE+4SMWUqGXp1DLskUdpoJudscrlI0ZjY7hYgZbm8jzhi0rGyT2aSp2Y5hOJkOK0yHFI8te+jzzMTCRw0Y2kDFBZUMwS2bog0CKDXFqkIWXwUiQkAZyruuSbTB/t56J03Pe6UmirkvUH/oxWBGZQfoDSHLeugMdS/aI5Szhom5I0KbGizRQLOcyDaA9qWSOJVl8JrLFLhmZJvQTzWAOSdRx/C/htCNc7BF6ym+I9bzkLUJcsbWHxrjOyia3kY3IseAC8zTwKijottE1UuEgNl3lOs0DgCAZ1VsKOykx1+TuR+zeq3sgeBINqEGQC+4rCp8KVpa23XvU5F9OZ9eS7i2ewjBMIvrdC44O+tGZesF9IaPh2l3Toq5rB7HB2Il2y/TKYrIV4wYEruCGNotrHI38kLsh2psqbx7DqZ2ed4/Ppd+0oUYxzP8l1i32BxG7eEus0bScBX8Kn7UUJNjtHI0uhfMS1Y/acHpu0iDuttH6aBLk6quzGdWge55czBKzl1fsz3ptbWlwQ3dC1WIaDD7D1BPShlj31e13XNN5cNIeNSWh33D+tFVqrMYOtqA1Idl7OKf2i3uAaUzv9NWaniLdX8oKtcidw6cBdc22729X/yP3LDx3cfQaURV/tagsJxXwLPwcTk5YWS9ZeBbsfgOrAROY

[samunohito]

バージョンを下げれば発生しなくなったりとかしないですかね…？
特定バージョンまで落として発生しないのであれば一旦そこまで落として、↑がfixされたら引き上げるとか

[kakkokari-gtyih]

バージョンを下げれば発生しなくなったりとかしないですかね…？ 特定バージョンまで落として発生しないのであれば一旦そこまで落として、↑がfixされたら引き上げるとか

• KeepAliveにmaxをつけない（重くなりそう）
• KeepAliveを一時的に外す（ページキャッシュが効かなくなる）

のどちらかで解消しそうではある

[syuilo]

ゔえ

[kakkokari-gtyih]

一応バグとPRを見た感じ：

asyncなコンポーネントが解決せずにキャッシュされたときにそれ（虚無のキャッシュ）を読み出そうとしてバグってるみたいなので、リソース制限でこれが再現しやすくなるというのはリソース制限でコンポーネントの解決が遅くなることが原因と思われる

[kakkokari-gtyih]

vuejs/core#11496 がマージされたのでVueのバージョンが上がったらVueだけ更新してリリースしてしまいたい

[kakkokari-gtyih]

Vue v3.4.37が出たので、それ適用して治るかどうかためしてほしい（Version bumpのプルリクエストはもう立てておいた）