Telerik blogs

Introduction

Hello everyone,

I’m sure by now you have seen our Diagnostics control that allows your end user to send crash reports anytime your Windows Phone app throws an exception. With this control, you would typically receive the crash report via email or send the report to a web service that the developer has setup somewhere. While this approach works, it still depends on the user having internet access or the developer setting up a web service manually. We thought of a better way to implement this functionality with less work for you, the developer. This is where CloudDiagnostics comes in. With CloudDiagnotics, you can receive crash reports directly into your cloud account via Telerik Everlive Cloud Services. Also, CoudDiagnostics is aware of internet connectivity and will send the crash report only when there’s an internet connection available.

Note: The source code for this project can be found here.

Getting Setup

Before we can get started, make sure that you have the latest bits installed. The Q2 2013 SP1 release contains both our traditional components as well as our cloud components. Please note that in order to get the cloud templates, you will need to uninstall the official Q2 2013 release bits and then install the SP1 release.

After you have the bits installed, you will find a new templates as shown in Figure 1.

image

Figure 1: The new cloud template installed with RadControls for Windows Phone 8.

The “Telerik Cloud Powered Windows Phone App” template is where we are going to begin, so select it and give it a name and press OK.

After doing so, you will be presented with a Cloud Services Configuration dialog, where you will need to enter your Telerik username and password and accept the terms and conditions. From this screen you can either select an existing project or create a new one. Let’s create a new one as shown in Figure 2. This information will carry over to our Everlive account which we will take a look at shortly.

 2

Figure 2: Creating a new project with our Cloud Controls.

From here, we can simply click “Create” then finish and our project will be loaded in Visual Studio.

Hang on, what’s happening on the backend?

As our project begins spinning up, our application has gone out to our Everlive service and created a “User and File management” tables as well as given our project an API key. This API key has been automatically added to our App.xaml.cs and will be called upon startup. It will also initialize our CloudProvider to be used by the app. We can investigate this by looking into the InitializeProvider method as shown below.

private void InitializeProvider()
{
    EverliveProviderSettings settings=new EverliveProviderSettings();
    settings.ApiKey="YOUR_API_KEY";
    CloudProvider.Init(ProviderType.Everlive, settings);
}

If we log into everlive.com, we will see our newly created project as shown in Figure 3.

3

Figure 3: Everlive showing our new project we just created.

The name and description carried over from Visual Studio as stated earlier and we are now ready to implement the CloudDiagnostics feature.

Setting up our Content Type

We will need to click on “Create a Content Type” and give it the name of EverliveDiagnosticsInfo with the following fields:

  • ExceptionInfo - type text
  • StackTraceHashCode - type number

Our final structure for this content type will look like the following as shown in Figure 4.

4

Figure 4: The completed content type for the CloudDiagnostics control.

By default if the user is not logged in the data is not captured, to allow anonymous users to submit this data then we will need to give them the “Create” permission as shown in Figure 5 and 6.

You can set the permissions by clicking on the setting icon of the content type and selecting permissions.

5

Figure 5: Adding the proper permissions to the anonymous role.

6

Figure 6: Adding the create permission to the anonymous role.

This is all that is required for our Cloud Control to capture error messages anonymously. Let’s move back into Visual Studio 2012 and write some code.

Setting up App.xaml.cs

Let’s begin by adding a property for RadCloudDiagnostics that we can call from anywhere inside our app and a method to initialize the control.

public RadCloudDiagnostics Diagnostics { get; set; }
 
private void InitializeDiagnostics()
{
    RadCloudDiagnostics diagnostics=new RadCloudDiagnostics();
    Diagnostics=diagnostics;
    diagnostics.Init();
}

While we are here, we will also need to call the method at the end of the App constructor.

this.InitializeDiagnostics();

Our next step is to add our helper class to provide device/stack trace information once the application has crashed as shown below:

// Code to execute when the application is launching (eg, from Start)
// This code will not execute when the application is reactivated
private void Application_Launching(object sender, LaunchingEventArgs e)
{
    ApplicationUsageHelper.Init("1.0");
}

Also to reinitialize the helper if the app is coming out of a tombstoned state:

// Code to execute when the application is activated (brought to foreground)
// This code will not execute when the application is first launched
private void Application_Activated(object sender, ActivatedEventArgs e)
{
    ApplicationUsageHelper.OnApplicationActivated();
}

Let’s Generate an Exception

Switch over to the MainPage.xaml and add a button with a click event handler inside the ContentPanel.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
 <Button Content="Crash Me" Click="Button_Click"/>
</Grid>

Switch to the MainPage.xaml.cs and in the following code:

private void Button_Click(object sender, RoutedEventArgs e)
{
    (Application.Current as App).Diagnostics.ExceptionOccurred += new EventHandler<ExceptionOccurredEventArgs>(OnDiagnostics_ExceptionOccurred);
 throw new Exception("Ka-Boom!");
}
 
