honeybadger-io/honeybadger-js

Universal JavaScript library for reporting errors to Honeybadger.io :zap:

Honeybadger for JavaScript

Welcome! This is the monorepo which holds all Honeybadger packages for JavaScript. You can refer to the README of each package for more information and instructions:

• @honeybadger-io/core
  
  The core package that integrates with Honeybadger API
• @honeybadger-io/js
  
  SDK for browser, nodejs and AWS Lambda
• @honeybadger-io/webpack
  
  Webpack plugin to upload source maps to Honeybadger
• @honeybadger-io/vue
  
  SDK for vue.js integration
• @honeybadger-io/react
  
  SDK for React integration
• @honeybadger-io/nextjs
  
  SDK for Next.js integration
• @honeybadger-io/gatsby-plugin-honeybadger
  
  Gatsby plugin
• @honeybadger-io/react-native
  
  SDK for React Native integration
• @honeybadger-io/rollup-plugin
  
  Rollup/Vite plugin to upload source maps to Honeybadger
• @honeybadger-io/plugin-core
  
  Utility functions shared between rollup, webpack and other plugins

Documentation and Support

For comprehensive documentation and support, check out our documentation site.

Changelog

• CHANGELOG.md is updated when a new version is released (npm run release). The root CHANGELOG.md has a collective changelog from changes in all the packages of the monorepo. Each package also has its own CHANGELOG.md with changes related only to itself.

• Conventional Commits are enforced with a Git hook (via husky + commitlint) in order to automate changelog generation.

Contributing

1. Fork the repo.
2. Create a topic branch git checkout -b my_branch
3. Commit your changes git commit -am "chore: boom"
4. Push to your branch git push origin my_branch
5. Send a pull request

Development

We use Lerna to manage the monorepo. It helps us:

• link between packages,
• generate changelogs and bump versions (based on conventional commits) and
• publish to NPM

1. Run npm install from the monorepo root.
2. Run npm test from the monorepo root to run unit tests for all packages.

Lerna Tips

• Always install from the root, i.e. npm install only from the root folder, otherwise you may get unexpected issues with the linked packages.
• Use lerna add my-pkg --scope="@honeybadger-io/js" to add my-pkg in the @honeybadger-io/js project. Or you can manually add to the target project's package.json file. You still need to run npm install from the root.
• Use lerna run to execute commands for all projects. If the command is not found it will not be executed. You can filter the packages using --scope. For example, lerna run test will execute npm run test to all packages that have this script available.

For more info, you can read the docs.

Troubleshooting TypeScript

• Not seeing changes when working in .ts files? Make sure that you rebuild every time you make a change. Or enable "compile on save" with your IDE - WebStorm(Jetbrains) / VS Code.
• If you are getting errors with Typescript, make sure that you do npm run build. It's a prerequisite for Typescript Project References.

Releasing

Packages in the monorepo are released in independent mode, meaning that Lerna will decide which packages to release and what version bump to apply based on the commits since the last release.

Releasing is done using Github actions, which run npm run release. This command calls lerna publish, which does the following:

• generates changelog based on the commit messages (see Changelog above)
• npm version
• npm publish

Note: some packages may have a postpublish script, for example @honeybadger-io/js (found in packages/js) has a script to also publish to our js.honeybadger.io CDN (hosted on AWS via S3/CloudFront).

Release Automation

The repository automatically releases new packages every week using the Publish New Release - Scheduled workflow (lerna-scheduled-publish.yml).

You can manually trigger a new release using the Publish New Release workflow (lerna-publish.yml).

Note: only users with write permissions can trigger this workflow (i.e. Collaborators).

Available Commands

• npm run release - Calculates the next version, commits and publishes to NPM (and to our CDN). This command is executed from the Publish New Release workflow.

License

This Honeybadger repository and published packages are MIT licensed. See the MIT-LICENSE file in this repository for details.

honeybadger-js's Issues

Living with defined onerror-function

Hi,

I was working on getting Honeybadger integrated in our app and ran into an issue. It's a heavy client-side app and we have our own onerror-function defined. In this function we ignore quite a number of errors which occurs in various libraries (and browser extensions) which doesn't affect our site. When an error we can't recover from occurs we render a failure page.

This is where I found the issue. Notifications weren't being sent to Honeybadger. The reason is because Honeybadger dynamically adds elements to the document in order to perform a crossdomain post, but our failure-page-rendering removed everything from the body before it renders which removes the Honeybadger elements and thus nothing is sent.

The current Honeybadger code is

notifyHandlers(stack, 'from window.onerror');

if (_oldOnerrorHandler) {
  return _oldOnerrorHandler.apply(this, arguments);
}

I believe there are two issues here. (1) You attempt to notify Honeybadger before the old onerror handler has run (if it exists). (2) Honeybadger does not respect the return of the old onerror method. Returning true prevents the firing of the default event handler (i.e. the error has been dealt with), and I feel that this should also be respected by Honeybadger.

I'd like to see the code be changed to something similar to

if (_oldOnerrorHandler) {
  var errorHandled = _oldOnerrorHandler.apply(this, arguments);
  if (errorHandled) return true;
  notifyHandlers(stack, 'from window.onerror');
} else {
  notifyHandlers(stack, 'from window.onerror');
}

Now Honeybadger runs after the already defined error handling has been run, and only reports the error if the error hasn't already been handled.

Converting circular structure to JSON

We're getting this error from the old android stock browser Converting circular structure to JSON. user agent:

Mozilla/5.0 (Linux; U; Android 4.4.2; en-us; GT-P5210 Build/KOT49H) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30

It appears to be originating from within Honeybadger as it is trying to serialize another error. Here's a stack trace:

TypeError: Converting circular structure to JSON
  at Object.stringify (native)
  at Client._xhrRequest (https://js.honeybadger.io/v0.2/honeybadger.min.js:1:10195)
  at Client._sendRequest (https://js.honeybadger.io/v0.2/honeybadger.min.js:1:8318)
  at Client._send (https://js.honeybadger.io/v0.2/honeybadger.min.js:1:7926)
  @https://js.honeybadger.io/v0.2/honeybadger.min.js 1:5684  
  at d.util.hasFunction.f.(anonymous function) (https://d2zah9y47r7bi2.cloudfront.net/releases/current/tracker.js:3:492)
  at nrWrapper (https://chalkschools.com/campaigns/glenshire-batie-electronic-form/responses:5:12949)

My theory is that the old android browser returns some sort of self-referential error object, which Honeybadger is trying to serialize with JSON.stringify(), so it raises a new error. We can try to pre-process this error on our end, but it would be nice if Honeybadger was able to handle it gracefully.

Make Bower Package Available

You know you want to ;)

If not configured, I get "POST https://api.honeybadger.io/v1/notices.html 403 (Forbidden) - Invalid API key"

We include honeybadger.min.js on every page (bundled with other JS), but we only do Honeybadger.configure sometimes – only if the app env is production, for example.

But it seems it tried to POST to honeybadger.io, and breaks, even without a configure block. I get "POST https://api.honeybadger.io/v1/notices.html 403 (Forbidden) - Invalid API key" in my console in dev.

I would suggest only connecting to the API at all if configured.

Cross Origin Error

Just added honeybadger-js to my project and got:

Uncaught SecurityError: Blocked a frame with origin "https://api.honeybadger.io" from accessing a frame with origin "https://demo.rivalmap.com". Protocols, domains, and ports must match. 

Used the example code right below the code to include honeybadger.min.js:

try {
  jQuery.call_undefined_method_now();
} catch (e) {
  Honeybadger.notify(e, { context: { some_other_data: 'foo' } });
}

Send params and cookies.

NPM

Is this library meant to be used server-side with node.js? I ask because it's published in NPM, but it does not work in node due at least to the references to window.

ExecJS::ProgramError: Invalid syntax: 0x (in /app/vendor/assets/javascripts/honeybadger.min.js)

Hi, I'm getting this error when deploying to my staging environment. I'm suspecting this to happen because of rails' asset precompilation, resulting in doubled minification or something similar related to the rails asset pipeline.

Is there a way to easily get honeybadger.js (non-minified)?

What is the best practice for reporting application-generated JS errors?

I have enabled honeybadger-js errors with onerror: true, and I am getting a lot of errors some of which come from external libraries and other script files loaded in the client browser. Is there any best practice for wrapping one's own code with try catch notify other than doing it for every piece of code that "might break"?

How are other people doing this, can we see some examples?

HTTPS certificate problem on Firefox 30

Firefox 30 (Mac) and unknown other versions on PC refuse to load https://js.honeybadger.io/v0.1/honeybadger.min.js because of a certificate issue (sec_error_unknown_issuer).

Thus Honeybadger.configure raises an error, breaking our script. And we didn't notice, because Honeybadger does not work.

I'm doing this to mitigate:

if (typeof Honeybadger === 'undefined') var Honeybadger = {configure: function() {}, setContext: function() {}, notify: function() {}};

Another option is to check if Honeybadger is defined on several every time you use it.

I know there are newer versions of Firefox, but we can't control our users.

Add version number to honeybadger.js file comment

This is a pretty standard practice which makes it easier for developers to see what version of the javascript they've copied into their application.

I assume that most Rails developers will actually be copying the un-minified source to an assets folder and letting their asset compiler handle the minification with the rest of their application code. For the developers who use the straight minified version, they should still be able to figure out what version they have without doing a file-search.

Here's an example from jquery.cookie.js:

/*!
 * jQuery Cookie Plugin v1.3.1
 * https://github.com/carhartl/jquery-cookie
 *
 * Copyright 2013 Klaus Hartl
 * Released under the MIT license
 */

Testing the API

Hello there, thanks for this quite nice module. In our app we are using honeybadger on production and staging environment as well. I was wondering if there is any proper way to write unit tests against our error handler configuration.

I think I might replicate your specs but shall we trigger any errors in order to test the app on development as well?

Honeybadger.trycatch wrapper

Using this locally, just thought the pattern might make things a bit cleaner if it were integrated into core

Honeybadger.trycatch = function (fn) { // http://stackoverflow.com/a/11774924/94668
  return function () {
    try {
      fn.apply(this, arguments);
    } catch (e) {
      Honeybadger.notify(e);
    }
  };
};

// helps take this
$('#submit').click(function (e) {
  try {
    // some code
  } catch (e) {
    Honeybadger.notify(e);
  }
});
// to this: 
$('#submit').click(Honeybadger.trycatch(function (e) {
  // some code
}));

Accessing selectionEnd on an input element that cannot have a selection

Ugh, now that we're one level deeper we're now seeing this error:

Accessing selectionEnd on an input element that cannot have a selection.

It looks like part of the serialization process ends up trying to iterate across a DOM node at times and comes across a property that doesn't want to be touched. Came across this SO question: http://stackoverflow.com/questions/11547672/how-to-stringify-event-object

"'Honeybadger' is undefined" on Windows/IE

We're seeing this error pretty frequently on Windows machines: "'Honeybadger' is undefined". It seems to be almost entirely on Windows XP with IE8, but we've also seen it a handful of times on Windows 7 up to IE10. On Browserstack we see it consistently with XP/8.

Why not use a default window.onError event instead of explicit try/catch?

Then we have a global entry point for all errors, and configuration becomes minimal.

https://developer.mozilla.org/en-US/docs/DOM/window.onerror

How to know Honeybadger.notify is successful.

While sending notice using Honeybadger.notify, I want to know whether sending notice is success or not. Is there anyway like callback function that I can provide which will be called after successful notification. I feel irritated using because sometimes it works but sometimes not.

Configure API is not consistent

The API for configure is different between honeybadger-js and honeybadger-node. The browser version requires snake case as keys, and the node version requires camel case. This makes it difficult for people (like myself) who run their code in the browser and test in both the browser and node environment.

I would argue that camel case would be the right alternative (get your snake case out of my JS 😉), but that is obviously a large breaking change.

Maybe allow camel case as keys and then transform to snake case? I was working on a fix but can't put a lot of time into it now, and wanted to get your thoughts @joshuap.

Move commands in makefile to npm

This will just consolidate the build commands that I run.

Security concerns for client side implementation

I am wondering if it is recommended to use this for tracking client side JS errors. If it is the intent to have this library support client side operation, how should I authenticate my honeybadger requests?

cc: @glaksmono

Broken on IE8

Not sure which browsers you intend to support, but loading honeybadger-js in IE8 causes errors in our application. I suspect there is another error, but Honeybadger throws when reporting it. It seems to be coming from this line, saying 'original' is null or not an object'.

Internet Explorer triggers error

Hi,

When I load honeybadger.min.js as a seperate file alongside my other minified scripts I see the following error in all versions of IE including version 10

doesn't seem to happen in development mode/locally where other scripts are not minified..

Please include non-minified file in repo

Hi guys, can you please include the non-minified version of this library somewhere in the repo so it is easy to download w/o having to clone and run the build scripts. Maybe a dist folder with all of them? Thank you!

Install instructions suggest --save-dev

The installation instructions suggest saving this package as a devDependency rather than a strict dependency.

npm install honeybadger-js --save-dev

Can someone explain to me why this is? It doesn't seem right.

If something else is listening to window.onerror...

So I enabled Honeybadger in a noisy web application and we started getting tons of alerts. Our configuration is the basic one shown in the example which says window.oneerror should be ignored by default. Is this not the case if something else is already setup to listen to window.onerror? In particular, this is configured:

window.onerror =  function(message, url, lineNumber) {
    _gaq && _gaq.push(['_trackEvent', 'Javascript Errors', url, message + ' at line: '+ lineNumber]);
}

If that is setup, is Honeybadger supposed to be sending in all these errors too? I'd rather it didn't and I'm confused about why it is. We only have one use of Honeybadger.notify and I'm expecting only that one use to log.

notify breaks when context contains a Symbol

The serialize method will handle a function properly, but does not work when there is a Symbol.

Even though I am not having this problem personally, the method assumes that all the keys in the object are serializable, which is not necessarily true. Although, I am not sure what an elegant way of handling this is.

At the very least, it might be nice if honeybadger had some logic to send a generic error message if serializing the payload fails.

Console logging

Add an option to log errors to console when calling Honeybadger.notify.

How to know Honeybadger.notify is successful

While sending notice using Honeybadger.notify, I want to know whether sending notice is success or not. Is there anyway like callback function that I can provide which will be called after successful notification. I feel irritated using because sometimes it works but sometimes not.

`Too much recursion` inside honeybadger.js

Hi!

There was some error in Honeybadger.js that trigger some error in Honeybadger.js that trigger some error in Honeybadger.js that...

We have four instances from this error, all coming from Firefox 51. The library where the error comes from is https://www.npmjs.com/package/react-sortablejs.

An screenshot with the error, and the line inside honeybadger recursing.

Thanks a lot :)

Source maps only for Honeybadger

I would like to use the source map support for Honeybadger, but I don't want to expose my source maps to the world. How can I accomplish this?

Preferably, I would like to set a project setting to provide a hidden path where the source maps can be located.

I could also distinguish by user agent, although this is obfuscation, not security. Then again minified sources are just obfuscation, so this might be sufficient.

Add option to send API request with POST

Currently, if the context is too large, the request fails with a 414 Request-URI Too Large status. If the context could be stored in the data of a POST request, maybe the request would not fail.

I know that this might not be possible in browsers that don't support XMLHttpRequest, but if your app requires XMLHttpRequest anyway, it would be nice to be able to opt-in to using POST to avoid notifys possibly failing with 414s.

The obvious solution would be to just not send so much context, but I would ideally like to send the entire Redux state of the app at the time of the error, which could get very large depending on how much content the app is currently showing.

Sourcemaps do not seem to be supported

We have added the devtool option of sourcemaps as suggested. I've also checked that the file downloaded by the browser includes the sourcemap URL reference:

//# sourceMappingURL=bundle-0505d8603c675bbace9b.js.map

This file is available directly from the website, and honeybadger still cannot provide a stacktrace or decent line number for where the exception was raised. Are there any known issues with this feature?

lib errors if body tag not yet processed

In Chrome 32.0.1700.107
I am investigating adding honeybadger-js to my project, and plan to use onerror: true for the first bit to get an idea what areas are worth explicit try-catches.
When testing the integration, I first caused an exception just after initializing the lib while inside the head.

Uncaught TypeError: Cannot call method 'appendChild' of null honeybadger.js?body=1:1414
Honeybadger._crossDomainPost honeybadger.js?body=1:1414
Honeybadger._sendRequest honeybadger.js?body=1:1407
Honeybadger.notify honeybadger.js?body=1:1376
Honeybadger._handleTraceKitSubscription honeybadger.js?body=1:1435
notifyHandlers honeybadger.js?body=1:146
traceKitWindowOnError honeybadger.js?body=1:192

I don't have the time right now to make and test a pr, but I expect the solution to be appending the tracking pixel to head or deferring the append until onload (maybe if document.body is nil)

CORS not allowed?

I am trying to test the JS error reporting in development, but so far I get this error:

XMLHttpRequest cannot load https://api.honeybadger.io/v1/notices/js?api_key=MY_API_KEY. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://my-app.dev' is therefore not allowed access. The response had HTTP status code 500.

This is the config script in the <head> tag:

    <script src="//js.honeybadger.io/v0.3/honeybadger.min.js" type="text/javascript"></script>
    <script>
      Honeybadger.configure({
        api_key: 'MY_API_KEY', // Public API key
        onerror: true
      });
    </script>

Does it only work in production?

Browserify compatibility issues.

Followed the README instructions and ran into some issues.

First thing that didn't work was that the README says to do var Honeybadger = require("honeybadger");. This errors out because it can't find honeybadger. Instead you have to do var Honeybadger = require("honeybadger-js/honeybadger");

Second thing is that this file doesn't actually seem to be written as a module so Honeybadger is just an empty object at this point, but window.Honeybadger is present.

The final working code ended up looking like...

require("honeybadger-js/honeybadger");
var Honeybadger = window.Honeybadger;

What is the intended behavior here and what should the README reflect?

`require` oddities with bower and sprockets 3

Not entirely sure if this is an issue with honeybadger-js or elsewhere. We're using the bower package through rails-assets and when we tried to upgrade sprockets to version 3 we got an odd error:

Sprockets::FileNotFound: couldn't find file 'honeybadger.js' with type 'application/javascript'

We took a peek in the gem generated by rails-assets and it turns out there's a honeybadger.js.js file with a second .js on the end, and changing our require line to:

//= require honeybadger.js.js

fixed the problem for us.

Ability to require with `browserify`?

I'm using npm and browserify for client side packages and tried adding honeybadger-js, but can't require it in my application via the package. I'm not sure if there is a canonical preferred way to handle this, but I've seen some libraries add a module.exports if it makes sense in the context.

Add an automated release task

This is just another script that will eventually live in bin/.

No way to use fingerprinting

I couldn't find a way to use fingerprinting as in here:

http://docs.honeybadger.io/article/36-exception-grouping

Using fingerprint as an option in notify obvously doesn't work as it's not handled in the Notice class. Could you add it to the API?

Cannot connect to https://js.honeybadger.io from IE8

It appears that in Internet Explorer 8, the following URL does not resolve: https://js.honeybadger.io/v0.2/honeybadger.min.js. This means that when trying to use the code snippet provided in the honeybadger-js README.md:

<script src="//js.honeybadger.io/v0.2/honeybadger.min.js" type="text/javascript"></script>

The schemaless connection will fail, and the following error appears in Javascript:

Below is a screenshot of the failed connection:

And while you can try to fall back on an HTTP schema, the following error is shown in Internet Explorer 8 when the site in question is browsed via HTTPS, which leads to a less than optimal user experience:

EDIT: Removed screenshots

which version?

Hi guys. I want to serve honeybadger.js locally (not through the CDN). Which version should I use?

bower has: 0.0.4
the cdn has: 0.1.0
github master shows two versions in the JS (0.1.0 & 0.1.1)
there's no github tag for 0.1.0

Suggestions?

Better grouping of errors in single page applications

NOTE: I think this is really an issue with the Honeybadger backend/UI and not the honeybadger-js client, so this is probably not the right place for this. However, it is something that probably only affects JavaScript single page applications. Please let me know if there is a more appropriate place for this.

According to http://docs.honeybadger.io/guides/api.html#sample-payload, Honeybadger uses the backtrace to group errors together in the Honeybadger UI:

The backtrace key of the error hash is essential, as that is used for grouping similar errors together in the Honeybadger UI.

When we deploy our frontend code, we generate a completely new minified bundle file with Webpack every time. This means that the line and column numbers in the stack trace for errors thrown are very likely to be slightly different after each deploy, even if the relevant line/module in the original source code was not changed at all.

This means that after every deploy, the same errors that were being reported to Honeybadger before the deploy are considered to be new errors, and they are not grouped together in the UI. This makes it more difficult to determine if error reports we receive after a deploy are caused by the deploy or are just new instances of existing issues. This also means we can't really use the "ignore" feature because every error we ignore will effectively become unignored after the next deploy.

Of course the best solution would be to just fix all of our errors, but it takes time and it would be nice if Honeybadger would stop badgering us about the same old errors in the mean time. =P

I'm not sure what the best way to solve this would be, but here are some ideas I came up with:

• Continue to group errors by stack trace, but use the source-mapped stack trace if a JavaScript source map is provided. (This might mean that Honeybadger would have to not show an error report in the UI until it has finished the source mapping operation, though.)
• Add the ability to "group by" various options in the Honeybadger UI. For example, "Group by stack trace" (default), "Group by source-mapped stack trace" (probably only applies to JavaScript), "Group by name", "Group by message", etc.

Uncaught TypeError: Cannot call method 'appendChild' of null

This happens when sending notification.

Uncaught TypeError: Cannot call method 'appendChild' of null honeybadger.min.js:42

0.2.0 release needs a tag for Bower

Without the tag in place Bower can't find the version...

Filter/Ignore certain errors?

The Ruby client of honeybadger allows you to filter/ignore certain errors, but I could not find the same option in the JS client. Is this possible somehow? I wanted to ask before I cloned the repo and started to add the functionality myself as a pull request.

Thanks

"Property 'hasOwnProperty' of object #<error> is not a function" reported in honeybadger

While debugging our own Javascript exceptions I found one that I think might exists in honeybadger itself, or at least that's what honeybadger is telling me :)

All exceptions are coming from Android Browser 4.0.

Cannot call method 'match' of null

We're seeing a TypeError: Cannot call method 'match' of null coming from this line:

https://github.com/honeybadger-io/honeybadger-js/blob/master/coffee/src/notice.coffee#L48

I'm not sure what the actual underlying error is yet. This exception is coming from inside an iframe, that may be what contributes to the lack of a URL?

Regardless, perhaps that line should just test for a url before trying to match on it.

404 from honeybadger.min.js.map

I am seeing a 404 for file /assets/lib/honeybadger.min.js.map. I am seeing it in development mode in the JS console and server logs, and in Production in the server logs.

I would like to resolve the 404 error. Is there something I need to do to put the file there? Or to stop it from being requested?

rails 3.2.13
honeybadger 1.6.2
uglifier 1.3.0
turbo-sprockets-rails3 0.3.6

"Can't execute code from a freed script" on IE and Edge browsers

It's unclear whether this is caused by Honeybadger or Honeybadger is just the messenger, but we've been seeing a lot of errors from IE and Edge browsers recently:

Can't execute code from a freed script

As near as I can tell it looks like it's coming from here, when it calls return fn.apply(this, arguments);. Any idea what might be going on with this? From what searching I've done, it looks like it's related to code trying to execute from another frame that has since been removed. We don't do anything with frames in our code, so trying to figure out where it is coming from.

API Key security

I have seen several issues here about the security of API keys in the javascript library, and it is being stated that this is just the nature of client side and we must accept that malicious users can steal our key and post errors to our Honeybadger app if they want.

I am sorry but this is simply not the case. There is no reason that API keys cannot be tied to the originating domain(s) specified by the user, or that auth tokens cannot be generated on the fly based on a key that it kept secretly. Please consider implementing something that does not just let anybody post to any Honeybadger that uses this library.