Monitoring render performance with Ember.js and New Relic

New Relic’s Browser monitoring works well for traditional web pages with smattering of JavaScript. However it doesn’t work so well for pure JavaScript single page apps.

The main problem is New Relic doesn’t know when your Ember app has finished loading a route. Nor does it know when the route has finished rendering. So you have to tell it:

The above code uses the Navigation Timing API to calculate how long it took from document ready to everything being displayed. (i.e. The route and it’s child routes resolving and rendering). Here is a jsfiddle.

Components

You will probably already have an idea about which of your components take the most time to render from using them in development — but it is still useful to see how they are performing in the wild.

The Metrics Service below utilises Ember Instrumentation to send the time it took to render the slowest components to New Relic Insights.

Anything over 100 milliseconds is considered not instant.

Now you can access Insights query for component render times

Edit: New Relic now have beta tools for Single Page App monitoring

Like what you read? Give Andrew Kirwin a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.

Responses
The author has chosen not to show responses on this story. You can still respond by clicking the response bubble.