private async void OnDiagnostics_ExceptionOccurred(object sender, ExceptionOccurredEventArgs e)
{
    e.Handled = true;
    MessageBoxClosedEventArgs args = await RadMessageBox.ShowAsync("Would you like to generate a preview?", "Sending Data to Cloud", MessageBoxButtons.YesNo);
 if (args.Result == DialogResult.OK)
    {
        MessageBox.Show((Application.Current as App).Diagnostics.DiagnosticInfo);
    }
}

Once the button is clicked, we are adding an ExceptionOccured event handler as well as manually triggering an error. One the error has been thrown, we are displaying a MessageBox asking the user if they would like to see the error or not. Obviously, you can remove this code if you do not wish to prompt the user.

Running the app

If you switch the app from Device to Emulator, you will get the following error message, “Deployment failed because an app with target platform ARM cannot be deployed to Emulator WVGA 512MB. If the target platform is win32/ x86, select an emulator. If the target platform is ARM, select Device.” This error occurs because the cloud controls are either built against x86 (for the emulator) or ARM (for deploying on devices) because of the local storage (offline support) implemented with SQLite. If you would like to test with the emulator, you will need to go to:

1. Build -> Configuration Manager.

2. There is a ComboBox in the upper right named 'Active solution platform' -> choose x86.

3. Click on 'Close' button of dialog.

Launch the application in the emulator or device (depending on your preference) and click on the button and it should have triggered an error message. Now, you can log back into everlive.com and click on the EverliveDiagnosticsInfo content type and see the exception as shown in Figure 7.

7

Figure 7: Content Type showing the Exception Information as well as additional info.

If you click on the Exception Message, then you will get a detailed log as shown below:

Id: 6888c2d0-ed86-11e2-a327-4d1b22baae9c

Created by: Backend

Modified by: Backend

Created at: Jul 15, 2013, 02:40 PM

Modified at: Jul 15, 2013, 02:40 PM

ExceptionInfo:

[Type]:[Exception]
[ExceptionMessage]:[Ka-Boom!]
[StackTrace]:[
   at CloudDiagnostics.MainPage.Button_Click(Object sender, RoutedEventArgs e)
   at System.Windows.Controls.Primitives.ButtonBase.OnClick()
   at System.Windows.Controls.Button.OnClick()
   at System.Windows.Controls.Primitives.ButtonBase.OnMouseLeftButtonUp(MouseButtonEventArgs e)
   at System.Windows.Controls.Control.OnMouseLeftButtonUp(Control ctrl, EventArgs e)
   at MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, Int32 actualArgsTypeIndex, String eventName)]
[InnerException]:[none]
[OccurrenceDate]:[Mon, 15 Jul 2013 19:40:17 GMT]
[AppInstallDate]:[Mon, 15 Jul 2013 19:37:49 GMT]
[AppTotalRuns]:[3]
[AppRunsAfterLastUpdate]:[3]
[AppPreviousRunDate]:[Mon, 15 Jul 2013 19:38:48 GMT]
[AppVersion]:[1.0]
[Culture]:[en-US]
[CurrentPageSource]:[/MainPage.xaml]
[NavigationStack]:[]
[DeviceManufacturer]:[Microsoft]
[DeviceModel]:[XDeviceEmulator]
[DeviceHardwareVersion]:[0]
[DeviceFirmwareVersion]:[0]
[OSVersion]:[Microsoft Windows NT 8.0.9903.0]
[CLRVersion]:[4.0.50829.0]
[DeviceType]:[Emulator]
[NetworkType]:[Wireless80211]
[DeviceTotalMemory(Mb)]:[511.5508]
[AppPeakMemoryUsage(Mb)]:[12.09375]
[AppCurrentMemoryUsage(Mb)]:[12.07031]
[IsoStorageAvailableSpace(Mb)]:[5025]

StackTraceHashCode:

272233772

In this example, I am using the built-in emulator. This should give you an idea of the amount of information captured with this powerful component.

Conclusion

We looked at a new cloud component today called CloudDiagnostics that allows a developer to receive anonymous crash reports directly to their Everlive account. As you can tell from the exception information listed above, it contains a lot of details that can help you track down the bug and give your users a great app experience! We’d love to hear any feedback on this control, so please leave them below.

The source code for this project can be found here.

Michael Crump (@mbcrump)

image


MichaelCrump
About the Author

Michael Crump

is a Microsoft MVP, Pluralsight and MSDN author as well as an international speaker. He works at Telerik with a focus on everything mobile.  You can follow him on Twitter at @mbcrump or keep up with his various blogs by visiting his Telerik Blog or his Personal Blog.

Comments

Comments are disabled in preview mode.