EmberJS Error Logging in Production

In order to log all errors in an EmberJS application, EmberJS provides a global hook called onerror

Here is a link to the official documentation - http://emberjs.com/guides/understanding-ember/debugging/#toc_implement-an-ember-onerror-hook-to-log-all-errors-in-production

Code sample from the documentation (v 1.5.1) look like this

1
2
3
4
5
6
7
8
9
Ember.onerror = function(error) {
Em.$.ajax('/error-notification', {
type: 'POST',
data: {
stack: error.stack,
otherInformation: 'exception message'
}
});
}

What this piece of code does is, whenever an error occurs that stack trace is send to the server using an AJAX request. This will works great for most of the scenarios but….

Consider a situation where an error occurs inside a mouse move event handler. Then you will be trying to sending hundreds of requests to server in short interval. This can bring down your server if not handled properly, it’s like DDOS-ing your own server.

Good approach will be to control the rate at which errors are send to the server for logging. This can be done using a concept called Throttling - which ensures that the target method is never called more frequently than the specified period of time.

Google for JavaScript Throttling you can find lot different implementations. EmberJS also provide it’s own throttling function Ember.run.throttle

Here is the example from the official EmberJS website

1
2
3
4
5
var myFunc = function() { console.log(this.name + ' ran.'); };
var myContext = {name: 'throttle'};

Ember.run.throttle(myContext, myFunc, 150);
// myFunc is invoked with context myContext

This throttling function can be used for sending errors to the server. Here is a working demo which shows the throttled error logging -
http://cvrajeesh.github.io/emberjs/errorhandling.html

EmberJS - How to Detect User Inactivity

Scenario:

I am working on a web application that has a Single Page Application module which is built using EmberJS framework.

This EmberJS application is a page designer where user can drag and drop items to the design surface and change properties of these items. Finally when the page is ready, he can save the changes back to server.

Problem:

Whenever a user works on the page designer for long period of time without saving the changes in between - finally when he try to save all of his changes in one shot, server side session was already timed out.

Solution:

Implemented an API on the server side which can refresh the session if this API is invoked.

So on the EmberJS application side we had to calculate how long a user not active. Then we can check for this inactivity time periodically and decide whether to refresh session or not.

An easy way to do it in EmberJS is by hooking to the mousemove, keydown events of the ApplicationView. Details can be found in the EmberJS documentation http://emberjs.com/api/classes/Ember.View.html#toc_responding-to-browser-events

Here is code sample which does this

First I am creating the application object with an additional property for tracking the last active time.

1
2
3
4
5
6
var App = Ember.Application.create({
lastActiveTime: null,
ready: function(){
App.lastActiveTime = new Date();
}
});

After that, hook the events in which you are interested in ApplicationView, which will update the last active time defined in the application object.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
App.ApplicationView = Ember.View.extend({
templateName: 'application',

mouseMove: function() {
App.lastActiveTime = new Date();
},

touchStart: function() {
App.lastActiveTime = new Date();
},

keyDown: function() {
App.lastActiveTime = new Date();
}
});

In our case, I am interested on mouseMove, touchStart (for touch devices) and keyDown events. When they are getting fired I will update the last active time with current time.

Now you can use the last active time property to find out how long the user is active.

Demo: http://cvrajeesh.github.io/emberjs/inactivity.html

This demo uses moment.js for calculating time difference as well as for formatting the time.

Visual Studio : Debugging Silverlight Application with Chrome and Firefox

Here is a tip if you want to debug Silverlight applications from Visual Studio 2012 if it is running in Google Chrome or Firefox

Google Chrome :

  1. Run the application and select Debug –> Attach to Process from the menu
  2. From the Available Processes list, look for process named “chrome.exe” with type Silverlight
  3. Select that process and click the Attach button

Here is screenshot from my machine
Visual Studio attach to Silverlight in Chrome

Mozilla Firefox :

Firefox has a slightly different approach

  1. Run the application and select Debug –> Attach to Process from the menu
  2. From the Available Processes list, look for process named plugin-container.exe
  3. Select that process and click the Attach button

