Set JS error interface

Explain：

• JS probe version requirement: 3.2.1 or above.
• Works with Vue, React, Angular.

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

• Err: Framework-provided error object or custom error object. The format is:

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

• ContextData: Information in the user-defined Error Scope, such as component information. It is equivalent to setting the context data in the scope of error. For details of the parameters, refer to Customized upload Scope the parameters in setContext API.

Notice: When the probe is loaded asynchronously, it is necessary to determine that the window. TINGYUN object already exists.

Vue example

Typically configured in the SRC/main. JS:

Configuration example:

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

Typically configured in the SRC/index. JS:

Configuration example:

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

Typically configured in a app. Module. Ts:

Configuration example:

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 } ],
   ...
 })