错误处理并记录 React js 中的错误

Question

我正在尝试处理错误并在 React js 中记录错误

我使用了errorBoundary方法来处理错误，但它只支持react js版本16

import React, {Component} from "react";
import "./App.css";
import errorimg from './errorimg.svg';

//create a erro boundry
class ErrorLimit extends Component {
  constructor(props) {
    super(props);
    this.state = { error: null, errorInfo: null };
  }

  //set the error value when invoked
  componentDidCatch(error, errorInfo) {
    this.setState({
      error: error,
      errorInfo: errorInfo
    })
    logErrorToMyService(error, info);
  }

  render() {
    //checked the error
    if (!!this.state.errorInfo) {
      return (
        <div className="snap">
          <img src= {errorimg}/>
          <div className="snap-message">
          {this.state.error && this.state.error.toString()}
          {this.state.errorInfo.componentStack} 
            <p> <b>Error occured - something's gone wrong.</b></p>
            <p>Anyway we handled error
            </p>
          </div>
        </div>
      );
    } else {

      return this.props.children;
    }
  }
}


class Widget extends Component {
  constructor(props) {
    super(props);
    this.state = { loading: true, n: 0 };
    this.getCount = this.getCount.bind(this)
  }

  
  getCount() {
    if (this.state.n > 3) throw new Error('woops..counter betes limit');
    return `(${this.state.n})`;
  }

  handleClick() {
    this.setState({ n: this.state.n + 1 });
  }
  
  render() {
    return (
      <div>
        <div>Counter widget {this.getCount(this.state.n)}</div>
        <button onClick={this.handleClick.bind(this)}>
          Click me a few times
        </button>
      </div>
    );
  }
}

class SampleApp extends Component {
  render() {
    return (
      <div className="sidebar">
      {/* here we used error boundry */}
        <ErrorLimit>
          <Widget />
        </ErrorLimit>
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="app">
        <SampleApp />
      </div>
    );
  }
}

export default App;

并且我已经尝试了另一种方法用于 React 版本 15，它工作正常。成功处理错误但无法记录错误

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import wrapWithTryCatch from 'react-try-catch-render';
import errorimg from './errorimg.svg';
 
class MyErrorHandler extends React.Component {
    render(){
        return (
            <div className="App-header">{this.props.error}</div>
        );
    }
}
 
class App extends React.Component {
 
  constructor(props) {
    super(props);
    this.state = { loading: true, n: 0 };
    this.getCount = this.getCount.bind(this)
    this.handleClick = this.handleClick.bind(this);
  }

  getCount() {
    if (this.state.n > 3) throw new Error('woops..counter betes limit');
    return `(${this.state.n})`;
  }

  handleClick() {
    this.setState({ n: this.state.n + 1 });
  }

  render(){
    return(
    <div>
        <div>Counter widget {this.getCount(this.state.n)}</div>
        <button onClick={this.handleClick.bind(this)}>
          Click me a few times
        </button>
      </div>
    );
  }
}
 
 
export default wrapWithTryCatch(React, MyErrorHandler, {error: "Error catched!"})(App);

任何人请提出一种方法来处理错误并在 React 版本 15 中记录错误

Answer 1

React 16.0及以上版本支持可以处理错误的错误边界。

在 React 16.0 以下，您需要按状态处理错误，例如：

// Create a state variable for error. The initial state is false because there are no errors.
this.state = { hasError: false };

// Set hasError as true when an error is detected.
this.setState({ hasError: true });

if (this.state.hasError){
 // Do something, e.g. handle error.
}

错误处理并记录 React js 中的错误

Error Handle and Log the errors in React js

error-handling

error-logging

reactjs