Question

我正在开发一个React Native项目。我是React Native的第一名。我的项目中有一些错误。我想知道如何在React native中处理错误。我怎么看这些错误？

if ((this.state.loadedUrl === 'https://www.truthbaron.com/') && (!this.state.newsflag)){
  const html = event.nativeEvent.data;
  const $ = CheerIO.load(html);
  isLoggedIn = Object.keys($(PROFILE_SELECTOR)).includes('0');
  if (isLoggedIn) {
    if(this.state.messagesflag){
      profileLink = $(PROFILE_SELECTOR).eq(0).children().attr('href');

      username = profileLink.match(/members\/[a-z]+/)[0].slice(8);

      if (username.endsWith('/')) username = username.slice(0, username.length - 1);
      this.setState({ url: `${profileLink}messages`, loading: true });
      console.log('messages page:' + profileLink);
    }else{
      profileLink = $(PROFILE_SELECTOR).eq(0).children().attr('href');
      console.log('profile page!!!' + profileLink);
      this.setState({ url: profileLink, loading: true });
    }  
  }
  else {
    const loginLink = $(LOGIN_SELECTOR).eq(0).children().attr('href');
    console.log('loginLink:' + loginLink);
    this.setState({ url: loginLink, loading: true });

  }
}

Answer 1

有2种处理错误的方法。

1.try {
  var test;
  test.color;
} catch(err) {
  // handle error here
}

2.const previousHandler = ErrorUtils.getGlobalHandler();
ErrorUtils.setGlobalHandler((error, isFatal) => {
// handle the error here
  console.log(error);
});

您可以使用Rollbar监视React Native中的错误。

有关更多信息，您可以访问此URL。 https://rollbar.com/blog/react-native-error-monitoring/

Answer 2

有多种方法可以处理React中的错误，它基于您所构建的体系结构或代码。

标准方法可能是

try {
 //code blocks
catch {
// error .log
}

您可以中继诸如

之类的方法功能

console.error

如果您正在发出api请求

 class IsLoading extends React.Component { 
  constructor(props) {
    super(props);
    // initialise our state
    this.state = { isLoading: false };
  }

  componentDidCatch(error, info) {
    // if we have a promise then we can deal with it
    if(error instanceof Promise) {
      // we have a promise so lets update our state
      this.setState({ isLoading: true });
      // once the promise has resolved we can update our state again and grab the data
      error.then((data) => this.setState({ isLoading: false, data }));
    } 
  }

  render() {
    // as props.children is a function, let's invoke it and p ass in out state
    return this.props.children(this.state) }
  }
}

const Loader = props => (
  <IsLoading>
    // this is the function that gets called in the render met hod above
    {({isLoading, data}) => (
      isLoading
      // show some loading text if we're loading
      ? "Loading..."
      // copy our children and pass in the data as a prop : 
      React.cloneElement(props.children, {data})
    )}
  </IsLoading>
);

如何处理React Native中的错误

2 个答案: