However, if you’re using Redux, you can take things a step further. Redux provides excellent hooks to log the actions occurring on your site, and retrieve the state should something blow up. All you need to do is create a simple piece of Redux Middleware and apply it when creating your store:
When you’re creating your store, just make sure you apply the middleware:
And now, if something blows up, you’ll get great context!
React Error Boundaries
React 16 added the concept of “error boundary” components. These components are circuit breakers that catch errors bubbling up from child components. These are a great place to track errors and transmit them to TrackJS:
Redux Dev Tools
It’s great to log the actions that occurred before an error. But what if you could play them back in Redux dev tools? Our awesome community has created a logger that will allow you to replay the actions in a new session!
The first step is to create our new TrackJsErrorHandler.
Then we need to tell Angular 2 about our new error handler. When you specify an @NGModule you can list overrides for various providers.
*Note: You could conceivably configure and load TrackJS within the trackJs.handler.ts file, but you’ll miss any errors that occur before module initialization. Therefore we recommend loading TrackJS before module/application init, preferably as the first script on the page.
Backbone defines base types that you inherit from. We can use the watchAll API to automatically wrap up your Backbone functions.
Marionette extends Backbone with a ton of extra functionality for building large web applications. It follows the same extension patterns as Backbone, but a few of its base methods do not work well with wrapping.
Ember has a few different error handling integration points. The simplest is to just use the Ember.onerror callback. If you choose to also do some custom error handling in Ember.RSVP.onerror please be aware that the global Ember.onerror receives the same error data - so be careful not to double track!
Ember CLI Integration
If you’re currently using Ember CLI and would like to integrate with TrackJS, you’re in luck! There is an actively maintained Ember CLI package that will get you up in running in no time!
You can get even better errors by using the Observable methods to add extra details to the Telemetry Timeline. You can easily add it to some or all of your components.
Special thanks to the crew at OhmzTech for their contributions!
By default TrackJS wraps calls to addEventListener in order to get better stack trace information. Meteor also comes out of the box with its own wrapping of addEventListener. If TrackJS is loaded after Meteor (which is common, given the way Meteor apps load) there is the potential that multiple events will be bound for the same user interaction.
For that reason, we recommend turning off TrackJS callback wrapping so it does not interfere with the Meteor event system.