JavaScript

JavaScript Error Logging with Rollbar

Real-time bug tracking, crash alerting, and analytics reporting for JavaScript

Getting started is quick and easy

Add the Rollbar JavaScript SDK

<script>
var _rollbarConfig = {
    accessToken: "sign up get access token",
    captureUncaught: true,
    captureUnhandledRejections: true,
    payload: {
        environment: "production"
    }
};
// Rollbar Snippet
!function(r){function o(e){if(n[e])return n[e].exports;var t=n[e]={exports:{},id:e,loaded:!1};return r[e].call(t.exports,t,t.exports,o),t.loaded=!0,t.exports}var n={};return o.m=r,o.c=n,o.p="",o(0)}([function(r,o,n){"use strict";var e=n(1),t=n(4);_rollbarConfig=_rollbarConfig||{},_rollbarConfig.rollbarJsUrl=_rollbarConfig.rollbarJsUrl||"https://cdnjs.cloudflare.com/ajax/libs/rollbar.js/2.1.3/rollbar.min.js",_rollbarConfig.async=void 0===_rollbarConfig.async||_rollbarConfig.async;var l=e.setupShim(window,_rollbarConfig),a=t(_rollbarConfig);window.rollbar=e.Rollbar,l.loadFull(window,document,!_rollbarConfig.async,_rollbarConfig,a)},function(r,o,n){"use strict";function e(r){return function(){try{return r.apply(this,arguments)}catch(r){try{console.error("[Rollbar]: Internal error",r)}catch(r){}}}}function t(r,o){this.options=r,this._rollbarOldOnError=null;var n=s++;this.shimId=function(){return n},window&&window._rollbarShims&&(window._rollbarShims[n]={handler:o,messages:[]})}function l(r,o){var n=o.globalAlias||"Rollbar";if("object"==typeof r[n])return r[n];r._rollbarShims={},r._rollbarWrappedError=null;var t=new d(o);return e(function(){return o.captureUncaught&&(t._rollbarOldOnError=r.onerror,i.captureUncaughtExceptions(r,t,!0),i.wrapGlobals(r,t,!0)),o.captureUnhandledRejections&&i.captureUnhandledRejections(r,t,!0),r[n]=t,t})()}function a(r){return e(function(){var o=this,n=Array.prototype.slice.call(arguments,0),e={shim:o,method:r,args:n,ts:new Date};window._rollbarShims[this.shimId()].messages.push(e)})}var i=n(2),s=0,c=n(3),p=function(r,o){return new t(r,o)},d=c.bind(null,p);t.prototype.loadFull=function(r,o,n,t,l){var a=function(){var o;if(void 0===r._rollbarDidLoad){o=new Error("rollbar.js did not load");for(var n,e,t,a,i=0;n=r._rollbarShims[i++];)for(n=n.messages||[];e=n.shift();)for(t=e.args||[],i=0;i<t.length;++i)if(a=t[i],"function"==typeof a){a(o);break}}"function"==typeof l&&l(o)},i=!1,s=o.createElement("script"),c=o.getElementsByTagName("script")[0],p=c.parentNode;s.crossOrigin="",s.src=t.rollbarJsUrl,n||(s.async=!0),s.onload=s.onreadystatechange=e(function(){if(!(i||this.readyState&&"loaded"!==this.readyState&&"complete"!==this.readyState)){s.onload=s.onreadystatechange=null;try{p.removeChild(s)}catch(r){}i=!0,a()}}),p.insertBefore(s,c)},t.prototype.wrap=function(r,o){try{var n;if(n="function"==typeof o?o:function(){return o||{}},"function"!=typeof r)return r;if(r._isWrap)return r;if(!r._rollbar_wrapped&&(r._rollbar_wrapped=function(){try{return r.apply(this,arguments)}catch(e){var o=e;throw"string"==typeof o&&(o=new String(o)),o._rollbarContext=n()||{},o._rollbarContext._wrappedSource=r.toString(),window._rollbarWrappedError=o,o}},r._rollbar_wrapped._isWrap=!0,r.hasOwnProperty))for(var e in r)r.hasOwnProperty(e)&&(r._rollbar_wrapped[e]=r[e]);return r._rollbar_wrapped}catch(o){return r}};for(var u="log,debug,info,warn,warning,error,critical,global,configure,handleUncaughtException,handleUnhandledRejection".split(","),f=0;f<u.length;++f)t.prototype[u[f]]=a(u[f]);r.exports={setupShim:l,Rollbar:d}},function(r,o){"use strict";function n(r,o,n){if(r){var t;"function"==typeof o._rollbarOldOnError?t=o._rollbarOldOnError:r.onerror&&!r.onerror.belongsToShim&&(t=r.onerror,o._rollbarOldOnError=t);var l=function(){var n=Array.prototype.slice.call(arguments,0);e(r,o,t,n)};l.belongsToShim=n,r.onerror=l}}function e(r,o,n,e){r._rollbarWrappedError&&(e[4]||(e[4]=r._rollbarWrappedError),e[5]||(e[5]=r._rollbarWrappedError._rollbarContext),r._rollbarWrappedError=null),o.handleUncaughtException.apply(o,e),n&&n.apply(r,e)}function t(r,o,n){if(r){"function"==typeof r._rollbarURH&&r._rollbarURH.belongsToShim&&r.removeEventListener("unhandledrejection",r._rollbarURH);var e=function(r){var n=r.reason,e=r.promise,t=r.detail;!n&&t&&(n=t.reason,e=t.promise),o&&o.handleUnhandledRejection&&o.handleUnhandledRejection(n,e)};e.belongsToShim=n,r._rollbarURH=e,r.addEventListener("unhandledrejection",e)}}function l(r,o,n){if(r){var e,t,l="EventTarget,Window,Node,ApplicationCache,AudioTrackList,ChannelMergerNode,CryptoOperation,EventSource,FileReader,HTMLUnknownElement,IDBDatabase,IDBRequest,IDBTransaction,KeyOperation,MediaController,MessagePort,ModalWindow,Notification,SVGElementInstance,Screen,TextTrack,TextTrackCue,TextTrackList,WebSocket,WebSocketWorker,Worker,XMLHttpRequest,XMLHttpRequestEventTarget,XMLHttpRequestUpload".split(",");for(e=0;e<l.length;++e)t=l[e],r[t]&&r[t].prototype&&a(o,r[t].prototype,n)}}function a(r,o,n){if(o.hasOwnProperty&&o.hasOwnProperty("addEventListener")){for(var e=o.addEventListener;e._rollbarOldAdd&&e.belongsToShim;)e=e._rollbarOldAdd;var t=function(o,n,t){e.call(this,o,r.wrap(n),t)};t._rollbarOldAdd=e,t.belongsToShim=n,o.addEventListener=t;for(var l=o.removeEventListener;l._rollbarOldRemove&&l.belongsToShim;)l=l._rollbarOldRemove;var a=function(r,o,n){l.call(this,r,o&&o._rollbar_wrapped||o,n)};a._rollbarOldRemove=l,a.belongsToShim=n,o.removeEventListener=a}}r.exports={captureUncaughtExceptions:n,captureUnhandledRejections:t,wrapGlobals:l}},function(r,o){"use strict";function n(r,o){this.impl=r(o,this),this.options=o,e(n.prototype)}function e(r){for(var o=function(r){return function(){var o=Array.prototype.slice.call(arguments,0);if(this.impl[r])return this.impl[r].apply(this.impl,o)}},n="log,debug,info,warn,warning,error,critical,global,configure,handleUncaughtException,handleUnhandledRejection,_createItem,wrap,loadFull,shimId".split(","),e=0;e<n.length;e++)r[n[e]]=o(n[e])}n.prototype._swapAndProcessMessages=function(r,o){this.impl=r(this.options);for(var n,e,t;n=o.shift();)e=n.method,t=n.args,this[e]&&"function"==typeof this[e]&&this[e].apply(this,t);return this},r.exports=n},function(r,o){"use strict";r.exports=function(r){return function(o){if(!o&&!window._rollbarInitialized){r=r||{};for(var n,e,t=r.globalAlias||"Rollbar",l=window.rollbar,a=function(r){return new l(r)},i=0;n=window._rollbarShims[i++];)e||(e=n.handler),n.handler._swapAndProcessMessages(a,n.messages);window[t]=e,window._rollbarInitialized=!0}}}}]);
// End Rollbar Snippet
</script>

