因此,基本上,我等待Auth从aws放大/认知模式返回当前经过身份验证的用户,然后运行查询以获取其数据(我故意使它出错,因此在这种情况下可以检查错误边界的功能)。我将app.tsx中的client.ts导入并调用将参数传递给它的getData函数,然后将axios错误对象返回给调用函数。我遇到了一些问题,但无法按照下面的说明使其中任何一个正常工作:

  • 如果我在data [0] .error条件中设置了“throw”,它将给出
    我没有被承认的 promise ,因为我不拒绝那里的 promise
    手动。当我尝试这样做时,出现一些打字错误
    无法执行此操作,因为Component没有该类型
    某物(我将重做并发布实际错误)
  • 2)如果我在有条件的情况下在render函数中设置了throw
    基于state.hasError,它可以工作并达到错误边界,但是
    然后抛出一个错误,因为我有一个未捕获的异常,因为我
    没有捕获该错误,我抛出了
  • 如果我捕获了render函数中引发的错误,它将
    到达错误边界,但随后抱怨render()不是
    返回任何

  • 因此,从设计的 Angular 寻求有关如何改进它的建议
    我在此找到的所有示例的问题在于,它们是简单的示例,其中异步调用直接在组件中进行,而错误直接在组件中处理,而我实际上并不想这样做,例如当我可以简单地将代码传递给驻留在一个地方的函数以返回我想要的代码时,我不必重复代码。

    App.tsx:
    async componentDidMount() {
    
          await Auth.currentAuthenticatedUser().then( data => {
            this.onGetAuthUser(data.username);
            var username = data.username;
            //rockset query --need to implement error handling elsewhere
            getData('select * from "ruzzleLeagueCollection" WHERE username=:username',
            [{"name": "username",
            "type": "string",
            "value": data.username}]).then((data: any) => {
    
              if(data[0] != null) {
                if(data[0].error != null) {
                 this.setState({error: true, errorData: data[0].error});
                 return;
                }else {
                 //get the logged in user.
                this.onGetLoggedUser(data[0]);
                }
              }else {
                //create the loggedUser object and pass it
                this.onGetLoggedUser([{
                  username: username,
                  ruzzleName: null,
                  group: 0,
                  hasProfile: false,
                  currentSkill: null,
                  highestSkill: null
                }])
              }
            });
          });
    
      }
      render() {
        try{
        if(this.state.error) throw this.state.errorData;
        return (
          <div >
    
              <Router>
                <div>
                  <NavBar/>
                  <Switch>
                    <Route exact path="/" component={Home}/>}/>
                    <Route path="/players" component={Players} />
                    <Route path="/season" component={Season} />
                    <Route path="/records" component={Records} />
                    <Route path="/stats" component={Stats}/>
                    <Route path="/admin" component={Admin}/>
                  </Switch>
                </div>
              </Router>
    
          </div>
        )
        } catch(err) {
          console.log('error caught!');
      }
      }
    

    客户端
    import axios from 'axios';
    
    const apiKey =  'fgf' //process.env.REACT_APP_ROCKSET_APIKEY;
    const apiServer = process.env.REACT_APP_ROCKSET_APISERVER;
    
    const url = apiServer + '/v1/orgs/self/queries';
    const headers = { headers: {'Authorization': 'ApiKey ' + apiKey}};
    
    var data = {'sql':{
        'query': '',
        'parameters': [
        ]}
    }
    
    //GET REQUEST
    export async function getData(query: string, parameters: any) {
        data.sql.query = query;
        data.sql.parameters = parameters == null? undefined:  parameters;
        try {
            const response = await axios.post(url, data, headers)
            return response.data.results;
        }catch(err) {
            console.error('The following error occurred ' + err.message)
            if(err.response) {
                return handleErrors(err.response, 'response');
    
            }else if(err.request) {
                return handleErrors(err.request, 'request');
    
            }else {
               return handleErrors(err, 'other');
    
            }
        }
    }
    
    function handleErrors(error: any, errorType: string) {
        switch(errorType) {
            //this is a response error
            case 'response':
                return [{error: {
                    data: error.data,
                    status: error.status,
                    headers: error.headers
                }
                }]
            case 'request':
                return [{ error:
                        { data: error.request}
                    }]
            default:
                return [{error: {
                    data: error.message}
                }]
        }
    }
    

    Errors.tsx:
    export class Errors extends Component<any,IState>{
        constructor(props:any){
            super(props);
            this.state = {
                hasError: false,
                alertOpen: true,
                error: null,
                info: null
            };
        }
    
        componentDidCatch(e: any, info: any) {
            this.setState({
                hasError: true,
                error: e,
                info: info
            });
        }
    
          closeAlert() {
            this.setState({alertopen: false, hasError: false})
        }
          //render the error screen
          render() {
              if(this.state.hasError){
                  var msg = 'Oops! Something went wrong. Error:  ' + this.state.info.componentStack;
                  var title = 'Error in ' + this.state.error.data.message + ' ' + this.state.error.status;
              return(
                <div>
                    <React.Fragment>
                        <AlertDialogSlide
                            open={this.state.alertOpen}
                            title = {title}
                            message= {msg}
                            closeAlert={() => this.closeAlert()}
                            error={true}
                        >
                        </AlertDialogSlide>
                    </React.Fragment>
                </div>
              )
          }
          return this.props.children;
        }
    
    }
    

    index.js(入口点)-错误边界包装
    ReactDOM.render(
        <Provider store={store}>
            <Errors>
                <App />
            </Errors>
        </Provider>
    , document.getElementById('root'));
    
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers:
    serviceWorker.unregister();
    

    最佳答案

    react docs中所述:错误边界不代表而不是来捕获异步代码错误:
    错误边界不会捕获以下方面的错误:

  • 事件处理程序
  • 异步代码(例如setTimeout或requestAnimationFrame回调)
  • 服务器端渲染
  • 在错误边界本身(而不是其子级)中引发的错误
  • 关于reactjs - react 错误边界无法与异步功能正常配合,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56995736/

    10-12 03:25
    查看更多