Integrating with React

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:

import React, { Component } from "react";
import { TrackJS } from "trackjs";

export class TrackJSErrorBoundary extends Component {
    componentDidCatch(error, errorInfo) {
        if (errorInfo && errorInfo.componentStack) {
            // The component stack is sometimes useful in development mode
            // In production it can be somewhat obfuscated, so feel free to omit this line.
            console.log(errorInfo.componentStack);
        }

        TrackJS.track(error);
        this.setState({ error });
    }

    render() {
        // Whatever rendering of error messages or children components you would like
    }
}

TrackJS React Error Boundaries

For more on using ErrorBoundaries, check out the React Documentation.

Redux Middleware

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:

const TrackJSLogger = store => next => action => {
    try {
        // log every action so they appear in the TrackJS telemetry timeline
        console.log(action);
        return next(action)
    } catch (err) {
        // Something bad happened, lets log out the entire state so we can see it in the timeline
        console.warn(store.getState());

        // NOTE: this assumes TrackJS was initialized previously, at app startup.
        window.TrackJS && TrackJS.track(err);
    }
}

export default TrackJSLogger;

/middleware/TrackJSLogger.js

import { TrackJS } from "trackjs";

const TrackJSLogger = store => next => action => {
    try {
        // log every action so they appear in the TrackJS telemetry timeline
        TrackJS.console.log(action);
        return next(action)
    } catch (err) {
        // Something bad happened, lets log out the entire state so we can see it in the timeline
        console.warn(store.getState());

        // NOTE: this assumes TrackJS was initialized previously, at app startup.
        TrackJS.track(err);
    }
}

export default TrackJSLogger;

/middleware/TrackJSLogger.js

const TrackJSLogger = store => next => action => {
    try {
        // log every action so they appear in the TrackJS telemetry timeline
        console.log(action);
        return next(action)
    } catch (err) {
        // Something bad happened, lets log out the entire state so we can see it in the timeline
        console.warn(store.getState());

        // NOTE: this assumes TrackJS was initialized previously, at app startup.
        window.trackJs && trackJs.track(err);
    }
}

export default TrackJSLogger;

/middleware/TrackJSLogger.js

When you’re creating your store, just make sure you apply the middleware:

import { createStore, applyMiddleware } from "redux"
import TrackJSLogger from "./middleware/trackJsLogger"

const store = createStore(todoApp, applyMiddleware(TrackJSLogger));

index.js

And now, if something blows up, you’ll get great context!

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!

Check out the TrackJS Redux Logger on Github.