设置JS错误接口

说明：

• JS探针版本要求：3.2.1以上。
• 适用于Vue、React、Angular。

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

• err: 框架提供的错误对象或自定义错误对象。 格式为:

{
    message: '错误信息',
    stack: '错误堆栈'
}

• contextData：用户自定义Error Scope内的信息，例如组件信息等。相当于在error的scope中设置context数据，参数详情参考自定义上传Scope中setContext API的参数。

注意：探针异步加载时需要判断window.TINGYUN对象已存在。

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 (!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示例

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

配置示例:

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示例

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

配置示例:

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