rollbar-browser
Advanced tools
Copy-paste the following code into the <head> of every page you want to monitor. It should be as high as possible, before any other <script> tags.
Be sure to replace POST_CLIENT_ITEM_ACCESS_TOKEN with your project's post_client_item access token, which you can find in the Rollbar.com interface.
<script>
var _rollbarConfig = {
accessToken: "POST_CLIENT_ITEM_ACCESS_TOKEN",
captureUncaught: true,
payload: {
environment: "production"
}
};
// Rollbar Snippet
!function(r){function o(e){if(t[e])return t[e].exports;var n=t[e]={exports:{},id:e,loaded:!1};return r[e].call(n.exports,n,n.exports,o),n.loaded=!0,n.exports}var t={};return o.m=r,o.c=t,o.p="",o(0)}([function(r,o,t){"use strict";var e=t(1).Rollbar,n=t(2);_rollbarConfig.rollbarJsUrl=_rollbarConfig.rollbarJsUrl||"https://d37gvrvc0wt4s1.cloudfront.net/js/v1.8/rollbar.min.js";var a=e.init(window,_rollbarConfig),i=n(a,_rollbarConfig);a.loadFull(window,document,!_rollbarConfig.async,_rollbarConfig,i)},function(r,o){"use strict";function t(r){return function(){try{return r.apply(this,arguments)}catch(o){try{console.error("[Rollbar]: Internal error",o)}catch(t){}}}}function e(r,o,t){window._rollbarWrappedError&&(t[4]||(t[4]=window._rollbarWrappedError),t[5]||(t[5]=window._rollbarWrappedError._rollbarContext),window._rollbarWrappedError=null),r.uncaughtError.apply(r,t),o&&o.apply(window,t)}function n(r){var o=function(){var o=Array.prototype.slice.call(arguments,0);e(r,r._rollbarOldOnError,o)};return o.belongsToShim=!0,o}function a(r){this.shimId=++s,this.notifier=null,this.parentShim=r,this._rollbarOldOnError=null}function i(r){var o=a;return t(function(){if(this.notifier)return this.notifier[r].apply(this.notifier,arguments);var t=this,e="scope"===r;e&&(t=new o(this));var n=Array.prototype.slice.call(arguments,0),a={shim:t,method:r,args:n,ts:new Date};return window._rollbarShimQueue.push(a),e?t:void 0})}function l(r,o){if(o.hasOwnProperty&&o.hasOwnProperty("addEventListener")){var t=o.addEventListener;o.addEventListener=function(o,e,n){t.call(this,o,r.wrap(e),n)};var e=o.removeEventListener;o.removeEventListener=function(r,o,t){e.call(this,r,o&&o._wrapped?o._wrapped:o,t)}}}var s=0;a.init=function(r,o){var e=o.globalAlias||"Rollbar";if("object"==typeof r[e])return r[e];r._rollbarShimQueue=[],r._rollbarWrappedError=null,o=o||{};var i=new a;return t(function(){if(i.configure(o),o.captureUncaught){i._rollbarOldOnError=r.onerror,r.onerror=n(i);var t,a,s="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(t=0;t<s.length;++t)a=s[t],r[a]&&r[a].prototype&&l(i,r[a].prototype)}return r[e]=i,i})()},a.prototype.loadFull=function(r,o,e,n,a){var i=function(){var o;if(void 0===r._rollbarPayloadQueue){var t,e,n,i;for(o=new Error("rollbar.js did not load");t=r._rollbarShimQueue.shift();)for(n=t.args,i=0;i<n.length;++i)if(e=n[i],"function"==typeof e){e(o);break}}"function"==typeof a&&a(o)},l=!1,s=o.createElement("script"),u=o.getElementsByTagName("script")[0],p=u.parentNode;s.crossOrigin="",s.src=n.rollbarJsUrl,s.async=!e,s.onload=s.onreadystatechange=t(function(){if(!(l||this.readyState&&"loaded"!==this.readyState&&"complete"!==this.readyState)){s.onload=s.onreadystatechange=null;try{p.removeChild(s)}catch(r){}l=!0,i()}}),p.insertBefore(s,u)},a.prototype.wrap=function(r,o){try{var t;if(t="function"==typeof o?o:function(){return o||{}},"function"!=typeof r)return r;if(r._isWrap)return r;if(!r._wrapped){r._wrapped=function(){try{return r.apply(this,arguments)}catch(o){throw o._rollbarContext=t()||{},o._rollbarContext._wrappedSource=r.toString(),window._rollbarWrappedError=o,o}},r._wrapped._isWrap=!0;for(var e in r)r.hasOwnProperty(e)&&(r._wrapped[e]=r[e])}return r._wrapped}catch(n){return r}};for(var u="log,debug,info,warn,warning,error,critical,global,configure,scope,uncaughtError".split(","),p=0;p<u.length;++p)a.prototype[u[p]]=i(u[p]);r.exports={Rollbar:a,_rollbarWindowOnError:e}},function(r,o){"use strict";r.exports=function(r,o){return function(t){if(!t&&!window._rollbarInitialized){var e=window.RollbarNotifier,n=o||{},a=n.globalAlias||"Rollbar",i=window.Rollbar.init(n,r);i._processShimQueue(window._rollbarShimQueue||[]),window[a]=i,window._rollbarInitialized=!0,e.processPayloads()}}}}]);
// End Rollbar Snippet
</script>
If you're running Rollbar on an environment besides production, change the environment value to something else (e.g. "staging"). See below for more configuration options.
window.onerror("TestRollbarError: testing window.onerror", window.location.href)This simulates an uncaught error. It should appear in the Rollbar dashboard within a few seconds.
In addition to catching top-level errors, you can send caught errors or custom log messages. All of the following methods are fully-asynchronous and safe to call anywhere in your code after the <script> tag above.
// Caught errors
try {
doSomething();
} catch (e) {
Rollbar.error("Something went wrong", e);
}
// Arbitrary log messages. 'critical' is most severe; 'debug' is least.
Rollbar.critical("Connection error from remote Payments API");
Rollbar.error("Some unexpected condition");
Rollbar.warning("Connection error from Twitter API");
Rollbar.info("User opened the purchase dialog");
Rollbar.debug("Purchase dialog finished rendering");
// Can include custom data with any of the above.
// It will appear as `custom.postId` in the Occurrences tab
Rollbar.info("Post published", {postId: 123});
// Callback functions
Rollbar.error(e, function(err, data) {
if (err) {
console.log("Error while reporting error to Rollbar: ", e);
} else {
console.log("Error successfully reported to Rollbar. UUID:", data.result.uuid);
}
});
To set configuration options at runtime, use Rollbar.configure:
// Set the person data to be sent with all errors for this notifier.
Rollbar.configure({
payload: {
person: {
id: 456,
username: "foo",
email: "foo@example.com"
}
}
});
(Advanced) For fine-grained control of the payload sent to the Rollbar API, use Rollbar.scope:
Rollbar.scope({fingerprint: "custom fingerprint to override grouping algorithm"}).error(err);
rollbar.js is also distributed using UMD, so you can use it with browserify, requirejs, webpack, or anything else that uses AMD or CommonJS modules. See the examples for details.
If you don't want to send data to Rollbar, just set the enabled flag to false for each notifier instance.
Rollbar.error("This will be reported to Rollbar");
Rollbar.configure({enabled: false});
Rollbar.error("This will *not* be reported to Rollbar");
If you want to ignore a specific exception message, say for a third-party browser plugin
that is throwing errors, you can add the message to the ignoredMessages array,
and Rollbar will ignore exceptions matching those messages.
var _rollbarConfig = {
accessToken: "POST_CLIENT_ITEM_ACCESS_TOKEN",
ignoredMessages: ["Can't find Clippy.bmp. The end is nigh."],
captureUncaught: true,
payload: {
environment: "production"
}
};
// init your rollbar like normal, or insert rollbar.js source snippet here
If you would like to see what is being sent to Rollbar in your console, use the
verbose option.
var _rollbarConfig = {
accessToken: "POST_CLIENT_ITEM_ACCESS_TOKEN",
verbose: true, // This will now log to console.log, as well as Rollbar
captureUncaught: true,
payload: {
environment: "production"
}
};
// init your rollbar like normal, or insert rollbar.js source snippet here
By default, the snippet loads the full Rollbar source asynchronously. You can disable this which will cause the browser to download and evaluate the full rollbar source before evaluating the rest of the page.
More information can be found here: http://www.w3schools.com/tags/att_script_async.asp
var _rollbarConfig = {
...
async: false,
...
};
If you minify your JavaScript in production, you'll want to configure source maps so you get meaningful stack traces. See the source maps guide for instructions.
iOS 9 webviews will currently not work properly with the rollbar.js snippet above.
Starting with iOS 9, webviews will only allow connections to HTTPS hosts whose certificates are are signed using SHA256+ and whose key is either 2048+ bit RSA or 256+ ECC. Many CDNs, including Cloudfront, do not meet these specifications. More info here.
You have a couple of options to fix this behavior:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>d37gvrvc0wt4s1.cloudfront.net</key>
<dict>
<key>NSExceptionRequiresForwardSecrecy</key>
<false/>
<key>NSIncludesSubdomains</key>
<true/>
</dict>
</dict>
</dict>
var _rollbarConfig = {
accessToken: "POST_CLIENT_ITEM_ACCESS_TOKEN",
// ... other configuration
rollbarJsUrl: "https://cdn.rollbar.com/js/v1.7/rollbar.min.js"
};
If you run into any issues, please email us at support@rollbar.com
You can also find us in IRC: #rollbar on chat.freenode.net
For bug reports, please open an issue on GitHub.
To set up a development environment, you'll need Node.js and npm.
git submodule update --initnpm install -DmakeTo run the tests, run make test
git checkout -b my-new-feature).git commit -am 'Added some feature')git push origin my-new-feature)FAQs
The package "rollbar-browser" has been deprecated in favor of the [rollbar](https://www.npmjs.com/package/rollbar) package. That package now supports both browser and node environments.
The npm package rollbar-browser receives a total of 654 weekly downloads. As such, rollbar-browser popularity was classified as not popular.
We found that rollbar-browser demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."