The problem
When it comes to missing run-time exceptions in software, the statistics paint a depressing picture. For starters, they can be expensive, costing companies immeasurable amounts of wasted developer time, lawsuits and lost sales. Second, bugs and exceptions damage the brand, contributing to lost conversions from trial offers and motivating customers to try other vendor's competitive products.
Made worse
What is even more discouraging is the fact that developers are generally blind to what is happening in released software. Once the product is shipped and in production, there is normally no mechanism in place to notify management and developers that errors are occurring. This challenge is often compounded in multi-tier scenarios, where back-end, server-side developers are often on separate teams from front end web developers, with little or no connection points between them. At the end of the day, developers do want to fix run-time exceptions. Sadly, they often fail to learn about them happening. But it isn't just the developers that care - it is also CTOs and Project Managers - to name a few.
Trivial but hard to predict
Often run-time errors turn out to be trivial. JavaScript developers have probably encountered the automatic semicolon insert (ASI) bug, whereby missing semicolons are automatically inserted if the developer forgets to add them. Usually, this a convenient capability of JavaScript, but it can come back to bite you if you forget to add a semicolon at the end of a return statement that returns data. Other trivial errors result from subtle browser differences, such as the unsupported map() function in IE8, which doesn't support ECMAScript 5. Naturally, other run-time errors happen because of unexpected user behavior, such as unexpected null pointers errors. We are only scratching the surface with JavaScript. Imagine the scenario where your app is composed of a back end tier, a middle tier, a front end tier (including mobile), across a variety of languages, compilers, and run-time - the challenge of tracking run-time exceptions becomes exponentially more difficult.
The Silver Bullet
What is needed here is a notification mechanism for run-time errors that is easy to plug into different languages and environments. Imagine that such a system can work with iOS, Android, Java, C#, PHP, Python and a dozen other programming languages while providing a single comprehensive view of an entire application stack, even across multiple applications. That product is here and is called Raygun (https://raygun.io/). Imagine being able to have visibility into some of the architectures presented below - from top to bottom, spanning all three tiers, across multiple programming languages.
Some typical architectures
How it works
Nearly all projects today include some degree of JavaScript so let's show you a quick example of how this might work.
The process begins with the developer registering at the https://raygun.io/ portal. Once registration is complete, the developer will be given an API key. This API key should be saved in a safe place because it will be used directly in the JavaScript code. This API key along with some JavaScript code will be the enabling technology for run-time exceptions getting routed directly to the developer, either through email or an SMS message. Ultimately, the end game is step 9 where the developer fixes the bug.
You begin by doing a simple include as follows:
<script type="text/javascript" src="http://cdn.raygun.io/raygun4js/raygun.min.js">
Raygun.init('yourApiKey').attach();
</script>
It can't get much easier than that.
Using Raygun in Web Pages
It should take no more than three minutes to prove the value of Raygun. Let's walk through a very simple end to end example. You can test this product for free to see how it really works.
For a more thorough list of instructions, visit this web page, https://raygun.io/docs/languages.
Registering an Application
Navigate to https://raygun.io/.
Click on the CREATE FREE TRIAL button.
A minimal amount of information is needed to get started, such as name and email address. From there you can click on the CREATE MY ACCOUNT button.
The next screen will require you to provide an application name. Remember, this application name can refer to a series of different applications that span multiple tiers.
Now we are ready to select the language, so click on the select language button.
From here you can notice that there are dozens of different languages and programming environments supported. But since we're going to illustrate JavaScript, click on JAVASCRIPT below.
There are a number of ways to include the Raygun JavaScript code. Perhaps the easiest way is from their CDN. Copy and paste the script tag below to a safe place.
Notice the additional script tag below as well. It includes your API key. This API key is important because it is the bridge to the registered developer's email account once a runtime exception occurs. Copy this snippet as well to a safe place.
Creating a New Web Project with Visual Studio
Now let's create a simple project with Visual Studio. Almost any version of Visual Studio will work. From the FILE menu select NEW WEBSITE.
All the various website projects are supported, but we will start with the simple empty ASP.NET website.
We will now add a webpage with some JavaScript. So right mouse click on the project name and Solution Explorer, then click ADD, then click ADD NEW ITEM.
Notice that we are adding an HTML page called BuggyApp.
BuggyApp.html
Type or copy the code snippet below. This code snippet is missing Raygun code and therefore the developer would never be notified of exceptions.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
try {
adddlert("Welcome guest!");
} catch (err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
</body>
</html>
Adding Raygun Code
The ideal scenario is the code below. Notice now that we are linking in the Raygun code to enable an email message to be sent to the registered developer for the API key. Exceptions also appear and are grouped intelligently on the Raygun dashboard, so you won't get swamped with notification messages.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script type="text/javascript" src="http://cdn.raygun.io/raygun4js/raygun.min.js"></script>in all will
<script>
<!-- Linking in the API key -->
Raygun.init("ClqOPaPEAVKqi9D1L5oHPw==").attach();
try {
adddlert(" welcome guest!");
} catch (err) {
document.getelementbyid("demo").innerhtml = err.message;
}
</script>
</body>
</html>
This is the error message the customer would receive. But what about the developer? Afterall, the whole point here is that the developer gets notified.
The developer gets notified in seconds
The developer would receive an email notification as you see below. From directly inside the email the developer can click to get more details about this error. Email settings can also be customised in the Raygun application.
A bunch of useful information is provided to the user. Refer to the Raygun documentation for more details on this.
| Occurred On |
April 6th 2015, 12:32:16 am - 3 minutes ago |
| Version |
Not supplied |
| Message |
Object doesn't support property or method 'getelementbyid' |
| Class Name |
TypeError |
| Stacktrace |
No stack in this case because this error didn't happen inside of a method |
There is a wealth of other information that can be gleaned from the Raygun portal. For example, Raygun can tell you the highest recurring problems while at the same time not overwhelming you with a multitude of messages and notifications. Notifications by email can be at the individual level or a daily digest of errors. In addition, Raygun effortlessly integrates with Slack, HipChat, and more of your favorite developer workflow tools. One of the great features, as commented earlier, is ability to support multiple platforms at the same time, monitoring them from one account, providing a consolidated view of the entire application stack.
Conclusion
This brief tutorial has highlighted the value of Raygun. With just a couple of pieces of code, the company can protect its brand, keep its trial conversions high, avoid lawsuits, and more. What makes Raygun especially compelling is the fact that a single Raygun package can provide visibility into runtime exceptions across an entire application stack architected into multiple tiers. A free trial of Raygun is available at https://raygun.io.
