wwwave'sTechblog |ウェイブのエンジニアブログ

株式会社ウェイブのエンジニアによるテックブログです。会社の話や Ruby、Vue.jsについてなど技術的な話をしていきたいと思います。

株式会社ウェイブの人事部ブログです。社内の雰囲気やイベント、福利厚生などについてお伝えいたします!

株式会社ウェイブのエンジニアブログです。 エンジニアの目線から会社の話や技術的な話をしていきます。

CoolmicのSentryエラー監視を改善してみた!

f:id:sys_wwwave:20220411175009p:plain

ウェイブTechブログとは?
ウェイブの仕事をエンジニア目線でお伝えするWebメディアです。毎月15日の更新を目指しています。肩の力を抜いて執筆し、ありのままのウェイブをお見せできるよう心がけています。

本日の担当:SRE シラト
 ・2017年4月入社の新卒社員(2021年9月〜SREに所属)。
 ・ユニバ大好き。
 ・おすすめのチュリトスはミニオンのチョコバナナ・チュリトス。

今回のお話

今回は、海外向けコミック配信サービス「Coolmic」でのエラー監視改善についてお話したいと思います!

環境

Coolmicでは以下の構成でエラー監視を行っております。

Category Technology
Programming Languages(Backend) Ruby on Rails
Programming Languages(Frontend) Vue.js
Monitoring Sentry
Communication Slack

f:id:sys_wwwave:20220411145345p:plain

課題

Coolmic、サービスリリースからあっという間に四年が過ぎました。
この四年間、幾度となくエラーを解決してきましたが、中には以下のような厄介者が紛れ込んでくることがあります。

・原因はわかるが売上影響度が低く、修正時間がかかり費用対効果が悪い

・特定の端末でのみ発生する

このようなエラーの修正は新機能開発よりも優先度が低くなってしまうため、放置されがちです。その結果、Slackでのエラー通知が1日100件とノイズで埋め尽くされるときもありました・・・。

このままでは致命的な障害発生時に速やかに覚知することができないと感じたため改善を行いました。

改善点

今回一番問題だったのは『エラーをすぐに解決せず、放置したこと』ではなく『エラー監視の改善を行わなかったこと』だと感じました。
監視改善に対する重要度が低かったのですが、書籍『入門 監視』を読んで意識が変わりました。

そこで今回は、監視の質を上げるべく改善を行いました。

1. 常に改善し続ける

前提の話になりますが、このマインド重要です。『入門 監視』にもありましたが、『銀の弾丸はない』とのこと。改めて考えてみたら、サービスは変化し続けるので、監視もチューニング必要ですね。

2. エラー通知を放置しない

『入門 監視』にもありましたが、以下のような問いかけをすると判断コスト減らせてよかったです!
・エラー通知でアクションすることはありますか?
・過去、同じエラー通知で何らかのアクションはしましたか?
・通知を停止させるにはどうすればいいですか?

過去アクションしたことがないエラー通知であれば、思い切ってエラー通知を Discard して良さそうです。
もし、エラー修正するのであれば、タスクに有効期限を設定し、その期限内はエラー通知をOFFにする対応だけでもノイズを減らす手段として有効です。

3. Sentry 通知を Discard する

Sentry 通知を OFF にする方法として、Ignore と Discard の二種類あります。実は、Discard にすると Sentry にエラーが送信されても料金がかからないです!!
Ignore にしているエラーを見直すとコスト削減に繋がる可能性があります。

手段 通知条件
Ignore 設定した条件を満たすまで通知しない
Discard  一度設定したら二度と通知しない

4. Sentry 通知をグルーピングする

Sentry 側で Discard 対応したのに、同じようなエラー通知が来てしまうことがあります。
Sentry は独自のアルゴリズムでエラーのグルーピングしているみたいです。
同じエラーメッセージやスタックトレースをSentry側でグルーピングすることができます。
gemのバージョンを更新しただけで新しいエラーになってしまうので、この機能を有効活用したいです!

5. 非対応端末は例外を送らない

以下のようにJavaScriptでbeforeSendメソッドの戻り値をnullにしました。
これでSentryへ例外通知しないようにできます。
Sentryのコンソールからも似たような設定はできます。
しかし、サイトの推奨端末以外は動作保証外ため、エラー通知がノイズになってしまいます。
細かいOSのバージョンなどは指定できないため、前述の対応でフィルタリングすることにしました。

Sentry.init({
dsn: "SentryのDSN",
  beforeSend(event) {
    if (非対応端末 === "true") {
      return null;
    }
    return event;
  },
});

改善結果

改善直後は、1日数件程度までエラー通知数を減らすことができました。今回の改善で応急処置できたかと思います。ただ、開発業務と並行して監視改善を行うには、判断コストを減らすなど効率化が必要そうです。

SRE配属前はCoolmic開発チームに所属していたので、課題意識のあった監視の改善ができてよかったです!

まとめ

・エラー監視は常に改善し続けることが大切!

・思い切ってエラー通知を削除することは、ノイズを減らす第一歩に繋がる!

