{"id":14165,"date":"2017-08-11T14:00:00","date_gmt":"2017-08-11T14:00:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/premier_developer\/?p=14165"},"modified":"2019-03-05T11:44:37","modified_gmt":"2019-03-05T18:44:37","slug":"monitor-your-xamarin-forms-application-with-mobile-center","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/premier-developer\/monitor-your-xamarin-forms-application-with-mobile-center\/","title":{"rendered":"Monitor your Xamarin Forms application with Mobile Center"},"content":{"rendered":"<p>This article on using Mobile Center to monitor your Xamarin Forms application comes to us from Premier Developer consultant <a href=\"https:\/\/www.linkedin.com\/in\/gustavovaro\/\" target=\"_blank\" rel=\"noopener\">Gustavo Varo<\/a>.<\/p>\n<hr \/>\n<p>More and more customers are asking about Mobile Center and how it can help them to monitor and analyze the customer experience. A lot of customers mentioned that they know about Mobile Center, they know how Mobile Center can help them, but when they try to implement the Mobile Center SDK into their apps they find issues and are not able to retrieve any logs or crashes even though they know the app is crashing on their user\u2019s devices.<\/p>\n<p>In this blog post, we will go over step by step on how to integrate a Xamarin Forms app with Mobile Center in order to analyze and discover crash problems. We will be focusing our Xamarin Forms App running in an iOS device\/Simulator.<\/p>\n<p>To get started, we need to have an account with Mobile Center. Go to <a href=\"http:\/\/mobile.azure.com\">http:\/\/mobile.azure.com<\/a><\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/31\/2019\/04\/clip_image001.jpg\"><img decoding=\"async\" title=\"clip_image001\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/31\/2019\/04\/clip_image001_thumb.jpg\" alt=\"clip_image001\" width=\"628\" height=\"600\" border=\"0\" \/><\/a><\/p>\n<p>If you already have an account, just log in using your credentials.\u00a0 Otherwise, select the option to create a new account.<\/p>\n<p>Once logged in, you will see a home page like the one below, where you can visualize your current apps.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-35707\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam1.jpg\" alt=\"\" width=\"628\" height=\"502\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam1.jpg 628w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam1-300x240.jpg 300w\" sizes=\"(max-width: 628px) 100vw, 628px\" \/><\/p>\n<p>Let\u2019s add a new app. To create a new app, click on the Add new app button.<\/p>\n<p>Enter the App name, select the OS and platform and click Add new app. In our example, we will be developing an iOS app with Xamarin Forms.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/31\/2019\/04\/clip_image0031.jpg\"><img decoding=\"async\" title=\"clip_image003\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/31\/2019\/04\/clip_image003_thumb1.jpg\" alt=\"clip_image003\" width=\"628\" height=\"502\" border=\"0\" \/><\/a><\/p>\n<p>Now, open Visual Studio and create a new Xamarin Forms project.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-35708\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam2.jpg\" alt=\"\" width=\"628\" height=\"437\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam2.jpg 628w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam2-300x209.jpg 300w\" sizes=\"(max-width: 628px) 100vw, 628px\" \/><\/p>\n<p>We will be using Xamarin Forms and a Portable Class Library.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/31\/2019\/04\/clip_image0051.jpg\"><img decoding=\"async\" title=\"clip_image005\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/31\/2019\/04\/clip_image005_thumb1.jpg\" alt=\"clip_image005\" width=\"628\" height=\"347\" border=\"0\" \/><\/a><\/p>\n<p>Once the project is created, we need to add the Mobile Center SDK reference to both PCL and iOS projects.<\/p>\n<p>To do that, right click on the reference project and click Manage NuGet Packages.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/31\/2019\/04\/clip_image007.jpg\"><img decoding=\"async\" title=\"clip_image007\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/31\/2019\/04\/clip_image007_thumb.jpg\" alt=\"clip_image007\" width=\"340\" height=\"484\" border=\"0\" \/><\/a><\/p>\n<p>Search for Mobile Center and add the following references:<\/p>\n<ul>\n<li>Microsoft.Azure.Mobile.Analytics<\/li>\n<li>Microsoft.Azure.Mobile.Crashes<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-35710\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam3.jpg\" alt=\"\" width=\"629\" height=\"344\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam3.jpg 629w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam3-300x164.jpg 300w\" sizes=\"(max-width: 629px) 100vw, 629px\" \/><\/p>\n<p>Remember to repeat this step and add the same references to your iOS project.<\/p>\n<p>Now, on your PCL project, open the App.xaml.cs file.<\/p>\n<p>Make sure to add the following using statements to your code:<\/p>\n<ul>\n<li><span style=\"font-family: Courier New;\">using Microsoft.Azure.Mobile;<\/span><\/li>\n<li><span style=\"font-family: Courier New;\">using Microsoft.Azure.Mobile.Analytics;<\/span><\/li>\n<li><span style=\"font-family: Courier New;\">using Microsoft.Azure.Mobile.Crashes;<\/span><\/li>\n<\/ul>\n<p>On the same class, look for the OnStart method and add the following function call:<\/p>\n<pre class=\"lang:default decode:true \">MobileCenter.Start(\"ios={Your iOS App secret here}\", typeof(Analytics), typeof(Crashes));<\/pre>\n<p>This call will initialize the Mobile Center SDK for the iOS platform. Since we are using Xamarin Forms, we can also provide Android and UWP platform here. To provide more than one platform simply separate the platform with a semicolon like shown below:<\/p>\n<pre class=\"lang:default decode:true \">MobileCenter.Start(\"ios={Your iOS App secret here};uwp={Your UWP App secret here};android={Your Android App secret here}\", typeof(Analytics), typeof(Crashes));<\/pre>\n<p>If you have multiple platforms, make sure to create multiple apps on Mobile Center always selecting the appropriate platform.<\/p>\n<p>To find out the App Secret of a specific app, use the top right button Manage app on the App overview page. A popup will appear and we can see below.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/31\/2019\/04\/clip_image009.jpg\"><img decoding=\"async\" title=\"clip_image009\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/31\/2019\/04\/clip_image009_thumb.jpg\" alt=\"clip_image009\" width=\"628\" height=\"492\" border=\"0\" \/><\/a><\/p>\n<p>Once you have the App Secret, update it on your OnStart method. At this point your code should look like this:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-35711\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam4.jpg\" alt=\"\" width=\"629\" height=\"344\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam4.jpg 629w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam4-300x164.jpg 300w\" sizes=\"(max-width: 629px) 100vw, 629px\" \/><\/p>\n<p>Open the MainPage.xaml file and add a button on it.<\/p>\n<pre class=\"lang:default decode:true\">&lt;Button Text=\"Testing Mobile Center!\" VerticalOptions=\"Center\" HorizontalOptions=\"Center\" Clicked=\"OnButtonClicked\"\/&gt;<\/pre>\n<p>Your page should look like this:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/31\/2019\/04\/clip_image011.jpg\"><img decoding=\"async\" title=\"clip_image011\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/31\/2019\/04\/clip_image011_thumb.jpg\" alt=\"clip_image011\" width=\"629\" height=\"344\" border=\"0\" \/><\/a><\/p>\n<p>Open the MainPage.xaml.cs and add the follow using statement to your code:<\/p>\n<ul>\n<li><span style=\"font-family: Courier New;\">using Microsoft.Azure.Mobile.Analytics;<\/span><\/li>\n<\/ul>\n<p>Add your OnButtonClicked method and inside this method let\u2019s add a TrackEvent with Mobile Center.<\/p>\n<p>The TrackEvent method will receive the event we want to track and a dictionary with any information that may be relevant to analyze.<\/p>\n<pre class=\"lang:default decode:true \">public void OnButtonClicked(object sender, EventArgs e)\r\n{\r\nvar properties = new Dictionary&lt;string, string&gt;\r\n     {\r\n         { \"Settings\", \"Yes\" }\r\n     };\r\n\r\n     Analytics.TrackEvent(\"Button Clicked\", properties);\r\n}\r\n<\/pre>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-35719\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam5.jpg\" alt=\"\" width=\"629\" height=\"344\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam5.jpg 629w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam5-300x164.jpg 300w\" sizes=\"(max-width: 629px) 100vw, 629px\" \/><\/p>\n<p>Now, let\u2019s run our app. We will be using the simulator for that. Make sure to set it on Visual Studio and press run.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/31\/2019\/04\/clip_image0132.jpg\"><img decoding=\"async\" title=\"clip_image013\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/31\/2019\/04\/clip_image013_thumb.jpg\" alt=\"clip_image013\" width=\"629\" height=\"344\" border=\"0\" \/><\/a><\/p>\n<p>Once the Simulator loads the app, click on the button.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/31\/2019\/04\/clip_image0142.jpg\"><img decoding=\"async\" title=\"clip_image014\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/31\/2019\/04\/clip_image014_thumb2.jpg\" alt=\"clip_image014\" width=\"373\" height=\"659\" border=\"0\" \/><\/a><\/p>\n<p>Now go back to Mobile Center, and on the left side pane, click on Analytics, you should see some information.<\/p>\n<p>It may take a few seconds to show it, and depending on the situation it will only show once the user restarts the app.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/31\/2019\/04\/clip_image015.jpg\"><img decoding=\"async\" title=\"clip_image015\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/31\/2019\/04\/clip_image015_thumb.jpg\" alt=\"clip_image015\" width=\"628\" height=\"342\" border=\"0\" \/><\/a><\/p>\n<p>Click on the Events and the event we have setup should appear on Mobile Center.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-35722\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam6.jpg\" alt=\"\" width=\"628\" height=\"342\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam6.jpg 628w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam6-300x163.jpg 300w\" sizes=\"(max-width: 628px) 100vw, 628px\" \/><\/p>\n<p>If you then click on the specific event it will give you all the details about the event.<\/p>\n<p>Now let\u2019s force the app to crash and see how Mobile Center handles that.<\/p>\n<p>On the same button event, we will throw an exception, to do that add the following line:<\/p>\n<pre class=\"lang:default decode:true \">throw new NullReferenceException();<\/pre>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-35724\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam7.jpg\" alt=\"\" width=\"629\" height=\"344\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam7.jpg 629w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam7-300x164.jpg 300w\" sizes=\"(max-width: 629px) 100vw, 629px\" \/><\/p>\n<p>Run the app again and click the button.<\/p>\n<p>If you are in debug mode, Visual Studio may break the debugger once the exception is thrown, just click continue to keep running the app and the app should terminate.<\/p>\n<p>Since the App has crashed, Mobile Center still does not have the info, but once you re-launch the app, go to Mobile Center and click on the Crashes menu.<\/p>\n<p>The crash that just happened on your app should now appear there.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-35725\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam8.jpg\" alt=\"\" width=\"628\" height=\"342\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam8.jpg 628w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam8-300x163.jpg 300w\" sizes=\"(max-width: 628px) 100vw, 628px\" \/><\/p>\n<p>You can click on the Exception and see more details about the crash. e.g.: callstack, file and line where the exception happened, etc.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-35727\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam9.jpg\" alt=\"\" width=\"628\" height=\"342\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam9.jpg 628w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2017\/08\/xam9-300x163.jpg 300w\" sizes=\"(max-width: 628px) 100vw, 628px\" \/><\/p>\n<p>As you can see Mobile Center provides a powerful SDK that can help us to analyze how our apps are behaving out there. We don\u2019t need to wonder how users are using the app and what type of crashes are happening on any device.<\/p>\n<p>Hope you have enjoyed this post and see you next time!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article on using Mobile Center to monitor your Xamarin Forms application comes to us from Premier Developer consultant Gustavo Varo. More and more customers are asking about Mobile Center and how it can help them to monitor and analyze the customer experience. A lot of customers mentioned that they know about Mobile Center, they [&hellip;]<\/p>\n","protected":false},"author":581,"featured_media":37840,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[228,271,88,89],"class_list":["post-14165","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-permierdev","tag-gustavo-varo","tag-mobile-center","tag-xamarin","tag-xamarin-forms"],"acf":[],"blog_post_summary":"<p>This article on using Mobile Center to monitor your Xamarin Forms application comes to us from Premier Developer consultant Gustavo Varo. More and more customers are asking about Mobile Center and how it can help them to monitor and analyze the customer experience. A lot of customers mentioned that they know about Mobile Center, they [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/14165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/comments?post=14165"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/14165\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media\/37840"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media?parent=14165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/categories?post=14165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/tags?post=14165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}