Here is the screenshot
Visual Studio attach to Silverlight in Firefox

Voila!!! now you are able to get the breakpoints in Visual Studio

One of the Top E-Commerce Website in India Stores Passwords Incorrectly

This incident made me feel very bad – couple of weeks before I ordered a product from naaptol a well-known E-Commerce website in India. It was the first time I was ordering something from them. So I had to register first, after the registration was completed got a confirm email from them

Registration confirmation email from naaptol

Oops!!! My password is in clear text.

I thought they might be generating the email during the registration process before it is stored in their database. Without bothering much, I ordered the item. Thought about investigating about the “clear text password” little bit, but somehow forgot it.

After few days when I got the product which I have ordered, it reminded me about this password incident. So in order see whether they are hashing my password or not, I used their Forgot my password option. It asked for my email address. After the submission got a message saying

We’ have sent you an e-mail at the submitted ID including instructions. You’ll be back to your shopping place in no matter of time.

As expected, got an email from them

Forgot my password email from naaptol

It reads Here is your new Login and Password and surprisingly password they gave is same as my old password even though in the email it is mentioned that they are sending a new password. It confirmed that they are not hashing the passwords.

Will they be storing it in plain text? Who knows…

Did someone tell you internet is not a good place to store your secrets?

I tried to play a nice role, so sent them an email telling about about the password hashing problem. You know what happened… no reply from them till now.

If you are in the naaptol technical team, convince your boss about the importance of securing the password and push that functionality in the next release.

If you are a non-technical manager in naaptol, tell your developers to read this article from Jeff - You’re Probably Storing Passwords Incorrectly

Automating WYSIWYG Editors using Selenium Web Driver

Automating web application using selenium for acceptance/integration tests is very easy. Recently I have faced few issues when automating a page with a JavaScript based WYSIWYG editors.

The reason why it is hard because most of these editors create a new editable HTML document inside an iframe. There are two ways I aware that you can set text on these editors

  1. Executing a JavaScript code in the current page
  2. Sending keys on the editable iframe

Here is how I automated two WYSIWYG editors using selenium web driver.

bootstrap-wysihtml5

Website: http://jhollingworth.github.io/bootstrap-wysihtml5/

1
2
3
4
5
private void SetBootstrapWysihtml5Content(IWebElement textArea, string content)
{

string script = string.Format(@"$('#{0}').data('wysihtml5').editor.setValue('{1}');", textArea.GetAttribute("id"), content);
((IJavaScriptExecutor)this.WebDriver).ExecuteScript(script);
}

What this method does is, it accepts the TextArea web element which you are converting to an editor and the actual content to be set. Then it executes a piece of JavaScript on the current WebDriver context.

For e.g. if you have a TextArea element with id summary then executing below JavaScript statement will insert a h1 tag with “Test” to the editor

$('#summary').data('wysihtml5').editor.setValue('<h1>Test</h1>');

TinyMCE

Website: http://www.tinymce.com/

1
2
3
4
5
6
7
8
9
private void SetTinyMCEContent(IWebElement textArea, string content)
{

string textAreaId = textArea.GetAttribute("id");
string frameId = string.Format("{0}_ifr", textAreaId);
var frame = this.WebDriver.FindElement(By.Id(frameId));
this.WebDriver.SwitchTo().Frame(frame);
((IJavaScriptExecutor)this.WebDriver).ExecuteScript("document.body.innerHTML = '" + content + "'");
this.WebDriver.SwitchTo().DefaultContent();
}

This method also accepts the TextArea web element which you are converting to an editor and the actual content to be set. Then it finds the corresponding iframe and set the innerHTML by executing a JavaScript statement.

Introducing SourceCodeReader

Have you ever tried to understand a project just by going through the source code?

That’s how I do most of the time, till now I haven’t seen any up to date documentation which gives the clear understanding of how the code is implemented. In reality after a certain period during the development, documentation goes out of sync with the source code. So some one joins the project lately has only one way to understand the project Go through the source code

