{"id":3065,"date":"2018-02-13T12:36:40","date_gmt":"2018-02-13T20:36:40","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/vsappcenter\/?p=3065"},"modified":"2019-02-16T15:30:28","modified_gmt":"2019-02-16T22:30:28","slug":"guest-blog-solving-what-the-bug-with-the-visual-studio-app-center-crashes-service","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/appcenter\/guest-blog-solving-what-the-bug-with-the-visual-studio-app-center-crashes-service\/","title":{"rendered":"Guest Blog | Solving \u201cWhat the Bug?\u201d with the Visual Studio App Center Crashes Service"},"content":{"rendered":"<p><em>This is a special guest post from Miguel Cervantes, CTO at <a href=\"https:\/\/www.payit.mx\/\" rel=\"noopener\" target=\"_blank\"><em>Payit<\/em><\/a>.<\/em>\n&nbsp;\nIt\u2019s every developer\u2019s nightmare: something goes wrong with your app in the wild, with real users, or, even worse, when you\u2019re showing it to a venture capitalist, potential client, or at public event. In the moment, we usually have no idea what\u2019s happened or how we can fix it. I call these, \u201cwhat the bug?\u201d moments.  <\/p>\n<p>Finding a bug in development isn\u2019t easy, but we use automated UI testing on real devices to catch as much as possible at Payit so we can release with confidence (thanks, <a href=\"https:\/\/docs.microsoft.com\/en-us\/appcenter\/test-cloud\/\" rel=\"noopener\" target=\"_blank\">App Center Test service<\/a>!). But, once you ship, all bets are off&mdash;you can\u2019t hit a breakpoint or get access to a log.  <\/p>\n<p>If I have one piece of advice, it\u2019s to <strong>instrument your apps to collect crash and user data<\/strong>. As we\u2019ve developed Payit, Mexico\u2019s only peer-to-peer mobile payment app, which has grown to 110K+ active users and been awarded \u201cGoogle Play Editor\u2019s Choice\u201d, this has been critical to our success.  <\/p>\n<p>We use <a href=\"https:\/\/appcenter.ms\/\" rel=\"noopener\" target=\"_blank\">Visual Studio App Center<\/a> to get the data we need to prevent \u201cwhat the bug\u201d moments and improve our apps. Below, I\u2019ll share how we use Visual Studio App Center\u2019s Crashes, Analytics, and Push services and few of my favorite tips and tricks to help you get started and get even more from your crash and analytics data.  <\/p>\n<p>Get ready to learn.  <\/p>\n<h2>Visual Studio App Center Crashes Service At-a-Glance<\/h2>\n<p>We all want world-class, five-star apps that keep our users coming back.  <\/p>\n<p>I\u2019ve been developing apps a long time, and every time I hear a developer say that crash reporting, monitoring, and analytics are \u201cuseless,\u201d I shudder. Without a way to gather production app data, you and your team&amp;mdashnot only your tech team, but your marketing, product, and sales teams&mdash;are completely blind. <\/p>\n<p>Simply put, <a href=\"https:\/\/docs.microsoft.com\/en-us\/appcenter\/crashes\/\" rel=\"noopener\" target=\"_blank\">App Center Crashes service<\/a> gives you a lot of data, so you easily identify and fix any bugs your users experience.  <\/p>\n<h2>Getting Started<\/h2>\n<p>At Payit, we\u2019re .NET developers, so we use NuGet. If you\u2019re a C# developer, installing the App Center SDK is as easy as searching NuGet package manager: \n&nbsp;<\/p>\n<ul>\n<li><code>Microsoft.Azure.Mobile<\/code><\/li>\n<li><code>Microsoft.Azure.Mobile.Crashes<\/code><\/li>\n<li><code>Microsoft.Azure.Mobile.Analytics<\/code><\/li>\n<\/ul>\n<p>&nbsp;\nIt\u2019s just as easy for all developers (<a href=\"https:\/\/docs.microsoft.com\/en-us\/appcenter\/crashes\/\" rel=\"noopener\" target=\"_blank\">view more detailed docs here<\/a>); simply pick whatever language you prefer: Swift, Obj-C, Java, or React Native.  <\/p>\n<p>Just log in, connect your apps, and add the App Center SDK.<\/p>\n<h2>Grouped Crash Reports<\/h2>\n<p>From there, in your Crashes tab, you\u2019ll see a list of all crashes, with filters for app, version, date range, and status:\n&nbsp;\n<img decoding=\"async\" src=\"\" alt=\"\" width=\"1905\" height=\"971\" class=\"aligncenter size-full wp-image-3155\" \/><\/p>\n<p style=\"text-align: center;font-size:12px\">For the purpose of this post, we\u2019re using internal crash reporting logs (not for our production apps). Crash data may come from automated tests or manual QA for our RC versions.<\/p>\n<p>&nbsp;\nAs a peer-to-peer payment app, our main goal is to ensure our users successfully complete financial transactions. We use the following criteria to guide our decision process, in order of \u201curgent\u201d to \u201cpriority, but not on fire\u201d: \n&nbsp;<\/p>\n<ul>\n<li>Involves a financial flow operation (no matter how many users affected, must be fixed)<\/li>\n<li>Affects critical non-financial operations (like account creation or profile updates)<\/li>\n<li>Impacts significant percentage of users<\/li>\n<li>Relates to UI only<\/li>\n<\/ul>\n<p>&nbsp;\nGrouped crash reports show us affected devices and OS versions, time stamps, network, app version, how many times the issue occurred, and more. We love this level of detail, since it makes it easier to prioritize what we fix and when. In addition to our crash priority scale, we weight issues on the latest devices and OS versions more heavily, and detailed reports mean we can quickly decide if a crash group should be fixed ASAP or if it can wait a bit longer.  <\/p>\n<h2>Status Toggle and Filters<\/h2>\n<p>Our entire development team knows our bug rating scale, and we empower all team members to search, troubleshoot, and solve open issues.  <\/p>\n<p>App Center\u2019s simple status selector and filter makes it easy to focus on high priority, unresolved issues.  We browse crash reports for \u201copen\u201d issues, code a fix, and change the status.  \n&nbsp;\n<img decoding=\"async\" src=\"\" alt=\"\" width=\"200\" height=\"203\" class=\"aligncenter size-full wp-image-3085\" \/>\n&nbsp;\n\u201cOpen\u201d and \u201cclosed\u201d are straightforward, and we use \u201cignored\u201d to categorize crashes that we don\u2019t need the team to fix, like those from a specific internal test.  <\/p>\n<p>Below is a simple example of how we use filters and grouped crash reports to identify and prioritize what we fix: <\/p>\n<p>After narrowing to only \u201copen\u201d issues, we apply our importance scale. In this case, we\u2019d resolve #187 (related to collecting user payment information) over #186 (UI-related).\n&nbsp;\n<img decoding=\"async\" src=\"\" alt=\"\" width=\"1916\" height=\"973\" class=\"aligncenter size-full wp-image-3095\" \/>\n&nbsp;\n&nbsp;\n<img decoding=\"async\" src=\"\" alt=\"\" width=\"1646\" height=\"954\" class=\"aligncenter size-full wp-image-3105\" \/><\/p>\n<p style=\"text-align: center;font-size:12px\">Crash Group #187<\/p>\n<p>&nbsp;\n&nbsp;\n<img decoding=\"async\" src=\"\" alt=\"\" width=\"1643\" height=\"655\" class=\"aligncenter size-full wp-image-3115\" \/><\/p>\n<p style=\"text-align: center;font-size:12px\">Crash Group #186<\/p>\n<p>&nbsp;\n&nbsp;\n#187 is priority #1, since it impacts our core business: financial transactions.  <\/p>\n<p>From there, we see error messages and stack traces for any given crash, so it\u2019s easier for us to detect what happened and address the issue.  <\/p>\n<p>The Payit app includes a page for users that displays their saved payment cards, allowing them to select any stored card as a payment method on a transaction-by-transaction basis. As shown in the stack trace above, the  method crashed with a <code>System.ArgumentOutOfRangeException<\/code>.  <\/p>\n<p>This one is pretty clear; it\u2019s developer error. They\u2019re trying to display card collection with fewer elements than the iteration cycle, or to access an element index that doesn\u2019t exist. Thus, no payment cards are shown to the user, so s\/he is unable to complete transactions.  <\/p>\n<p>With the App Center Crashes service, we dig into stack traces, targeting a specific method, and after a quick analysis, see the root problem (an incorrect index after adding\/deleting cards) and resolve it.\n&nbsp;\n<img decoding=\"async\" src=\"\" alt=\"\" width=\"200\" height=\"207\" class=\"aligncenter size-full wp-image-3125\" \/>\n&nbsp;\nAs we commit fixes, we change the status to \u201cclosed.\u201d Everyone\u2019s dashboard updates in real-time, so no one wastes time investigating resolved issues. <\/p>\n<h2>Combining the Crashes, Analytics, and Push Service<\/h2>\n<p>I\u2019ll dive deeper into the Analytics and Push services in a future post, but targeted push notifications powered by Analytics user segmentation help us in our crash resolution process too.\n&nbsp;\n<img decoding=\"async\" src=\"\" alt=\"\" width=\"1900\" height=\"866\" class=\"aligncenter size-full wp-image-3135\" \/>\n&nbsp;<\/p>\n<h2>User Segmentation and Targeted Push Notifications<\/h2>\n<p>Visual Studio App Center makes it easy to send notifications to predefined user segments, so you get the right message to the right user(s) at the right time. For us, this ranges from letting our iOS and Android users know when we\u2019ve shipped a new version, thereby nudging them to update, or to message users when we\u2019ve identified and resolved an issue on a specific device or OS version.\n&nbsp;\n<img decoding=\"async\" src=\"\" alt=\"\" width=\"550\" height=\"409\" class=\"aligncenter size-full wp-image-3136\" \/>\n&nbsp;\nIn addition to Visual Studio App Center\u2019s robust Analytics and <a href=\"https:\/\/docs.microsoft.com\/en-us\/appcenter\/push\/\" rel=\"noopener\" target=\"_blank\">Push<\/a> services, we integrate with a few other tools to gather insights about our app behavior, segment our users, and send targeted marketing campaigns (try a new feature or promoted service, invite new users, etc.). The flexibility to use various services is important to us, and Visual Studio App Center lets us pick and choose the services that work for us as well as use our own solutions. <\/p>\n<h2>Let the Bug Hunt Begin<\/h2>\n<p>While analytics and crash reports don\u2019t affect <em>your<\/em> app\u2019s \u201ccore\u201d functions, they\u2019re just as fundamental as the lines of code you commit.  <\/p>\n<p>With App Center, we keep track of bugs, identify impact, prioritize, and ensure we fix the right thigs at the right time.  <\/p>\n<p>To start improving your apps and keep your team focused on what matters most to your business, simply <a href=\"https:\/\/appcenter.ms\/signup\" rel=\"noopener\" target=\"_blank\">create your App Center account<\/a>, make sure you have the SDK installed, and you\u2019re ready to go!\n&nbsp;\n&nbsp;\n<em>If you haven\u2019t already, <a href=\"https:\/\/appcenter.ms\/signup\" rel=\"noopener\" target=\"_blank\"><em>create your Visual Studio App Center account<\/em><\/a>, connect your first app, and start shipping better apps now. <\/p>\n<p>Have an account? <a href=\"https:\/\/appcenter.ms\/login\" rel=\"noopener\" target=\"_blank\"><em>Log in<\/em><\/a> and let us know what you\u2019re working on! \n&nbsp;\n&nbsp;\n<a href=\"https:\/\/appcenter.ms\/signup\"><img decoding=\"async\" src=\"\" alt=\"Get started now button\" width=\"200\" class=\"aligncenter size-full wp-image-2585\" \/><\/a>\n&nbsp;\n&nbsp;\n<strong>About the Author<\/strong> <\/p>\n<p>Miguel Cervantes is the co-founder and CTO of <a href=\"https:\/\/www.payit.mx\/\" rel=\"noopener\" target=\"_blank\"><em>Payit<\/em><\/a>, Mexico\u2019s first peer-to-peer mobile payment platform. Prior to Payit, Miguel used his expertise as a senior consultant and technical lead at Genesys, focused on developing desktop and web apps for the banking and telecommunications industry. In his spare time, Miguel helps aspiring developers, both as a Collective Academy Master\u2019s program mentor and as a Mobile Development course Professor at Universidad Panamericana.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a special guest post from Miguel Cervantes, CTO at Payit. &nbsp; It\u2019s every developer\u2019s nightmare: something goes wrong with your app in the wild, with real users, or, even worse, when you\u2019re showing it to a venture capitalist, potential client, or at public event. In the moment, we usually have no idea what\u2019s [&hellip;]<\/p>\n","protected":false},"author":42,"featured_media":38034,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[16],"tags":[],"class_list":["post-3065","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobiledev"],"acf":[],"blog_post_summary":"<p>This is a special guest post from Miguel Cervantes, CTO at Payit. &nbsp; It\u2019s every developer\u2019s nightmare: something goes wrong with your app in the wild, with real users, or, even worse, when you\u2019re showing it to a venture capitalist, potential client, or at public event. In the moment, we usually have no idea what\u2019s [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/appcenter\/wp-json\/wp\/v2\/posts\/3065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/appcenter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/appcenter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/appcenter\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/appcenter\/wp-json\/wp\/v2\/comments?post=3065"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/appcenter\/wp-json\/wp\/v2\/posts\/3065\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/appcenter\/wp-json\/wp\/v2\/media\/38034"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/appcenter\/wp-json\/wp\/v2\/media?parent=3065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/appcenter\/wp-json\/wp\/v2\/categories?post=3065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/appcenter\/wp-json\/wp\/v2\/tags?post=3065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}