← Blog Home

javascript Blog Posts

JavaScript (not to be confused with Java) is a high-level, dynamic, multi-paradigm, weakly-typed language used for both client-side and server-side scripting. Use this tag for questions regarding ECMAScript and its various dialects/implementations (excluding ActionScript and Google-Apps-Script).

Debugging JavaScript with Source Maps

Written By Mike Smith February 6th, 2018

One of the frustrating situations I often encounter when debugging JavaScript, is tracking down JavaScript errors to line 23 col 63475. I felt as though I was right on the edge of seeing the offending code and being able to fix it. And then, reality came crashing down. I realized that I’ve managed to debug myself right into the middle of a minified JavaScript file 😞.

There is a better way - Source Maps. JavaScript source maps are the key to taking what you’ve narrowed down in the minified code, and then being able to map them back to the source code so that you can view and resolve the problem without having to figure it out in the minified code.

Read more

Top 10 JavaScript errors from 1000+ projects (and how to avoid them)

Written By Jason Skowronski January 24th, 2018

To give back to our community of developers, we looked at our database of thousands of projects and found the top 10 errors in JavaScript. We’re going to show you what causes them and how to prevent them from happening. If you avoid these "gotchas," it'll make you a better developer.

Because data is king, we collected, analyzed, and ranked the top 10 JavaScript errors. Rollbar collects all the errors for each project and summarizes how many times each one occurred. We do this by grouping errors according to their fingerprints. Basically, we group two errors if the second one is just a repeat of the first. This gives users a nice overview instead of an overwhelming big dump like you’d see in a log file.

We focused on the errors most likely to affect you and your users. To do this, we ranked errors by the number of projects experiencing them across different companies. If we looked only at the total number of times each error occurred, then high-volume customers could overwhelm the data set with errors that are not relevant to most readers.

Here are the top 10 JavaScript errors:

Screenshot of javascript error graph

Read more

Custom error handling for Angular

Written By Jason Skowronski October 24th, 2017

Angular 2+ and AngularJS (version 1) are popular open-source JavaScript MVC frameworks that let you build highly structured, testable and maintainable front-end applications. Angular is most commonly used on single-page applications. Stable and reliable single-page applications depend on solid client-side error monitoring tools and techniques. But getting the right exception data and context isn’t always easy. We’re going to dive into how to capture, handle and debug Angular errors.

Read more

Error Boundaries in React 16

Written By Jason Skowronski October 11th, 2017

React recently announced the release of version 16 with long standing feature requests including error boundaries, fragments, improved server-side rendering and more. Error boundaries are especially useful so that an error in one small part of the UI doesn’t break your entire application. Instead, it’s better to contain those errors to the affected components and recover gracefully.

You can try using error boundaries yourself in our working Codepen example. We forked it from Facebook's initial version to show how to add Rollbar's JavaScript error logging. When you open this page, you can activate an error boundary by clicking at least five times on the counter. You will then see the error message “Something went wrong.” Let's dive deeper into this example to learn how error boundaries work.

Error boundaries Codepen example

Codepen example, React error boundaries

Read more

Introducing JavaScript Telemetry

Written By Jason Skowronski August 16th, 2017

We're excited to introduce JavaScript telemetry, which provides a timeline of events in the browser leading up to when an error occurred. This helps you find the root cause of JavaScript errors faster by providing critical information on user behavior, network activity, and more. You might also think of this timeline of events as a trail of breadcrumbs or a black box recorder which tells you what happened just before a crash or error.

In the screenshot below, we see a timeline showing a complete story of how the user encountered an error. First they loaded the page, typed their email address into the sign up form, validated the email, navigated to an onboarding page, and then the error occurred. This gives clear context on what caused the error and which component needs to be fixed.

JavaScript telemetry screenshot

JavaScript telemetry data, as seen in Rollbar

Read more

New and improved JavaScript notifier SDK - rollbar.js 2.0

Written By Jason Skowronski May 20th, 2017

We are excited to announce a major update to our JavaScript notifier SDK in version 2.0. This new version adds support for isomorphic or universal applications, which can run on both the client and the server. It standardizes the configuration and logging across environments, and makes it consistent with notifiers for other languages. Here are the big changes:

Single library for both client and server side

Read more

Major JavaScript source map updates

Written By Jesse Gibbs April 20th, 2017

We’re excited to introduce a major update to JavaScript source map support in Rollbar! This update introduces several features unique to Rollbar (source map search, source map failure logs, inline warnings in stack traces) that are critical to anyone using client-side JavaScript in a large-scale, continuous deployment environment.

Read more

Using JavaScript source maps to debug errors

Written By Rivkah Standig February 13th, 2017

Some of the most common questions we get here at Rollbar deal with source maps:

  • What are source maps and what do they do?
  • How can you enable source mapping?
  • Why aren't your source maps working properly?

Let's explore Javascript source maps together, starting with the basics.

Existing Rollbar users, go to our JavaScript source maps documentation to get started.

As web developers, we have two major goals. First, we want a highly performant website. Second, we want that website to be easy to debug and maintain. Unfortunately, these goals are often at odds with one other. If we minimize our JavaScript, we can achieve some of these goals. Minimizing JavaScript reduces the download size, and the smaller the payload for our website users, the better. If we combine our JavaScript files, we can also reduce the number of http requests.

Read more

5 ways to reduce noise when logging your JavaScript exceptions

Written By Daniel Steuernol August 16th, 2016

Developing and maintaining user facing software is a challenge and a very distracting one at that. :-) Often times it can be difficult trying to stay focused on what matters most. It can be hard to tell what's really broken and why, with dozens of alerts notifying you every other minute. Volatile... The client-side being one of the most volatile of them all.