Sometimes I go through the open source projects hosted on either Github, Codeplex or Google code. All the hosting site provide you with a user interface for browsing through the source code with syntax highlighting support, which is nice. The problem I had with this is – if I see a object creation statement, method call there is no way for me to find out how it is implemented other than manually going through the files and finding it out.

Most of the full blown editors provide a feature where you can navigate to the implementation directly from where it is used for e.g. Microsoft Visual Studio provides Go To Definition feature. I find this feature very much useful for understanding the project. Only draw back with this approach is you have to completely get the latest version of source code to your local machine.

SourceCodeReader is trying solve this navigation problem on the web. With this application you can open a project and browse through the files with code navigation support.

Source code for this project can be found at https://github.com/cvrajeesh/SourceCodeReader

Limitations

  1. Now supports only Github code repository
  2. Only supports .Net C# projects, other type of projects also works without code navigation support

How to use this application

Go to SourceCodeReader and enter the URL of a C# project on Github

SourceCodeReader home page

Once you have entered a Github project link and open the project, it get the source code from the Github and present you with file browser.

SourceCodeReader project directory

When you navigate to a C# file you will be able to see clickable links for identifiers which takes you the file location where that is declared.

SourceCodeReader Go To Definition feature

Sample projects :

Hope you liked this idea, please provide me with your valuable feedback.

Integrating BrowserID In To Your ASP.NET MVC Application

BrowserID is a decentralized identity system which verifies the ownership of an email address in a secure manner, without the use of any application specific authentication mechanism. Which means, you don’t need to provide an login forms in your application, instead use BrowserID feature.

BrowserId screenshot

I am not going to explain in detail about this, but you can follow the links below to know more about it

I have created demo application to show how it could be integrated into ASP.NET MVC (it could applied to ASP.NET Forms also) application.

How the Demo Application works

In this demo, Secret page link can only accessed if you have logged into the application. In order to login I have provided a Sign in button, like most of the applications, but when you click on it. It will open a pop-up window (make sure you have disable pop-up blockers), which is a URL from https://browserid.org not from my application. If you don’t have a BrowserID create one, otherwise enter the Email address and Password. Then follow the steps and finally click on the Sign in button, which log you into the application and from there you can access the Secret page link.

How to implement this in ASP.NET MVC

Enable BrowserID in your application :

Include the BrowserID javascript file https://browserid.org/include.js to your master page
<script src="@Url.Content("https://browserid.org/include.js")" type="text/javascript"></script>

Identify the User :

Instead of displaying a login form on your site which takes a username and password, it uses the BrowserID JavaScript API when the user clicks your sign-in button. For that I have added the below script to the _LogOnPartial.cshtml which comes with the ASP.NET MVC application you have created

1
2
3
4
5
6
7
$(document).ready(function () {
$('#login').click(function () {
navigator.id.getVerifiedEmail(gotVerifiedEmail);
});
.....
.....
});

Upon a successful sign-in, you’ll be called back with an assertion, a string containing a signed claim that proves the user is who they say they are. Which is passed to a method called gotVerifiedEmail

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// a handler that is passed an assertion after the user logs in via the
// browserid dialog
function gotVerifiedEmail(assertion) {
// got an assertion, now send it up to the server for verification
if (assertion !== null) {
$.ajax({
type: 'POST',
url: '/Account/LogOn',
data: { assertion: assertion },
success: function (res, status, xhr) {
if (res != null) {
loggedIn(res.email);
}
},
error: function (res, status, xhr) {
alert("login failure" + res);
}
});
}
}

Which then sends a POST Request to the LogOn method on the Account controller, for verifying the assertion is correct or not. If it is a verified correctly, we will set up a forms authentication cookie so that ASP.NET feels that user has logged in to the application. Then returns the Email address back.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[HttpPost]
public ActionResult LogOn(string assertion)
{

var authentication = new BrowserIDAuthentication();
var verificationResult = authentication.Verify(assertion);
if (verificationResult.IsVerified)
{
string email = verificationResult.Email;
FormsAuthentication.SetAuthCookie(email, false);
return Json(new { email });
}

return Json(null);
}

