Sentry大臣に就任しました。
こんにちは。フロントエンドエンジニアの武井です。
このたびフロントエンドチームのSentry大臣に任命されました。
なんやそれ、とお思いでしょう。
これはフロントエンドチーム内での役割分担を大臣と呼んでいるだけで、「○○担当」くらいの意味合いです。
こんな感じでわいわいとやっているフロントエンドチームの日常業務を少しご紹介いたします。
フロントエンドチームの大臣制度
大臣制度について少し補足すると、自分が主に参加しているプロジェクト以外にフロントエンドチームとして日々取り組まなければならない課題に担当を割り振ったものです。日々の作業割合としては1〜2割くらいをあてている感じでしょうか。
他に「デザインシステム大臣」や「Github大臣」「多言語大臣」などをフロントエンドチームのメンバーがそれぞれの分野に責任を持って活動しています。大臣だからといって偉くなるわけでも給料が上がるわけでありません。あくまで日常業務の一環でわいわいとやっています。
Sentry大臣のお仕事
Sentryはエラーを可視化して監視するツールです。
ヤプリではエラー監視にNew Relicなども併用しているのですが、フロントエンドチームでは主にSentryでエラー監視をしています。監視対象はヤプリのCMS管理画面のフロントエンドプログラムです。
ヤプリはほとんどのクライアントがtoBの企業様なので、Sentryで検知するCMSのエラーも週末よりも平日に、深夜よりも日中に多く出る傾向があります。また、偉大なる先人達の努力の成果によりCMSでは現在は大きなエラーは出ていません。
とはいえヤプリでは毎週のように新機能や改善のリリースが行われますので、リリース直後に新たなエラーはないか増加傾向のエラーはないかを監視して、見つけ次第早めに対応する必要があります。
実際は自分がその場で全て直すということはしません。いったんエラー内容を確認してコード上の怪しそうな箇所を特定だけしておき、該当箇所の担当プロジェクトのメンバーに一報を入れます。発生頻度が少なかったり緊急度の低いエラーはYappdateDayにまわします。
YappdateDayとはヤプリのプロダクト本部で定期的に行われる改善日のことで、その日はプロジェクトの作業を止めて1日改善に充てようという日です。 note.com
あるあるエラー3選
ここでは、自分がよく見かけるエラー内容をご紹介します。
生成されていないDOMに対するアクセスエラー
this.$refs.dialog.style.color = '#FF0000'
vueのOptions APIでテンプレートを参照する際に this.$refs.hogehoge というような記述をします。 この this.$refs.hogehoge は undefined になる可能性があるのですが、気がつかずに記述してしまうことがあります。
TypeScriptであれば開発中に型チェックで気づきやすいですが、JavaScriptでは型チェックがなく見過ごされがちです。
// 簡単に対応するのであればオプショナルチェーン `?.` を設定すればよいが・・・ this.$refs.dialog?.style.color = '#FF0000'
上記の様に対応すれば一応エラーは出なくなりますが、エラーが出なくなればそれでいいのかDOMに対して何をしたいのかをコードや仕様を確認して検討する必要があります。
アップロード系のエラー
アップロードはセキュリティに関わる箇所なのでわりと複雑な作りになっています。失敗はあってはならないことではあるのですが、ブラウザとサーバ間の回線不調などで起こることもあるので何とも言えません。エラーが頻発するようでしたらインフラ系に問題が起こっている可能性があるのでSREチームに相談になります。
アップロードにかぎらないですが、 fetch() を使っている場合のエラーハンドリングに失敗しているケースがうっかり実装されていたりするので注意です。
// ありがちなfetch処理 fetch('http://exmaple.com', { method: 'PUT', body: uploadData }) .then(res => { // 成功時の処理 }) .catch(error => { // 失敗時の処理 });
上記の様なコードだとサーバー側でエラーが発生した時に気づかず成功時の処理を実行してしまうことがあります。
下記の様にResponseの値をチェックすることでサーバ側エラーも検知することが出来る様になります。
fetch('http://exmaple.com', { method: 'PUT', body: uploadData }) .then(res => { if (!res.ok) { // サーバ側のエラーを検知する throw new Error(`upload error. status: ${res.status} ${res.statusText}`); } // 成功時の処理 }) .catch(error => { // 失敗時の処理 // サーバ側のエラーもここで処理出来る });
いにしえの機能名の翻訳エラー
Yappliのフロントエンド開発では多言語化対応が必須となっています。ほとんどのワードの多言語化は完了しているのですが、稀に見たこともない機能名で翻訳エラーになる箇所がありました。 もう使われていないがサービス開始まもない頃に存在した機能名がデータベースの中にひっそりと残っていたらしいです。
バージョンの課題感
ヤプリでは self-hosted のSentryを使用しています。SaaS版ではなく自分らでSentryのホストをたてて運用する形式です。
具体的なバージョンは書きませんが少し古いバージョンを使用していますので、セキュリティやAPIの互換性にやや不安を覚えます。このへんはSREチームや他のSentryを使用しているチームと連携してバージョンアップを計らなければと考えています。
担当してみての感想
サーバーチームからフロントエンドチームに移籍して6ヶ月ほどが経ちました。 Sentryをきっかけに自分が普段さわらない様々な機能のコードを紐解き、実装や経緯をさぐることはシステムの成り立ちを理解するのにとても勉強になりました。移籍したての自分にはちょうどよい担当だったと思います。
フロントエンドチームの日常業務の一端をご紹介いたしました。
ヤプリではフロントエンドエンジニアを募集中です。ご興味がありましたらカジュアル面談にぜひいらしてください。
