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