In order to do the verification, we post the assertion to the URL provided by the Identity Authority itself (https://browserid.org/verify in this case), which will give a valid response if it is valid. The Verify method looks like this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
public VerificationResult Verify(string assertion)
{

JObject verificationResult = this.GetVerificationResult(assertion);
string email = "";
bool verified = false;

if (verificationResult != null && verificationResult["status"].ToString() == "okay")
{
email = verificationResult["email"].ToString();
verified = true;
}

return new VerificationResult {Email = email, IsVerified = verified };
}

/// <summary>
/// Gets the verification result from Identity Authority.
/// </summary>
/// <param name="assertion">The assertion.</param>
/// <returns></returns>
private JObject GetVerificationResult(string assertion)
{

// Build he request
var req = (HttpWebRequest)WebRequest.Create(IdentityAuthorityVerificationUrl);
req.Method = "POST";
req.ContentType = "application/x-www-form-urlencoded";

if (HttpContext.Current == null)
{
throw new NullReferenceException("HttContext is null. Please make sure that, your application is running in a web scenario");
}

// Build the data for posting
var payload = string.Format("assertion={0}&audience={1}", assertion, HttpContext.Current.Request.Headers["Host"]);
byte[] payloadInBytes = Encoding.UTF8.GetBytes(payload);
req.ContentLength = payloadInBytes.Length;

var dataStream = req.GetRequestStream();
dataStream.Write(payloadInBytes, 0, payloadInBytes.Length);
dataStream.Close();

JObject result = null;

var res = req.GetResponse();
dataStream = res.GetResponseStream();
if (dataStream != null)
{
var responseData = new StreamReader(dataStream).ReadToEnd();
res.Close();
dataStream.Close();
result = JObject.Parse(responseData);
}else
{
res.Close();
}

return result;
}

Hope this will help you to setup an authentication system to your application very easily and in a more secure way.

Attach to Any ASP.NET Web Server from Visual Studio in One Click

This is an update to my previous blog post Attach to Visual Studio Development Server with One Click.

The Visual Studio Macro from previous article doesn’t support IISExpress or IIS; it only supported the Visual Studio Development Server, more over it doesn’t detect latest Development Web Server WebDev.WebServer40.exe.

Now I have updated the Macro so that it will automatically detect the Web Server setting from the project properties and attach it accordingly.

Below is the code for the new Macro, I think it is self-explanatory

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Public Sub AttachToWebServer()
Dim attached As Boolean = False
Dim project As EnvDTE.Project = GetStartupProject()

If (project Is Nothing) Then
MsgBox("Couldn't find a web project that can be attached")
Return
End If

attached = AttachToProcess(project)

If (Not attached) Then
MsgBox("Couldn't attach to the process")
End If
End Sub

Private Function GetStartupProject() As EnvDTE.Project
Dim startUpProject As String = DTE.Solution.Properties.Item("StartupProject").Value

For Each currentProject As EnvDTE.Project In DTE.Solution.Projects
If currentProject.Name = startUpProject Then
Return currentProject
End If
Next
Return Nothing
End Function

Private Function AttachToProcess(ByVal project As EnvDTE.Project) As Boolean
Dim serverProcessNamePattern As String
' Using either IIS express or IIS
If project.Properties.Item("WebApplication.UseIIS").Value = "True" Then
' Using IIS Express
If project.Properties.Item("WebApplication.DevelopmentServerCommandLine").Value.ToString().Length > 0 Then
serverProcessNamePattern = ".*iisexpress.exe"
Else ' Real IIS
serverProcessNamePattern = ".*w3wp.exe"
End If

Else ' Assume development web server
serverProcessNamePattern = ".*WebDev.WebServer\d+.EXE"
End If

Return AttachToWebServer(serverProcessNamePattern)

End Function

Private Function AttachToWebServer(ByVal serverProcessNamePattern As String) As Boolean

Dim attached As Boolean = False

For Each process In DTE.Debugger.LocalProcesses
If (Regex.IsMatch(process.Name, serverProcessNamePattern)) Then
process.Attach()
attached = True
Exit For
End If
Next

Return attached
End Function

Read my previous article Attach to Visual Studio Development Server with One Click to understand how we can add this Macro as command to the Visual Studio toolbar.

Attach to Visual Studio Development Server with One Click

In my day to day work, during the development I had to attach an ASP.NET application to the development server (Cassini) several times in order to debug and fix a problem.

This task is little bit time consuming because this is how we normally do it

  1. Click on the “Attach to Process” menu under the Debug menu
  2. Select the correct process from the list of available processes
  3. Either double click on the select process or click the “Attach” button

You can reduce these into two steps, if you assign a short cut key to the Attach to Process command.

What I found is, most of the time is lost for finding and selecting the correct process from the available list of processes in the Attach to Process dialog.

So in order to be more productive, I have created a macro which will automatically attach to the Visual Studio Development Server automatically, saves your time from scroll through the big list of processes.

Below is the code for this macro

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Public Sub AttachToDevelopmentServer()
Dim attached As Boolean = False
Dim process As EnvDTE.Process
For Each process In DTE.Debugger.LocalProcesses
If (process.Name.EndsWith("WebDev.WebServer20.EXE")) Then
process.Attach()
attached = True
Exit For
End If
Next

If (Not attached) Then
MsgBox("Couldn't attach to the process")
End If

End Sub

If you don’t know to how to create a macro, these are the steps for doing it

  1. In Visual Studio Go To the Tools menu
  2. Then select the Macros and then Macros IDE (Short cut is Alt+F11). This will open up a new IDE similar to Visual Studio.
  3. In the project explorer under My Macros you will see My Module or you can create a new module by right clicking on the project, then Add -> Add Module. In my case I created a new module and called it as Extensions
  4. Copy and paste above subroutine to that module.

Now we have to execute the newly created macros on clicking on a toolbar button. For that, follow these steps

  1. In Visual Studio, go to the Tool menu, under that select the Customize menu. This will open up the Customize dialog
  2. Select the Commands tab
  3. Select the Toolbar checkbox and then select the Toolbar on which you want this button to appear from dropdown list. I chose the Standard Toolbar
  4. Now click on the “Add Command” button. Then select the Macros from the categories in the Add Command dialog.
  5. Now you will see the list of available macros on the list box on. From that list select your Macro AttachToDevelopmentServer and click OK
  6. If you want, you can customize the text which appears on the command button, by clicking on the Modify Selection
    Here it is how it looked in my machine

Adding Command to the Visual Studio Toolbar

That’s it, now you will be able to new button appeared in the standard toolbar. If you click on that, it will automatically attach your web project to the running application in the development server.

Visual Studio Toolbar after Customization

Note: There are couples of problems here

  1. This doesn’t work if you have set the IIS Express/IIS itself as the server for running the application.( Update: A new macro to support this feature is exlplained here Attach to Any ASP.NET Web Server from Visual Studio in One Click )
  2. If you have multiple web applications in your project, it will attach to the first development server. So I suggest you to read my previous post about disabling multiple Visual Studio development webservers

Multiple Visual Studio Development Servers while Debugging

You might have noticed that when you start debugging an ASP.NET web application, it start more than one visual studio development servers and in the system tray you see something like this

Multiple Development Servers

This happens when your solution contains more than one web application, setting one as the StartUp project is not going to help..

The reason for this is - by default any web application is set to start when we trigger the debugging process in visual studio. We need to disable that auto start feature so that only one visual studio development server is getting started when we are debugging.

These are the steps for disabling it

  1. Select the web project which you don’t want to start
  2. Go to the properties window (Shortcut – press F4)
  3. Set “Always Start When Debugging” to False

Disable always start

This is how you could do it in Visual studio 2010, I hope the same applies to Visual studio 2008 too. Now if you start debugging, you will see only one development webserver.

Hope this helps