Customer Support in Silverlight

Imagine the following

• You have built the world's best Silverlight twitter client, but every now and then your app crashes
  OR
• You deployed your great Line Of Business Silverlight application, but you have no idea if people like it or not
  OR
• Every now and then you get a phone call from your customer: "I cant see the details"
  

So what do you do?

Instead of having endless support calls, email conversations, tracing in log files, lookups in log-databases etc… use the below Feedback Control

 

With this Feedback control you will get:

1. A screenshot of what the user is looking currently at
2. All system information like
   1. OS version
   2. Last reboot
   3. Silverlight version
   4. Your application version
   5. …. and heaps more…

 

Demo of the control embedded in my awesome Silverlight demo app

 

Demo of my Silverlight demo LOB here (new window) 

 

How does it work?

1. Create a screenshot of the current Silverlight app with a WriteableBitmap

feedback.ScreenShot = new WriteableBitmap(this.LayoutRoot, null);

2. Collect system information in Silverlight with classes like

• Environment
• HtmlPage.Document
• HtmlPage.BrowserInformation
• Application.Current.Host
• …

            // Collect system info
            StringBuilder sbStringBuilder = new StringBuilder();

            sbStringBuilder.AppendLine("OSVersion: " + Environment.OSVersion);
            sbStringBuilder.AppendLine("System start: " + Environment.TickCount.ConvertToNiceTime());
            sbStringBuilder.AppendLine("CLR Version: " + Environment.Version);

3. Upload the screen to your server by converting the WriteableBitmap to a PNG

                ImageTools.Image image = ImageTools.ImageExtensions.ToImage(_screenShot);

                using (MemoryStream writestream = new MemoryStream())
                {

                    PngEncoder encoder = new PngEncoder();
                    encoder.Encode(image, writestream);

                    byte[] bytes = writestream.ToArray();

                    MemoryStream readStream = new MemoryStream(bytes);

                    UploadFile(readStream);
                }

The conversion to PNG is done via this nice ImageTools library from codeplex (PNGEncoder can be found there)

 

The file upload is done via a nice and easy HTTPHandler on the server side that receives PNG's and saves them to a specific folder
More info here in Tim Heuer's video about Uploading files in Silverlight with source code

    public class FileUploadReceiver : IHttpHandler
    {
         private const string UploadFolder = @"C:\temp\Upload";


        public void ProcessRequest(HttpContext context)
        {
            using (FileStream fs = File.Create(FileTools.GetUniqueFilename(UploadFolder, ".png")))
            {
                FileTools.SaveFile(context.Request.InputStream, fs);
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

 

All done!

What I didn't want

• Hard to setup
• Hard to maintain and fragile over time
  • 1 upload folder has to be writeable
  • Hint: Make the File upload (URL) global in your company (feedback.mycompany.com) and you don't have to worry about having the file upload handler in the same project
• No heavy CPU lifting on the client NOR server
• Hard to use user interface
• Bad user experience because of copying and pasting screens or sysinfo from different places

 

How to use it in your own solution?

1. Download from github
   1. Feedback control
      http://github.com/peitor/silverlight-feedback/tree/master/Silverlight-LOB-Demo-Application/Silverlight-LOB-Demo-Application/FeedbackControl/
   2. File upload handlers
      http://github.com/peitor/silverlight-feedback/tree/master/Silverlight-LOB-Demo-Application/Silverlight-LOB-Demo-Application.Web/UploadHandlers/
2. Copy the Feedback control to your Silverlight app
3. Fix the Upload URLs
   
   string _baseUrl = "http://{0}/Silverlight-Feedback/UploadHandlers/";
4. Download ImageTools library from codeplex and add 3 references to your Silverlight app
   1. ImageTools
   2. ImageTools.IO.Png
   3. ImageTools.Utils
5. Insert the following code on your "Feedback" button or "About" button
   
   // Show window and we are done
   FeedbackWindow feedback = new FeedbackWindow();
   feedback.ScreenShot = new WriteableBitmap(this.LayoutRoot, null);
   feedback.Show();

Done with Silverlight
In your web app

1. Copy the Upload handlers to your Web app
2. Fix the Upload folder in the web.config "FeedBackUploadFolder"

All done - Have fun!

 
Whole demo solution can be found here
http://github.com/peitor/silverlight-feedback

And the current version as per 2010-06-06 here
Single zip file 600KB
some were worried to install git ;-)

 

PS

#1

Make sure to have a note about Privacy!

 

#2
Add the upload folder test to your vsValidate page and check if the folder is writeable from your web app domain user

Figure: Make sure to verify that your upload folders is writeable on your zsValidate page. Do you have a zsValidate page to make sure your website is healthy?

 

#3
Imagine the following scenario

1. During a customer support phone call, you told your user to reboot his machine
2. The user reboots his machine
3. He sends you his feedback with sys info
4. You look at the provided system information and see

Name: Jimmy the client
Contact: jimmy@gfader.com
Comment: This is a great app! But crashes on me.

SysInfo:
UserName: Jimmy Muster
Roles: Administrator
LOB Silverlight version: 1.0.0.0
----

OSVersion: Microsoft Windows NT 6.1.7600.0
System start: 6 h. 33 min. 6 sec.   <-----  YOU SAID YOU DID A REBOOT
CLR Version: 4.0.50524.0
Host.Source: http://localhost/Silverlight-Feedback/ClientBin/Silverlight-LOB-Demo-Application.xap
Host: localhost
Host.Port: 80
BrowserInformation.Name: Netscape
BrowserInformation.BrowserVersion: 5.0
BrowserInformation.Platform: Win32
BrowserInformation.ProductName: Firefox
BrowserInformation.ProductVersion: 3.6.3
BrowserInformation.UserAgent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 GTB7.0
BrowserInformation.CookiesEnabled: True
Windowless: False
MaxFrameRate: 60
AverageProcessLoad: 0
AverageProcessorLoad: 0
GpuCollection.Count: 2
ID:1031, 7.15.11.7644, 4318
ID:1031, 7.15.11.7644, 4318