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.

Minified React Errors

When running React in a production scenario, the error messages are often minified to save space in the resulting bundle. TrackJS will helpfully decode these for you in the UI. Simply hover over the message of any minified error and the decoded content will pop up.