Integrating with Vue

Vue has a global error handler where we can insert a call to TrackJs.track(). Vue supplies a native JavaScript error object along with the Vue instance itself. From this we can gather component name, and additional data like properties.

Vue.config.errorHandler = (err, vm, info) => {

    // Log properties passed to the component if there are any
    if(vm.$options.propsData) {
        console.log("Props passed to component", vm.$options.propsData);
    }

    // Emit component name and also the lifecycle hook the error occurred in if present
    var infoMessage = `Error in component: <${vm.$options.name} />\n`;
    if (info){
        infoMessage += `Error occurred during lifecycle hook: ${info}\n`;
    }

    // This puts the additional error information in the Telemetry Timeline
    console.log(infoMessage);

    // Track the native JS error
    window.TrackJS && TrackJS.track(err);
}

TrackJS Vue Integration

import { TrackJS } from "trackjs";

Vue.config.errorHandler = (err, vm, info) => {

    // Log properties passed to the component if there are any
    if(vm.$options.propsData) {
        TrackJS.console.log("Props passed to component", vm.$options.propsData);
    }

    // Emit component name and also the lifecycle hook the error occurred in if present
    var infoMessage = `Error in component: <${vm.$options.name} />\n`;
    if (info){
        infoMessage += `Error occurred during lifecycle hook: ${info}\n`;
    }

    // This puts the additional error information in the Telemetry Timeline
    TrackJS.console.log(infoMessage);

    // Track the native JS error
    TrackJS.track(err);
}

TrackJS Vue Integration

Vue.config.errorHandler = (err, vm, info) => {

    // Log properties passed to the component if there are any
    if(vm.$options.propsData) {
        console.log("Props passed to component", vm.$options.propsData);
    }

    // Emit component name and also the lifecycle hook the error occurred in if present
    var infoMessage = `Error in component: <${vm.$options.name} />\n`;
    if (info){
        infoMessage += `Error occurred during lifecycle hook: ${info}\n`;
    }

    // This puts the additional error information in the Telemetry Timeline
    console.log(infoMessage);

    // Track the native JS error
    window.trackJs && trackJs.track(err);
}

TrackJS Vue Integration