设置JS错误

设置JS错误接口

说明:

适用于Vue, React, Angular

TINGYUN.setError(err[, metaObject])

err: 框架提供的错误对象, 常见接收结果对象为: {message, stack}。 metaObject: 用户自定义设置的信息，例如组件信息等。

示例(Vue):

一般在src/main.js中配置:

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 (vm) {
        var componentName = formatComponentName(vm);
        var propsData = vm.$options && vm.$options.propsData;
        window['TINGYUN'].setError(err, {
            metaData: {
                componentName: componentName,
                propsData: propsData,
                info: info
            }
        });
    } else {
        window['TINGYUN'].setError(err);
    }
};

示例(React):

一般在src/index.js中配置:

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

    componentDidCatch(error, info) {
        this.setState({ hasError: true });
        window['TINGYUN'].setError(error, {
            metaData: {
                info: info
            }
        });
    }

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

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

示例(Angular):

一般在app.module.ts中配置:

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

export class GlobalErrorHandler implements ErrorHandler {
   handleError(err:any) : void {
     window['TINGYUN'].setError(err);
   }
}

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