Send a test to your console

window.onerror("TestError: Hello World", window.location.href)

Powerful application error monitoring

Smart error grouping and alerting

Spend less time debugging, searching logs, recreating issues and triaging hundreds of alerts. Get error notifications in real-time, grouped by root cause, with rich contextual data. Including detailed stack traces, request params, URL, environment, and affected users.

JavaScript error logging reporting tool

Easy-to-use workflows

Take control of errors with easy-to-use workflow controls. Get notified of regressions when Resolved errors reoccur. See what matters and Mute to hide items from your view. Override the Severity of errors. Distribute tasks by assigning errors to members of your team. And create issues in your preferred issue tracker (JIRA, Trello, Asana, Pivotal Tracker, more).

JavaScript debugging and logging workflow

X-ray vision for poor experiences

Ignored errors, negatively impact your customers experience. Identify 1 user issue before it affects 1,000. Get visibility into the types of errors seen by specific users and the number of users for each error. Be more informed and proactive when things break.

client-side javascript tracking for app users

Track errors to code deployments

Rollbar keeps a history of your deploys, commits, and undeployed changes. For each error, Rollbar automatically identifies the suspect deploy, that caused the issue. See which commits were included in each deploy and view full diffs for even more insight and context.

code deployment error tracking

Handling errors in JavaScript