When we attempt to capture errors in this environment we can very quickly get overwhelmed by lots and lots of noise. This noise is typically generated from many different places. Some examples would be old outdated browsers, browser extensions, third-party scripts, bots, spiders, etc. Rollbar's JavaScript error monitoring supports many different ways of reducing this noise so you can be more proactive in what and how you're collecting your JavaScript exceptions.

Read more

Debugging Node.js Apps in Production with PyCharm

Written By Cory Virok December 19th, 2014

Node.js has a built-in debugger that you can start in running processes. To do this, send a SIGUSR1 signal to the running process and connect a debugger. The one, big caveat here is that the debugger only listens on the local interface, 127.0.0.1.

The following are instructions for debugging Node.js applications running in your company's private network from your laptop, through a bastion host.

Read more

node_rollbar 0.3.11

Written By Brian Rue July 24th, 2014
We've released a new version of our Node.js library, version 0.3.11. It's available on npm and GitHub.
Read more

Better support for Browserify and Webpack

Written By Brian Rue June 18th, 2014
Recently (actually last week), we released a new version of rollbar.js that has a few fixes to play nicely with Browserify and Webpack. It's being served from our CDN and the source is on GitHub.
Read more

rollbar.js snippet update

Written By Brian Rue June 10th, 2014
We've released a new version of rollbar.js (1.0.0-rc9), which fixes a bug in some environments.
Read more

rollbar.js v1.0.0-rc8 released

Written By Brian Rue May 22nd, 2014
Today, we released rollbar.js version 1.0.0-rc8. This release includes a fix for a bug where the global variable i was used, which could cause strange behavior when interacting with other code that also references i as a global variable.
Read more

jQuery Error Instrumentation

Written By Sergei Bezborodko August 7th, 2013

Today we are releasing a new feature for our JavaScript notifier that should make tracking down errors much easier if you use jQuery 1.7 and above. The new functionality comes in a separate JS plugin snippet that should be placed right below where jQuery is loaded. Here is the first version of the plugin:

// 
!function(r,n,e){var t={"notifier.plugins.jquery.version":"0.0.1"};n._rollbar.push( {_rollbarParams:t});r(e).ajaxError(function(r,e,t,u){var o=e.status;var a=t.url; n._rollbar.push({level:"warning",msg:"jQuery ajax error for url "+a,jquery_status:o, jquery_url:a,jquery_thrown_error:u,jquery_ajax_error:true})});var u=r.fn.ready; r.fn.ready=function(r){return u.call(this,function(){try{r()}catch(e){ n._rollbar.push(e)}})};var o={};var a=r.fn.on;r.fn.on=function(r,e,t,u){ var f=function(r){var e=function(){try{return r.apply(this,arguments)}catch(e){ n._rollbar.push(e);return null}};o[r]=e;return e};if(e&&typeof e==="function"){ e=f(e)}else if(t&&typeof t==="function"){t=f(t)}else if(u&&typeof u==="function"){ u=f(u)}return a.call(this,r,e,t,u)};var f=r.fn.off;r.fn.off=function(r,n,e){ if(n&&typeof n==="function"){n=o[n];delete o[n]}else{e=o[e];delete o[e]} return f.call(this,r,n,e)}}(jQuery,window,document);
// ]]>

The source can be found on GitHub here.

Read more

JavaScript and Source Maps in a Django App

Written By Sergei Bezborodko August 2nd, 2013

It’s pretty well known that every web app needs frontend JavaScript these days to provide the best possible user experience. You are probably going to have a bunch of JavaScript files that need to be loaded by your users for that to happen, and since we all care about performance, minifiying and compressing these files is an absolute must. But what happens when it comes time to debug issues in these minified files? Stack traces will more or less be completely useless. How do we solve this problem?

JavaScript source maps solve this problem. They allow you to map a point in a minified file back to the unminfied source, making it possible to actually identify and fix issues encountered in a production app environment.

Below I have outlined a simple guide for setting up source map generation and usage in a sample Django app. You’ll learn how generate source maps for minified files, debug errors that happen in these files, and also a quick overview of what’s required to get this working for your production environments.

Read more

Debug Production Errors in Minified JavaScript with Source Maps and Rollbar

Written By Brian Rue July 25th, 2013

Rollbar just got a much-requested feature: Source Maps support for Javascript. If you minify your Javascript code in production, this will make debugging production errors much easier. This feature is now live for all accounts.

Here's a link to a recently updated tutorial on using JavaScript source maps with Rollbar.

What Are Source Maps?

If you minify your Javascript code (i.e. using UglifyJS2 or the Closure Compiler), it gets harder to debug errors. Stack traces reference the line/column numbers in the minified code instead of the original source code.

Source Maps were designed to resolve this; they provide a mapping back from the minified line/column numbers to the original code. Chrome and Firefox have tools to use them in development, but what about errors that happen in production?

Read more

Improved grouping for Javascript errors

Written By Brian Rue March 21st, 2013

We’ve released an updated to how Javascript errors are grouped in Rollbar. The new update does a better job of separating different errors into different groups (“Items” in Rollbar parlance) while still recognizing the same issue in different browsers as the same. It’s now enabled for all new projects. Existing projects can enable it on the Migrations tab in Settings.

Now the longer version…

Read more

Join Our Community

Get the latest updates, tutorials and more, delivered to your inbox, once a month.

Join Our Community

Get the latest updates, tutorials and more, delivered to your inbox, once a month.