feat(server): Misskey Webでユーザーフレンドリーなエラーページを出す #10590

kakkokari-gtyih · 2023-04-11T15:40:47Z

Fix #10588

What

部分的なSSRを行うページ等において、DBが落ちた際などにFastifyから出力されるJSON形式の簡素なエラー表示が出ることを避ける

ついでにその際のエラーログも出力する

Why

JSON形式エラー表示では、非プログラマーが困惑するため

Additional info (optional)

クライアントのinit時にエラーが発生した際の画面と同じものをレンダリングする

エラー画面体験方法

Misskeyを起動する
Misskeyを起動したまま、PostgreSQLを終了する
/notes/:idなど、SSRが挟まるページを閲覧する

Checklist

Read the contribution guide
Test working in a local environment
(If needed) Update CHANGELOG.md
(If possible) Add tests

codecov · 2023-04-11T15:45:30Z

Codecov Report

Merging #10590 (f6c3860) into develop (5d56799) will decrease coverage by 0.01%.
The diff coverage is 60.00%.

@@             Coverage Diff             @@
##           develop   #10590      +/-   ##
===========================================
- Coverage    74.00%   73.99%   -0.01%     
===========================================
  Files          731      732       +1     
  Lines        68247    68287      +40     
  Branches      5671     5674       +3     
===========================================
+ Hits         50503    50527      +24     
- Misses       17744    17760      +16

Impacted Files	Coverage Δ
...ages/backend/src/server/web/ClientServerService.ts	`93.06% <33.33%> (-2.20%)`	⬇️
packages/backend/src/server/ServerModule.ts	`100.00% <100.00%> (ø)`
...ages/backend/src/server/web/ClientLoggerService.ts	`100.00% <100.00%> (ø)`

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

kakkokari-gtyih · 2023-04-11T15:48:29Z

#10064 があるので、一部プロパティはナーフできるようにしたほうが良いかも？

tamaina · 2023-04-11T16:03:04Z

エラーページの実装がfrontendとbackendで両方書かれてしまうようになるのが若干気になる

サーバー側でなんかするんじゃなくて、Service Worker

https://github.com/nmkj-io/misskey/blob/e9601bcc9b15b53d427c2bf2911413d0f76802d7/packages/sw/src/sw.ts#L36-L37

当たりでService Workerに組み込みのhtmlを表示させるあるいはCacheStorageに保存しておいた'/'を表示するみたいな感じにできないかしら

CacheStorageの場合は次のような感じで

https://github.com/okayurisotto/misskey/blob/6c97849d8876c5b9898307458948736296c9cfe8/packages/sw/src/scripts/lang.ts#L27-L39

kakkokari-gtyih · 2023-04-11T16:19:54Z

サーバー側でなんかするんじゃなくて、Service Worker

https://github.com/nmkj-io/misskey/blob/e9601bcc9b15b53d427c2bf2911413d0f76802d7/packages/sw/src/sw.ts#L36-L37

当たりでService Workerに組み込みのhtmlを表示させるあるいはCacheStorageに保存しておいた'/'を表示するみたいな感じにできないかしら

そうなると、Service Worker が登録されていない人が見たとき（検索エンジンとかから初めてアクセスした人）にエラーが出た場合に困る気が

tamaina · 2023-04-11T16:23:24Z

Service Worker が登録されていない人が見たとき（検索エンジンとかから初めてアクセスした人）にエラーが出た場合に困らないですかね？

なるほど確かにそう

tamaina · 2023-04-11T16:24:27Z

5~10秒ぐらいだけCache Controlつけてもいいかも

…ih/misskey into web-friendly-error

kakkokari-gtyih · 2023-04-11T16:40:01Z

エラーページの実装がfrontendとbackendで両方書かれてしまうようになるのが若干気になる

error.pugでboot.jsを読み込んだ後にJSでエラーを投げるとかすれば共通化できなくもない気が
（ただし、かなり回りくどい実装にはなる）

tamaina · 2023-04-11T16:43:32Z

