详解如何在React单页面应用中捕获错误

jsxCopy code
import React, { Component } from 'react';
class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  componentDidCatch(error, errorInfo) {
    this.setState({ hasError: true });
    // 在这里可以记录错误信息到日志
    console.error(error, errorInfo);
  }
  render() {
    if (this.state.hasError) {
      return <div>Oops! 发生了一个错误。</div>;
    }
    return this.props.children;
  }
}
export default ErrorBoundary;

jsxCopy code
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';
function App() {
  return (
    <div>
      <h1>我的React应用</h1>
      <ErrorBoundary>
        <MyComponent />
      </ErrorBoundary>
    </div>
  );
}
export default App;

jsxCopy code
window.onerror = function(message, source, lineno, colno, error) {
  // 在这里可以记录错误信息到日志
  console.error(message, source, lineno, colno, error);
};

jsxCopy code
window.addEventListener('unhandledrejection', function(event) {
  // 在这里可以记录错误信息到日志
  console.error('未捕获的Promise错误:', event.reason);
});

jsxCopy code
import * as Sentry from '@sentry/react';
Sentry.init({
  dsn: 'YOUR_SENTRY_DSN',
});
// 在错误边界的componentDidCatch方法中也可以使用Sentry.captureException(error)来捕获错误。

jsxCopy code
console.error('发生了一个错误:', error);

jsxCopy code
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    // 处理错误
    console.error('数据请求错误:', error);
  });

jsxCopy code
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    // 处理数据
  } catch (error) {
    // 处理错误
    console.error('数据请求错误:', error);
  }
}