Edited at
C#Day 13

Windowsアプリで出たバグをBugsnagで管理し、Trelloでタスク化し、slackに通知する

More than 3 years have passed since last update.

Windowsアプリを開発するプロジェクトに携わって早3ヶ月。運良く初期から関わることができ、バグをトラッキングする仕組みを考えるチャンスに恵まれました。一度構築してしまったらなかなか後の人が触れず、知見が溜まりにくい分野かなぁと思ったので共有することにしました。


概要


  1. アプリケーション全体で捕捉できなかった全体エラーを捕捉する箇所にBugsnagのクライアントを仕込み、Bugsnagサービスで通知で受けられるようにします。

  2. BugsnagとTrelloを連携することで自動的にバグ修正タスクを整理します。

  3. Trelloのチケットが切られるとslackに通知するように設定することで素早くバグ対応し、ユーザに価値を届けることができます!


必要なアカウントと今回導入した経緯



  • Bugsnag


    • クライアントからの通知を受け取り、バグ自体の情報や発生頻度を管理するツールです。同サービスの別プロダクトで使用していたことから一括管理のために今回も使用することにしました。




  • Trello


    • 看板形式でタスクを管理するツールです。社内ではチームごとにいろんなタスク管理ツールが使用されていますが、僕の所属するチームはメインのタスクの他に細かいタスクが多くチケットを移動することからTrelloを使用することになりました。BugsnagはTrelloとの連携に対応しています。




  • Slack


    • 言わずと知れた(?)チャットツールです。HipChatを経て導入されました。Trelloとの連携に対応しています。




設定方法

※Visual Studio2013、.NET Framework4.5を使用して準備しました。


Bugsnag


  1. Visual Studioの当該プロジェクトのプロジェクトタブ -> NuGetパッケージの管理からBugsnagを検索してインストールする。


    • Bugsnag .NET Notifierというのが一番上に表示されると思うのでそれを選択してください。



  2. Bugsnagサービス内にプロジェクトを作り(Create new project)、Installing the .NET detection libraryの中からotherを選択してサンプルコードを表示させてください。プロジェクト用のクライアントキーも既に入った状態になっています。

    var bugsnag = new BaseClient("hogehogehogehoge")


  3. 当該プロジェクトにbugsnagのクライアントを仕込みます。今回はアプリケーション内でハンドルできなかったエラーを通知するために使用するので、下記のようなものを想定しています。


App.xaml.cs


namespace Hoge
{
/// <summary>
/// App.xaml の相互作用ロジック
/// </summary>
public partial class App : Application
{
/// <summary>
/// アプリケーションの全体エラーを補足
/// </summary>
/// <param name="sender">object</param>
/// <param name="e">DispatcherUnhandledExceptionEventArgs</param>
private void Application_DispatcherUnhandledException(object sender, DispatcherUnhandledExceptionEventArgs e)
{
string errorMessage = string.Format(
"予期せぬエラーが発生しました。\n" +
"サポートページよりお問い合わせください。
);

System.Windows.Forms.MessageBox.Show(errorMessage);
NotifyException(e.Exception);
e.Handled = true;
Shutdown();
}

private void NotifyException(Exception exception)
{
var bugsnag = new BaseClient("hogehogehogehoge");
var metadata = new Metadata();
metadata.AddToTab("ID", "12345");
metadata.AddToTab("Name", "お名前");
bugsnag.Config.AppVersion = AppVersion();
bugsnag.Notify(exception, Severity.Error, metadata);
}

private string AppVersion()
{
FileVersionInfo ver = FileVersionInfo.GetVersionInfo(Assembly.GetExecutingAssembly().Location);
return ver.FileVersion;
}
}
}



Trello

Trelloから発行される下記の項目をBugsnagの設定ページに入力することが設定が可能です。


  • Application Key

  • Member Token

  • Board Id

  • List Name


    • List単位で通知先を設定できます。



  • Labels


    • List内に作成されるチケットの色を設定できます。



最初の3つの項目の発行は@isseiumさんの記事(Trello API を叩いてカードを作成する方法(curl利用))がものすごくわかりやすかったです!@isseiumさんありがとうございましたm(_ _)m

bugsnag当該プロジェクトのISSUE TRACKER内Settingに各項目を入力してください。設定後、GENERATE TEST ISSUEをクリックすることでテスト投稿も可能です。


Slack

Trelloにカードが作成されたタイミングでSlackに通知されるように設定します。こちらの設定はSlack上で完結します。手順については@yukihirai0505さんの記事(Slackと他のアプリ/WEBサービスの連携について)がとてもわかりやすかったです。@yukihirai0505さんありがとうございました!

Trelloでのどんなアクションをトリガーにslackに通知するかは選択可能なので、目的に応じて選択してみてください。下記の項目での設定が可能です!


  • Card created

  • Card moved

  • Comment added to card

  • Attatchment added to card

  • Description changed

  • Due date changed

  • Label changed

  • Member added to card

  • Card archived/unarchived


さいごに

いかがでしたでしょうか?現状は上記のような仕組みで運用していますが、今後何かあれば改善していきたいなぁと考えています。なかなか知見がないので、ぜひぜひ皆様のご意見や現場の知見を聞かせていただけましたら幸いです。最後までご覧いただきありがとうございました(\( ⁰⊖⁰)/)