まだ許容できるコード量なので大丈夫かと

（i18nを考えるとかいう話になると厳しそうだけどそれはService Workerとかでいいか）

tamaina · 2023-04-11T16:43:55Z

fastify.setErrorHandler内でエラーログを発行すると嬉しいかも…？

tamaina · 2023-04-11T16:45:21Z

loggerないからlogger作るの面倒そう

tamaina · 2023-04-11T16:50:08Z

（挙動よくわかってないけどさすがにログは出るか？

kakkokari-gtyih · 2023-04-11T17:23:52Z

ログ出るようにしました

tamaina · 2023-04-12T02:57:33Z

paramsとqueryもログするようにした

tamaina · 2023-04-12T03:04:10Z

errIdを用いてログで追跡可能ならエラースタックをわざわざクライアントに流さなくていいので削除

packages/backend/src/server/web/views/error.pug

tamaina · 2023-04-12T03:22:43Z

tamaina · 2023-04-12T03:52:24Z

👍👍👍

* Refactor sw (misskey-dev#10579) * refactor(sw): remove dead code * refactor(sw): remove dead code * refactor(sw): remove dead code * refactor(sw): remove dead code * refactor(sw): remove dead code * refactor(sw): remove dead code * refactor(sw): 冗長な部分を変更 * refactor(sw): 使われていない煩雑な機能を削除 * refactor(sw): remove dead code * refactor(sw): URL文字列の作成に`URL`を使うように * refactor(sw): 型アサーションの削除とそれに伴い露呈したエラーへの対処 * refactor(sw): `append` -> `set` in `URLSearchParams` * refactor(sw): `any`の削除とそれに伴い露呈したエラーへの対処 * refactor(sw): 型アサーションの削除とそれに伴い露呈したエラーへの対処対処と言っても`throw`するだけ。いままでもこの状況ではエラーが投げられていたはずなので、この対処により新たな問題が起きることはないはず。 * refactor(sw): i18n loading * refactor(sw): 型推論がうまくできる書き方に変更 `codes`が`(string | undefined)[]`から`string[]`になった * refactor(sw): クエリ文字列の作成に`URLSearchParams`を使うように * refactor(sw): `findClient` * refactor(sw): `openClient`における`any`や`as`の書き換え * refactor(sw): `openPost`における`any`の書き換え * refactor(sw): `let` -> `const` * refactor(sw): `any` -> `unknown` * cleanup(sw): import * cleanup(sw) * cleanup(sw): `?.` * cleanup(sw/.eslintrc.js) * refactor(sw): `@typescript-eslint/explicit-function-return-type` * refactor(sw): `@typescript-eslint/no-unused-vars` * refactor(sw): どうしようもないところに`eslint-disable-next-line`を * refactor(sw): `import/no-default-export` * update operations.ts * throw new Error --------- Co-authored-by: tamaina <tamaina@hotmail.co.jp> * Update CHANGELOG.md (misskey-dev#10591) * feat: queueing bulk follow/unfollow and block/unblock (misskey-dev#10544) * wrap follow/unfollow and block/unblock as job queue * create import job to follow in each iteration * make relationship jobs concurrent * replace to job queue if called repeatedly * use addBulk to import * omit stream when importing * fix job caller * use ThinUser instead of User to reduce redis memory consumption * createImportFollowingToDbJobの呼び出し方を変える, 型補強 * Force ThinUser * オブジェクト操作のみのメソッド名はgenerate...Data * Force ThinUser in generateRelationshipJobData * silent bulk unfollow at admin api endpoint --------- Co-authored-by: tamaina <tamaina@hotmail.co.jp> * perf(backend): ノート作成時のアンテナ追加パフォーマンスを改善 * update CHANGELOG.md * refactor: サウンド関連の設定をpizzaxに移行 (misskey-dev#8105) * enhane: unison-reloadに指定したパスに移動できるように * null * null * feat: ログインするアカウントのIDをクエリ文字列で指定する機能 * null * await? * rename * rename * Update read.ts * merge * get-note-summary * fix * swパッケージに * add missing packages * fix getNoteSummary * add webpack-cli * ✌️ * remove plugins * sw-inject分離したがテストしてない * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix * ✌️ * clean up config * typesを戻した * backend/src/web/index.ts * notification-badges * add scripts * change create-notification.ts * Update packages/client/src/components/notification.vue Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> * disconnect * oops * Failed to load the script unexpectedly回避 sw.jsとlib.tsを分離してみた * truncate notification * Update packages/client/src/ui/_common_/common.vue Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> * clean up * clean up * refactor * キャッシュ対策 * Truncate push notification message * fix * wip * clean up * migration * migration * comment * move soundConfigStore * ✌️ * clean up * クライアントがあったらストリームに接続しているということなので通知しない判定の位置を修正 * components/drive-file-thumbnail.vue * components/drive-select-dialog.vue * components/drive-window.vue * merge * fix * remove reversi setting * Service Workerのビルドにesbuildを使うようにする * return createEmptyNotification() * fix * fix * i18n.ts * update * ✌️ * remove ts-loader * fix * fix * enhance: Service Workerを常に登録するように * pollEnded * pollEnded * URLをsw.jsに戻す * clean up * clean up * update sounds.vue * update * fix type * ✌️ * ;v; --------- Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> * enhance: カスタム絵文字関連の変更 (misskey-dev#9794) * PackedNoteなどのemojisはプロキシしていないURLを返すように * MFMでx3/x4もしくはscale.x/yが2.5以上に指定されていた場合にはオリジナル品質の絵文字を使用する * update CHANGELOG.md * fix changelog * ?? * wip * fix * merge * Update packages/frontend/src/scripts/media-proxy.ts Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> * merge * calc scale --------- Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> * feat: role timeline Resolve misskey-dev#10581 * feat(server): Misskey Webでユーザーフレンドリーなエラーページを出す (misskey-dev#10590) * (add) user-friendly error page * Update CHANGELOG.md * (add) cache-control header * Add ClientLoggerService * Log params and query * remove error stack on client * fix pug * 文面を調整 * :art] --------- Co-authored-by: tamaina <tamaina@hotmail.co.jp> * test(backend): Add tests for users (misskey-dev#10546) Co-authored-by: tamaina <tamaina@hotmail.co.jp> * fix(backend): カスタム絵文字でリアクションできないことがある問題を修正 * Update CustomEmojiService.ts * fix type * Use unique identifier for each follow request (misskey-dev#10600) Co-authored-by: anemone <anemoneya@icloud.com> * fix type in CustomEmojiService * fix type in CustomEmojiService 2 * fix * Update CHANGELOG.md * fix(server): アンテナとロールTLのuntil/sinceプロパティが動くように (misskey-dev#10605) * fix(server): アンテナとロールTLのuntil/sinceプロパティが動くように * fix * Update CHANGELOG.md * Update about-misskey.vue * 🎨 * fix(backend): チャンネルのピン留めされたノートの順番が正しくない問題を修正 Fix misskey-dev#10541 * New Crowdin updates (misskey-dev#10585) * New translations ja-JP.yml (English) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (German) * New translations ja-JP.yml (Japanese, Kansai) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (Italian) * New translations ja-JP.yml (Italian) * New translations ja-JP.yml (English) * New translations ja-JP.yml (German) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Japanese, Kansai) * New translations ja-JP.yml (Chinese Simplified) * 13.11.3 * [ci skip] remove outdated comment * [ci skip] improve readability * 一部の Workflow を削除 --------- Co-authored-by: okayurisotto <aytkzm@gmail.com> Co-authored-by: tamaina <tamaina@hotmail.co.jp> Co-authored-by: futchitwo <74236683+futchitwo@users.noreply.github.com> Co-authored-by: Namekuji <11836635+nmkj-io@users.noreply.github.com> Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> Co-authored-by: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com> Co-authored-by: Nanashia <nanashia.128@gmail.com> Co-authored-by: hutchisr <42283663+hutchisr@users.noreply.github.com> Co-authored-by: anemone <anemoneya@icloud.com> Co-authored-by: Ebise Lutica <7106976+EbiseLutica@users.noreply.github.com>

(add) user-friendly error page

733854a

github-actions bot added the packages/backend Server side specific issue/PR label Apr 11, 2023

Update CHANGELOG.md

b63d50b

kakkokari-gtyih marked this pull request as ready for review April 11, 2023 15:43

github-actions bot requested review from rinsuki and tamaina April 11, 2023 15:44

Merge branch 'develop' into web-friendly-error

13e653a

kakkokari-gtyih added 2 commits April 12, 2023 01:31

(add) cache-control header

b5f6fda

Merge branch 'web-friendly-error' of https://github.com/kakkokari-gty…

e47689e

…ih/misskey into web-friendly-error

kakkokari-gtyih and others added 4 commits April 12, 2023 02:25

Add ClientLoggerService

ed2e8f4

Merge branch 'develop' into web-friendly-error

35f159a

Log params and query

698b4fa

Merge branch 'develop' into pr/kakkokari-gtyih/10590

459b4fa

remove error stack on client

4ccfa1a

kakkokari-gtyih commented Apr 12, 2023

View reviewed changes

packages/backend/src/server/web/views/error.pug Show resolved Hide resolved

fix pug

1b483af

tamaina added 2 commits April 12, 2023 03:17

文面を調整

b706c24

:art]

