Setting JavaScript Error Interface

Note:

• JS Agent version requirement: 3.2.1 or above.
• Applicable to Vue, React, Angular.

window.TINGYUN.captureException(err[, contextData])

• err: Error object provided by the framework or a custom error object. Format:

{
    message: 'Error message',
    stack: 'Error stack'
}

• contextData: Information within the user-defined Error Scope, such as component information. This is equivalent to setting context data in the error's scope. For parameter details, refer to the setContext API parameters in Customizing Upload Scope.

Attention: When the agent is loaded asynchronously, you need to check that the window.TINGYUN object exists.

Vue Example

Usually configured in src/main.js:

Example configuration:

function formatComponentName(vm) {
    if (vm.$root === vm) return 'root';
    var name = vm._isVue
        ? (vm.$options && vm.$options.name) ||
        (vm.$options && vm.$options._componentTag)
        : vm.name;
    return (
        (name ? 'component <' + name + '>' : 'anonymous component') +
        (vm._isVue && vm.$options && vm.$options.__file
            ? ' at ' + (vm.$options && vm.$options.__file)
            : '')
    );
}

Vue.config.errorHandler = function(err, vm, info) {
    if (!window.TINGYUN) {
        return ;
    }
    if (vm) {
        var componentName = formatComponentName(vm);
        var propsData = vm.$options && vm.$options.propsData;
        window.TINGYUN.captureException(err, {
            componentName: componentName,
            propsData: propsData,
            info: info
        });
    } else {
        window.TINGYUN.captureException(err);
    }
};

React Example

Usually configured in src/index.js:

Example configuration:

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    componentDidCatch(error, info) {
        this.setState({ hasError: true });
        if (!window.TINGYUN) {
            return ;
        }
        window.TINGYUN.captureException(error, {
            info: info
        });
    }

    render() {
        if (this.state.hasError) {
            return null;
        }
        return this.props.children;
    }
}

ReactDOM.render(<ErrorBoundary> <App /> </ErrorBoundary>, document.getElementById('root'));

Angular Example

Usually configured in app.module.ts:

Example configuration:

import { ErrorHandler } from '@angular/core';

export class GlobalErrorHandler implements ErrorHandler {
   handleError(err:any) : void {
        if (!window.TINGYUN) {
           return ;
        }
        window.TINGYUN.captureException(err);
   }
}

@NgModule({
   ...,
   providers: [ { provide: ErrorHandler, useClass: GlobalErrorHandler } ],
   ...
 })