Embrace the Power of the aura:systemError Event

In Salesforce by Alex0 Comments

If you’ve done any serious development with Lightning then you’ll know that the way it swallows JavaScript errors that would normally appear in the console can be really frustrating.

By making use of the aura:systemError event though you can make your life a heck of a lot easier.

The Problem

When writing and testing Lightning components sights like this are not uncommon.

Screen Shot 2016-04-14 at 17.23.54

Obviously something has gone wrong here (unless your component is meant to just display a blank page) but how can you tell?

The only feedback you get from Lightning is the fact that auraError class has been added to the body tag, that’s not really very helpful though.

Once you have enough experience with Lightning you’ll realise that this behaviour is symptomatic of an error with your JavaScript.

Being armed with that knowledge is helpful, but it still doesn’t make tracking down the problem any easier.

Introducing Our Hero

aura:systemError to the rescue!

Whilst the documentation states that aura:systemError only captures server-side errors, it also catches client-side errors within callbacks to your server-side actions. These are normally swallowed by the Lightning framework.

By listening to the aura:systemError event in your component you can get access to the sort of information that you would normally see appear in your browser’s console. For example, using undeclared variables or functions.

All you need to do is add the following to your component markup:

<aura:handler event="aura:systemError" action="{!c.onSystemError}"/>

Then the following to your component’s client-side controller:

onSystemError: function(component, event, handler) {
}

We’re now listening for the aura:systemError event, but we’re not doing anything with it so that still isn’t very helpful.

Making Use of Our Hero’s Powers

The aura:systemError event has 2 parameters. message which contains the error message that would normally appear in the console, and error which when populated contains an object which represents the error with some additional details.

Let’s make use of those now:

onSystemError: function(component, event, handler) {
    // You can also use $A.log(), but messages logged using $A.log() do not appear in production environments
    console.log(event.getParam("message"));
    console.log(event.getParam("error"));
}

Now, if we go back to the original example and… ta da! There is some information in the console!

Screen Shot 2016-04-14 at 17.24.20

Hmm, looks like a typo to me. Can you believe I made such a simple error (I can, I make them all the time)? Let’s fix that now.

Screen Shot 2016-04-14 at 17.27.13

Hooray! My component is working, I can’t wait to deploy this!

Summary

Whilst that was a relatively simple bug to find, these sorts of bugs are a lot harder to track down in JavaScript than they are in Apex because you don’t get compile time errors (as the code doesn’t get compiled) when you make a typo or accidentally call a method that doesn’t exist on the type you’re using.

aura:systemError gives back some of what Lightning takes away in terms of JavaScript error reporting and makes debugging your components much easier.

I’d recommend that in any non-trivial Lightning component you build you include a handler for aura:systemError as it will speed up your development by allowing you track down these sorts of daft errors more quickly.