OGP Builderが失敗している

hrsano645 commented 3 years ago

起こっている問題 / The Problem

最近のActionsのOGP Builderでbuildが失敗して、画像が生成されない
- https://github.com/hiroyuki-ichikawa/fujicity_covid19/runs/1796222195?check_suite_focus=true
静岡県側でも同様のbuild失敗をしている
- https://github.com/aktnk/covid19/issues/67

スクリーンショット / Screenshot

期待する見せ方・挙動 / Expected Behavior

OGP Builderを動作させてOGPで利用されるカードの画像を生成できるようにする

起こっている問題の再現手段 / Steps to Reproduce

https://github.com/hiroyuki-ichikawa/fujicity_covid19/runs/1796222195?check_suite_focus=true

動作環境・ブラウザ / Environment

GitHub Acitions

hrsano645 commented 3 years ago

富士市版のリポジトリとUbuntu18.04で試していますが、該当箇所のエラーはどうもogp向けページのレンダリング前にタイムアウトしてしまうようです。

解決できるか引き続き調べます。

hrsano645 commented 3 years ago

回避策ですが、取得するためにアクセスするパスを減らすとうまく行くかもしれません。自前の環境ではエラー出さずに通りました。

https://github.com/hiroyuki-ichikawa/fujicity_covid19/blob/master/ui-test/ogp_screenshot.py#L9

PATHS = {
    "/?dummy": (959, 500),
    #"/cards/details-of-confirmed-cases": (959, 500),
    "/cards/number-of-confirmed-cases": (959, 500),
    "/cards/attributes-of-confirmed-cases": (959, 480),
    # "/cards/number-of-tested": (959, 540),
    # "/cards/number-of-reports-to-covid19-telephone-advisory-center": (959, 500),
    # "/cards/number-of-reports-to-covid19-consultation-desk": (959, 500),
    # "/cards/predicted-number-of-toei-subway-passengers": (959, 750),
    # "/cards/agency": (959, 730),
    # "/cards/details-of-tested-cases": (959, 500),
    # "/cards/number-of-inspection-persons": (959, 600),
    # "/cards/shinjuku-visitors": (959, 820),
    # "/cards/chiyoda-visitors": (959, 820),
    # "/cards/shinjuku-st-heatmap": (959, 600),
    # "/cards/tokyo-st-heatmap": (959, 600)
}

環境の性能依存になってしまうようなので、GitHub Actions側では失敗するかもしれません。

hrsano645 commented 3 years ago

回避策でPR作ってみます。

hrsano645 commented 3 years ago

masterへのmerge結果。やっぱり駄目っぽい🙄 https://github.com/hiroyuki-ichikawa/fujicity_covid19/runs/1811591937?check_suite_focus=true

hrsano645 commented 3 years ago

masterへのmerge結果。やっぱり駄目っぽい🙄 https://github.com/hiroyuki-ichikawa/fujicity_covid19/runs/1811591937?check_suite_focus=true

間違えました。masterへはまだmergeされていないので、dev版の現状をmergeすれば問題ないかもしれません。

hrsano645 commented 3 years ago

dev版の結果は今のところmasterへmerge済みでしたので、やはり変更しても状況変わらずのようです。時間かかりすぎの問題かもしれないので、タイムアウトの問題と、Actions側の処理の問題双方を調査続けてみます。

hrsano645 commented 3 years ago

メモ書きレベルですが

エラーが起こるというよりは、サイトの読み込み自体は問題ない
selenium.common.exceptions.TimeoutException: Message: timeout: Timed out receiving message from renderer はレンダラーからのメッセージ受信待ちでタイムアウト
- chromedriver -> google-chrome側がレンダリングしているので、chromeのこと
ogpの画像を作る専用のページに行くと、特にグラフがあるものはレンダリングがかなり遅くなってる
グラフ描写が重すぎるのが直接的な問題かもしれません
静岡県/富士市版でのコードの変更による問題なのか、ベースにしてる東京都の問題かはまだわかってないです。

開発版だとほとんど問題はなさそうなので取り除くのには苦労するかも

hrsano645 commented 3 years ago

回避策としてはまだ試してませんが、python-selenium のWrebDriverWaitクラスを使って、レンダリングされた後にオブジェクトが取得できるかを待てるように設定すればよいかもしれません。

根本的にはグラフのレンダリングが遅いので、パフォーマンス問題になりそうです。

hrsano645 commented 3 years ago

[x] 東京都版は描写遅くないので、東京都側とだいたい同じ構造のURLで試す
[ ] 東京都側のコードと改善をトレースできるか調べる

hrsano645 commented 3 years ago

比較してみました。　東京都と静岡県を続けて画像を並べます

新型コロナ相談件数

東京都

レンダリング時間: 1.17s

静岡県

レンダリング時間: 28.16s

検査実施

東京都

レンダリング時間: 1.45s

静岡県

レンダリング時間: 27.31s

hrsano645 commented 3 years ago

ロードの時間を見比べると歴然とした差ですが、どうやらGoogle Analyticsのjsファイルが極端にロードに時間かかってます。この辺の違いかな？

hrsano645 commented 3 years ago

ロードの時間を見比べると歴然とした差ですが、どうやらGoogle Analyticsのjsファイルが極端にロードに時間かかってます。この辺の違いかな？

この話間違ってたかもしれないので、訂正です。利用していたブラウザのトラッカーブロック機能のおかげで画像の通りの状態でした。chromeのプライベートブラウザモードでやってみた結果です。

最初サーバーからレスポンスを待つ間から、グラフのレンダリング中にウォーターフォールの中が空になり、その後処理が終わるとレスポンスを受け取ってます。グラフの描写が高負荷で、CPU使用率は100%超えてました。

chrome devtoolの~~プロファイル~~Perfomanceタブを使いこなすともうちょっとわかる気がするのですが、使いこなせてない…

hiroyuki-ichikawa / fujicity_covid19