Without Rollbar With Rollbar
Remain unaware of failures in client-side dependencies and APIs Visibility into failures of client-side dependencies and APIs
Trying to debug minified code Source map integration to see proper source code and stack traces
No visibility into which client state lead to errors Telemetry shows the client events that led up to the error

Detect, diagnose, and debug JavaScript with ease

Source maps

Rollbar supports JavaScript source maps to get meaningful stack traces when using minified JavaScript in production. Once you enable source mapping, you'll see the original source filename, line number, method name, and code snippet in the error stack trace.

source maps and minified javascript

Telemetry

Telemetry provides a timeline of events in the browser leading up to when a JavaScript error occurred. This helps to identify the root cause of JavaScript errors faster by providing critical information on user behavior, network activity, and more.

JavaScript Telemetry

Cross-browser support

Rollbar.js is compatible with all major browsers, including the latest versions of IE. Analyze errors broken down by browser, and identify problems caused by specific browsers. Or, choose to ignore errors from browsers that your application does not support.

Track client-side JavaScript errors in all browsers

Contextual data

See what environments experience each error to identify patterns affecting specific browsers, operating systems, IPs, etc. And, get insight into users who've experienced errors, or which deployments are suspected to have caused the error.

JavaScript error data

Reduce noise

Rollbar offers a handful of options to help, reduce the noise and focus on impactful JavaScript errors. Rollbar automatically groups errors using fingerprints, merge similar errors, and custom rules to ignore specific errors.

Merge similar JavaScript errors for clear crash reporting

Rollbar works where you do

Server-Side

Messaging

Issue Tracking

IT Alerting

Source Control

Because we had JavaScript source-maps enabled, we can see exactly what line caused the error, not just line 6000, column 20. We can actually look at the stack trace and know exactly what the problem is.

Andrew Childs

CTO, Clubhouse

Want to learn more about how Rollbar can help your team?

Give us a few details and we'll get in touch!