f6c3860

tamaina merged commit 49749b4 into misskey-dev:develop Apr 12, 2023

kakkokari-gtyih deleted the web-friendly-error branch April 12, 2023 10:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(server): Misskey Webでユーザーフレンドリーなエラーページを出す #10590

feat(server): Misskey Webでユーザーフレンドリーなエラーページを出す #10590

kakkokari-gtyih commented Apr 11, 2023 •

edited

Loading

codecov bot commented Apr 11, 2023 •

edited

Loading

kakkokari-gtyih commented Apr 11, 2023

tamaina commented Apr 11, 2023

kakkokari-gtyih commented Apr 11, 2023 •

edited

Loading

tamaina commented Apr 11, 2023

tamaina commented Apr 11, 2023

kakkokari-gtyih commented Apr 11, 2023 •

edited

Loading

tamaina commented Apr 11, 2023

tamaina commented Apr 11, 2023

tamaina commented Apr 11, 2023

tamaina commented Apr 11, 2023

kakkokari-gtyih commented Apr 11, 2023

tamaina commented Apr 12, 2023

tamaina commented Apr 12, 2023

tamaina commented Apr 12, 2023

tamaina commented Apr 12, 2023

feat(server): Misskey Webでユーザーフレンドリーなエラーページを出す #10590