SREチームの業務の一部のご紹介でした!今回のように改善して振り返っての繰り返しで成長する機会がたくさんある環境です!少しでもウェイブに興味ある方、オフィスでお待ちしております〜。

 

ウェイブではともにチャレンジしてくれるエンジニアを募集しています。

現在の募集職種はこちらをご覧ください。

recruit.wwwave.jp

Coolmicの課題をABテストで解決してみた!

f:id:sys_wwwave:20220310180114p:plain

ウェイブTechブログとは?
ウェイブの仕事をエンジニア目線でお伝えするWebメディアです。毎月15日の更新を目指しています。肩の力を抜いて執筆し、ありのままのウェイブをお見せできるよう心がけています。

本日の担当:Coolmicエンジニア イシカワ
 ・2019年4月入社の新卒社員。
 ・水族館巡りが趣味。
 ・最近の推し水族館は愛知県にある竹島水族館。

今回のお話

今回は、先日実施した海外向けコミック配信サービス「Coolmic」でのABテストについてお話したいと思います。

Coolmicの課題

Coolmicでは、ユーザーに新しい作品との出会いをもっと提供したいという課題がありました。

TOPページに表示されている作品のクリック数を調査したところ、最近読んだ作品と購入済作品の続話が大半を占めていること。閲覧中の作品を元に選出されたレコメンド作品表示するセクションはスワイプしなければ見れない箇所の作品があまりクリックされていないことが分かりました。

調査結果から、作品のおもしろさがわかりにくく、ユーザーに新しい作品との出会いを提供できていない可能性がある(①)。カルーセルをスワイプしなければ作品を見ることができず、機会を損失している可能性がある(②)。という2つの課題設定を行いました。

解決方法の検討

①の課題では、Coolmicにて導入している「いいね機能」に着目しました。「いいね機能」は、作品のおもしろさを測る指標の一つでユーザー自身が評価を行います。この評価は、他のユーザーにとっても有益な情報だと考えられました。そこでこの評価をTOPページなどに表示してみることにしました。

②の課題では、スワイプしないと見れない作品を表示できないかと考えました。シンプルですが、表示されている作品のクリック数は高いという結果がでてたので、直接的に寄与するのではないかと考えたんです。最終的に表示方法をカルーセルから3×3の作品表示に変えてみて効果を測ることにしました。

有効性を確認するためにABテスト

Google optimizeを用いてABテストを実施しました。

解決方法はあくまで仮説なので、そのまま実装しても逆に数値が下がってしまっては意味がありません。実用性を見るためABテストは必要だと考えました。

ABテストとは?

2つのものを比較するテストです。 「AパターンとBパターンではどちらがよいか」を比べるからABテストと呼ばれていると考えるとわかりやすはず。 インターネットマーケティングでよく行われる手法で、サイトや広告のアクセス数や成約率などのデータを比較し、成果が出ているほうを採用します。

<実施したABテスト内容>

①TOPページに作品ごとのいいね数を表示(有・無の比較)

f:id:k-ishikawa_wwwave:20220310185137j:plain

 

②カルーセルから3*3の表示に変更

f:id:k-ishikawa_wwwave:20220310130508j:plain

 

HOW TO

既にcoolmicではgtag.jsというgoogle analyticsなどにデータを送れる仕組み自体は導入済みだったので、下記の設定を足してoptimizeの管理画面から設定を行うだけで実施ができました。
gtag('config', GAのTRACKING_ID, {
page_path: path,
optimize_id: optimizeのid, // <-これを追加するだけ

ABテストの結果

①TOPページに作品毎のいいね数を表示(有・無の比較)

表示有りのセクションクリック数が約3%増加しました。作品を評価する指標が表示されることでユーザーは作品に興味を持ちやすくなり、クリック数につながるという成功仮説がたちました。

②カルーセルから3*3の表示に変更(有・無の比較)

カルーセル vs 3×3では、3×3のクリック率が1%程度増加しました。クリック後の購入割合約も約6%向上。作品が一覧で見られる様になったことにより、ユーザーの閲覧率が高まりました。また、その後の購入にもつながったことから、魅力的な作品にも出会えているのではないかと考えられます。

まとめ

・いいね機能などの評価を閲覧しやすくすることは、クリック数につながる。

・スワイプなどのギミックを少なくして目に触れてもらえる工夫が重要。

・仮説の実証にはやっぱりABテストが有効。

Coolmicチームでは通常の機能開発だけでなく、システムチーム側からABテストの提案や実施など分析から改善の提案まで幅広く携わる事ができます!いろいろな事にチャレンジ出来る環境で一緒に働いてみませんか!(イシカワ)

Techブログ編集部から一言

ウェイブでは仮説を立て、検証し、改善までの一連の流れをエンジニアが行っています。今回のABテストは「ユーザーに作品と出会っていただくためにはどうするか」という課題。マーケティングな的な要素もある課題ですが、エンジニアが解決に向けて工夫しているのがとてもウェイブ的ですね。

 

ウェイブではともにチャレンジしてくれるエンジニアを募集しています。

現在の募集職種はこちらをご覧ください。

recruit.wwwave.jp

 

トップに戻る