feat(server): Misskey Webでユーザーフレンドリーなエラーページを出す #10590

Conversation

kakkokari-gtyih commented Apr 11, 2023 • edited Loading

What

Why

Additional info (optional)

エラー画面体験方法

Checklist

codecov bot commented Apr 11, 2023 • edited Loading

Codecov Report

kakkokari-gtyih commented Apr 11, 2023

tamaina commented Apr 11, 2023

kakkokari-gtyih commented Apr 11, 2023 • edited Loading

tamaina commented Apr 11, 2023

tamaina commented Apr 11, 2023

kakkokari-gtyih commented Apr 11, 2023 • edited Loading

tamaina commented Apr 11, 2023

tamaina commented Apr 11, 2023

tamaina commented Apr 11, 2023

tamaina commented Apr 11, 2023

kakkokari-gtyih commented Apr 11, 2023

tamaina commented Apr 12, 2023

tamaina commented Apr 12, 2023

tamaina commented Apr 12, 2023

tamaina commented Apr 12, 2023

kakkokari-gtyih commented Apr 11, 2023 •

edited

Loading

codecov bot commented Apr 11, 2023 •

edited

Loading

kakkokari-gtyih commented Apr 11, 2023 •

edited

Loading

kakkokari-gtyih commented Apr 11, 2023 •

edited

Loading