错误边界组件捕获错误，但立即消失
错误边界组件是React中的一种特殊组件，用于捕获和处理在其子组件树中发生的错误。当子组件抛出错误时，错误边界组件会捕获该错误，并显示备用UI，而不是导致整个应用崩溃。
错误边界组件的主要作用是提高应用的稳定性和用户体验。通过捕获错误并展示友好的错误信息，可以避免应用因为一个错误而完全崩溃，同时也能够及时通知开发者并采取相应的措施来修复问题。
错误边界组件的使用方法如下：
- 创建一个错误边界组件，可以使用类组件或者React Hooks来实现。
- 在错误边界组件中定义
componentDidCatch（类组件）或useEffect（React Hooks）方法，用于捕获错误。 - 在错误边界组件的
render方法中，根据捕获到的错误状态，决定是否展示备用UI或者错误信息。
错误边界组件的优势包括：
- 提高应用的稳定性：通过捕获错误并展示备用UI，可以避免整个应用崩溃，提高应用的稳定性。
- 改善用户体验：友好的错误信息可以帮助用户理解发生了什么问题，并提供相应的解决方案，提升用户体验。
- 方便问题定位和修复：错误边界组件可以及时通知开发者发生了错误，帮助开发者快速定位和修复问题。
错误边界组件适用于任何可能发生错误的场景，特别是在处理异步操作、第三方库或复杂的UI组件时更为常见。
腾讯云提供了一系列与错误边界组件相关的产品和服务，包括：
- 腾讯云Serverless Cloud Function（SCF）：无服务器云函数服务，可以用于处理错误边界组件捕获的错误并执行相应的逻辑。详细信息请参考：腾讯云SCF产品介绍
- 腾讯云云开发（CloudBase）：提供全栈云开发平台，可以快速构建和部署包括错误边界组件在内的应用。详细信息请参考：腾讯云云开发产品介绍
请注意，以上只是腾讯云提供的一些相关产品和服务示例，其他云计算品牌商也可能提供类似的产品和服务。
相关·内容
我最近尝试了反应的错误边界。根据医生的反应-
错误边界的粒度取决于您。您可以包装顶级路由组件，以便向用户显示“出了问题”消息，就像服务器端框架经常处理崩溃一样。您还可以将单个小部件封装在错误边界中，以防止它们破坏应用程序的其余部分。
包装顶级路由是好的，解决了我的目的，但中断在一个组件，使其他组件的正确工作，并取代他们所有的错误边界的掉落UI。
例如，我有一个顶级的路由组件- <Component1 />，它呈现另外四个子组件-- <Component2 /> <Component3 /> <Component4 /> <Compo
浏览 2提问于2019-11-19得票数 6
回答已采纳
当我没有登录时，我收到这个错误：
Unhandled Rejection (Error): GraphQL error: Refresh has expired
它出现在下面的代码块中：
const { loading, error, data } = useQuery(GET_BILLABLE_EVENTS, {
fetchPolicy: 'no-cache',
errorPolicy: 'ignore',
onError: (err) => {
console.log({ err });
},
});
浏览 21提问于2020-06-04得票数 1
我正在考虑为特定的用例在ReactJS中执行嵌套错误边界：
在子组件中显示错误视图
若要在父组件中显示错误对话框，请执行以下操作
<ErrorBoundary1>
<ErrorBoundary2><child1 /></ErrorBoundary2>
<ErrorBoundary2><child2 /></ErrorBoundary2>
</ErrorBoundary1>
我已经尝试过这样做了，但是当发生错误时，似乎没有传递父错误边界。
浏览 1提问于2018-07-17得票数 7
1回答
React将显示一个页面，当捕获错误时，该页面将报告开发模式中的错误和堆栈。
我尝试用error boundary component的componentDidCatch方法重新定义页面的UI。但这不像预期的那样。将在很短的时间内显示z-index.I默认用户界面，然后将默认用户界面覆盖到我的页面上。 React默认用户界面是在一个具有fixed位置和大值的<iframe>标记中实现的，该标签必须单击'x‘按钮，关闭React默认UI，然后让UI appear.实现。
有什么方法可以帮助我在开发模式下阻止默认UI的反应吗？
有什么方法可以帮助我在开发模式下重新定义Re
浏览 12提问于2022-09-30得票数 0
在ErrorBoundary中，我想知道错误的原因。
例如，以下组件引发错误“未捕获TypeError:无法读取null的属性'foo‘”。
我想在ErrorBoundary中捕获此消息并记录它。但是，我可以获得组件的堆栈跟踪，但不能获得这样的错误。
有没有更好的方法呢？
组件：
const BugComponent = () => {
// set Null
const [value, setValue] = useState(null);
// "Uncaught TypeError: Cannot read property 'fo
浏览 18提问于2020-05-28得票数 1
当在React中呈现组件(包含许多子组件)时，无论出于何种原因，都会抛出JS错误，那么处理这种情况的最好方法是什么？当然，我可以捕获错误，但最终您想要呈现的东西可能无法捕获，因为缺少所需的信息。您可以在propTypes中使用.isRequired提前进行验证，但这只是在失败时控制台发出的警告。
浏览 0提问于2016-04-28得票数 39
我正在从事ReactJS项目，我的要求很简单。如果项目中出现错误，请在屏幕上显示错误消息，而不是白屏幕上显示错误。
例如：
for(let i=0; i<array.length; i++){
//something here
}
因此，在本例中，假设array.length是未定义的或null，则在控制台中显示它的错误，代码以白色屏幕中断。我想要的只是在运行时处理这种呈现错误问题，这样用户就可以理解这里有一个错误等等。
谢谢。
浏览 12提问于2022-08-03得票数 0
它处理什么样的错误，有什么真实的场景吗？
我读过这些文档，但是，它没有给出一个很好的例子，。
docs还提到它处理UI错误，但是UI错误可以在开发时解决，那么我们为什么需要“错误边界”呢？
浏览 0提问于2020-05-19得票数 2
我在生产中得到了一个不可重现的错误，但我想找出是哪个组件导致了问题(理想情况下，是在该组件中的什么位置)。 但是，React production build错误堆栈跟踪仅在我将其映射到源映射后才存在于react.production.min.js和react-dom.production.min.js中。 有没有办法在这里找到导致问题的组件？
浏览 17提问于2021-08-11得票数 0
我似乎不能在代码中触发componentDidCatch，即使我故意在构造函数中抛出一个错误，所以我知道我不会将错误抛给事件处理程序。我担心的是，我没有成功地更新我的项目以响应16，这就是为什么componentDidCatch没有工作。是我没有成功升级到反应16，还是我误用了错误边界？
下面是我已经复习过的一些文章，我经常这样做：
App.js
import React, { Component } from 'react'
import axios from 'axios'
import ErrorBoundary from &#
浏览 0提问于2017-11-25得票数 2
回答已采纳
我希望全局捕获React应用程序中的错误。
但每次错误被捕获/转发两次到我注册的函数。
示例代码：
window.onerror = (msg, url, lineNo, columnNo, error) => {
console.log(msg)
alert(msg)
}
class TodoApp extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<button onClick={(e)=>{
浏览 0提问于2018-05-06得票数 11
1回答
我试图创建一个错误边界，但它不起作用。componentDidCatch没有开火。
我原以为会呈现回退UI，但实际上原来的UI仍然存在，什么也没有发生。
const SimpleBtn = lazy(() => import("./componentJsx/SimpleBtn.jsx"));
const SimpleBtn2 = lazy(() => import("./componentJsx/SimpleBtn2.jsx"));
class ErrorBoundary extends React.Component {
constructo
浏览 4提问于2022-07-15得票数 0
回答已采纳
我们正在尝试使用react边界(v6)，但似乎需要用一个错误边界包装每个路由元素，如下所示
import { ErrorBoundary } from "react-error-boundary";
export const AppRoutes = createBrowserRouter([
{
path: "/",
element: <ErrorBoundary FallbackComponent={GlobalError}><Login /></ErrorBoundary>
},
{
path: "
浏览 16提问于2022-10-10得票数 1
我有一个，有时它只显示白色的屏幕，而不是呈现组件。没有错误或异常，它就像空DOM一样。
这个错误出现在Android和iOS上，当它发生时，我无法捕捉到任何模式。BugSnag或者Crashlytics能给我提供更多的信息吗？是否有任何方法将白屏幕视为这些服务中的错误？
浏览 0提问于2018-09-07得票数 2
回答已采纳
我的应用程序运行良好，直到我点击应用程序中的特定链接。例如，当用户点击时，一切运行正常。但是，如果用户点击www.xxx/cart.com，我的应用程序就会崩溃，React会告诉我在生产环境中不会显示该错误。那么会显示什么呢？一张白床单？
当然，它会崩溃，因为我的组件需要在购物车中显示预览元素。可能的解决方案是什么？
浏览 0提问于2021-04-28得票数 0
在这种情况下：
const A = () => (
<B
calc={() => {throw Error('error!')}
/>
);
const B = ({calc}) => (
<ErrorBoundry>
<div>result: {calc()}</div>
</ErrorBoundry>
);
(假设ErrorBoundry是典型的、简单的react文档形式的ErrorBoundry )我发现错误没有被错误边界捕获到。如果我将错误边界放在A中
co
浏览 1提问于2020-06-23得票数 1
我一直在试验一些组件，这些组件执行react-cache风格的事情，并在render方法中执行web服务调用，向React.Suspense组件抛出一个承诺，并在数据存在时重新呈现。它们调用web服务，检查响应，并根据响应将错误呈现或抛出到错误边界。我注意到，每当在组件中抛出错误时，它都会呈现两次。第一次调用堆栈看起来正常，第二次调用堆栈包含对invokeGuardedCallbackDev和invokeGuardedCallback的调用，这似乎与React确保错误出现在控制台中有关，即使在开发构建中被错误边界“捕获”。
我可以用react和react-dom 16.8.6重现这一点，只需像
浏览 0提问于2019-08-30得票数 7
1回答
错误边界不适用于承诺捕获
、、、、
我们有一个错误边界组件：
import React from 'react';
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false, errorMessage:''};
}
componentDidCatch(error, info) {
// Display fallback UI
this.setState({ hasError: true,
浏览 0提问于2018-09-15得票数 5
我正在学习如何使用componentDidCatch()。它向前看。它可以工作，但仍要在视图中显示完整的错误堆栈。
在单独的档案：
import React, { Component } from 'react'
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = {
hasError: false
}
}
componentDidCatch(error, info) {
console.log(
浏览 0提问于2018-01-20得票数 26
回答已采纳
我在我的代码中使用了错误边界，当我在渲染主要布局组件的文件中使用它时，它是有效的，例如： <ErrorBoundary>
<header></header>
</ErrorBoundary>
<ErrorBoundary>
<main/> //this component has an error
</ErrorBoundary>
<ErrorBoundary>
<footer></footer>
</ErrorBoundary> 上面的代码可以正常工作，并针对
浏览 38提问于2021-07-03得票数 1
回答已采纳
在不包括代码的情况下，我想知道是否有人遇到过这样的问题：
有一个用connect包装的组件，在我的例子中是apollo-client
让子组件也包装在connect中，在componentWillMount中执行调度
在子组件中抛出错误
得到一个无限循环
我所处的情况是，任何抛出错误的子组件都会导致父组件再次运行render，并且所有子组件似乎都运行componentWillMount，但不要运行componentWillUnmount。
此错误不会被记录，并且在调用堆栈溢出之前不会出现在控制台中。
这将导致它们重新连接到Redux，分派操作，并再次抛出错误，因为它们再
浏览 4提问于2017-09-26得票数 1
我正在翻译我的小网站从express+handlebars到一个express+sapper项目。
我希望捕获服务器端错误(例如，当您转到/api/ error时出现一个自愿错误)，并使用皂角_error.svelte模板呈现它们。
我尝试不使用自定义处理程序就抛出错误，但它返回了一个只包含错误堆栈的丑陋文本页，似乎没有被皂苷的错误处理程序捕获。
所以我添加了我自己的错误处理程序，并且我可以呈现HTML (裸的，还没有css )，但是有什么方法可以使用_error.svelte模板吗？
// ----------------------- src/server.js
import sirv f
浏览 4提问于2020-02-21得票数 10
我正在尝试使用App.js中的以下方式使用window.onerror捕获react应用程序中并发的所有错误，包括事件处理程序错误
componentWillMount() {
this.startErrorLog();
}
startErrorLog() {
const {history} = this.props;
window.onerror = (message, file, line, column, errorObject) => {
column = column || (wi
浏览 0提问于2019-09-05得票数 2
当我开始我的工作流时，我在我的表x中插入数据，它有一个"error“列。
在插入之前，我做了一些测试，有些情况下会产生错误。在这种情况下，我取值"error“列，并且我必须在活动侧停止处理，这意味着调用电路结束，否则我将使列"error”取值，并且活动侧电路正在进行中。
我不知道如何通知activiti我有一个错误，我想调用结束事件
浏览 1提问于2018-03-22得票数 0
1回答
反应错误边界不捕获错误
、、、、
我的react应用程序是从vite创建的，在那里，我的自定义React错误边界组件从组件中包装，问题是它不能捕获错误。我调试错误组件，但是它不能在getDerivedStateFromError而不是componentDidCatch中接收任何值。
这是我的错误边界代码：
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { Component } from 'react';
interface IState {
hasError: boolean;
eventId?: strin
浏览 21提问于2022-06-10得票数 1
我在努力让我的ErrorBoundary开始工作。
ErrorBoundary和大多数示例一样简单：
export class ErrorBoundary extends React.Component<IErrorBoundaryProps, IErrorBoundaryState> {
componentDidCatch(error: Error, errorInfo: Object): void {
this.setState({ catchedError: error });
}
render(): JSX.Element | Re
浏览 0提问于2018-04-25得票数 3
1回答
什么是悬念变化检测机制？我刚刚阅读了关于的文档，悬念组件显示加载状态，直到嵌套组件准备就绪。文档示例，其中使用wrapPromise函数包装获取函数，以控制下面列出的它。因此:当组件尚未准备好时，它会抛出一个错误。
function wrapPromise(promise) {
let status = "pending";
let result;
let suspender = promise.then(
(r) => {
status = "success";
result = r;
},
(
浏览 3提问于2022-06-05得票数 2
回答已采纳
有点像骆驼新手，但这是开始了。
我有以下路线：
from("activemq:queue:outputQueue").inputType(HelloWorld.class)
.to("log:stream")
.marshal().json(JsonLibrary.Jackson, HelloWorld.class)
.to("http:localhost:5000/messageForYouSir?bridgeEndpoint=true");
这将从队列中检索消息，并将它们作为JSON发送到HTTP端点。很好。
浏览 2提问于2019-09-25得票数 0
1回答
在我的React应用程序中，我创建了下面的NoteDetail组件。我的问题是:处理多个error变量的最佳实践是什么?在本例中，一个变量可能来自我的GET API-request，另一个可能来自我的DELETE API-request？我想到的第一个解决方案是使用专用的getError和deleteError变量，但我不知道这是否是处理此问题的推荐方法。
import { Link, useParams } from "react-router-dom";
import useFetch from "./useFetch";
import { api } fr
浏览 1提问于2021-07-13得票数 1
1回答
我如何承担本地异常的责任，而不让应用程序在发布模式下崩溃？
应用程序在取消这个propmt.后继续正常工作。
浏览 3提问于2021-07-16得票数 1
我希望将开始/结束或不包含的任何单词与单词"end“匹配，但忽略"end"，例如：
你好-会匹配吗？
男友-会匹配
永无止境
端端-将匹配
但
结束-不匹配吗？
我正在使用^(?!end)).*$，但这不是我想要的。
对不起我的英语
浏览 3提问于2017-07-27得票数 10
回答已采纳
我有一个可重用的自定义输入组件，可以在Formik上下文中使用，也可以不使用(即在Formik表单中使用，也可以在Formik之外使用)。行为需要相应的不同。我需要确定这个组件中的模式。有一个名为useFormikContext()的钩子，如果它不适用，就会抛出一个错误。但当我做的时候
try {
const { values, setFieldValue } = useFormikContext();
}
catch (error) {
alert('NOT in the Formik Context');
}
finally {
alert (
浏览 6提问于2021-05-20得票数 2
回答已采纳
2回答
我有一个JPanel，我需要在一个所需的坐标上添加一堆JLabel。这些JLabel将具有分配给它们的键侦听器，这些侦听器将使用箭头键确定新位置。
更具体地说，我知道当只有一个JLabel的时候该怎么做，但每当我放更多的时候，事情就会变得一团糟。当我使用箭头键时，第一个JLabel会移动，但所有其他JLabel都会消失。
有没有人可以给我一些提示，让我写一个方法，把一个JLabel放在一个特定的坐标中，并在以后使用箭头键移动它们，而不会使其他JLabel消失？
提前致谢
浏览 0提问于2012-05-15得票数 1
回答已采纳
澄清
我正在使用Vue组件编写我的第一个Laravel应用程序，它是一个CRUD。我知道如何通过laravel.log技术向Log::error("There is an error")报告重大问题，但只有在Log::error("There is an error")代码中才有用；据我所知，无法从Vue组件中写入laravel.log。(如果我错了，请纠正我！)
这就引发了一个问题:我应该如何报告Laravel应用程序中Vue组件中的错误。我知道console.log()、Chrome调试器和Devtools，这些都很适合开发。但是，在生产中可能发生的错误怎么
浏览 1提问于2020-12-09得票数 0
回答已采纳
1回答
我试着在顶层捕捉一些错误，以显示世界上最漂亮的错误页面。
由于某种原因，我看到我的节点断开了，但是错误边界从不触发。
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import ApolloClient, { gql } from 'apollo-boost';
const client = new ApolloClient({ uri: "/graphql" });
const query = gql`
浏览 6提问于2020-02-19得票数 0
回答已采纳
1回答
为什么componentDidCatch在我的react-native应用程序中不起作用。componentDidCatch不处理错误。
React native v: 50.3
React: 16.0.0
import React, {Component} from 'react';
import {View, Text} from 'react-native';
import Logo from './SignUpInit/Logo';
import SignUp from
浏览 0提问于2017-11-10得票数 8
回答已采纳
问题
我试图使用来阻止非登录用户的内容。
我有一个“有效”的解决方案，但我不明白为什么我的黑客让它起作用，有人能帮我解开我做错了什么吗？
关于我所做的事情的一般理论
据我所知。
我有一个组件，它位于我的应用程序中，并包装主内容块(而不是主导航)。它使用componentDidCatch捕获抛出的任何accessDenied，并将用户重定向到登录屏幕。
我有一个临时设置，任何容器都可以使用它来限制自己只登录用户。它检查存储中isAuthenticated的当前状态，如果用户没有重定向到登录页面，则检查它们的当前状态。
如果您尝试转到受限页面，则自组织(EnsureAuthenticatedCon
浏览 0提问于2019-02-18得票数 1
自定义对话框在我的程序中的某些点确实会消失，例如，当他们按下“编辑”按钮时，但如果我从列表视图中选择一些东西并按下“添加”按钮，则对话框不会消失。这两个按钮最终都使用下面相同的代码，但if语句决定执行哪个按钮。无论哪种方式，问题是pcDialog.dismiss()在if语句之外，所以它应该忽略always...but。
你知道问题出在哪里吗？我的对话框在任何方法之外声明为成员。
createDoneBtn.setOnClickListener(
new View.OnClickListener()
{
浏览 0提问于2011-12-18得票数 0
回答已采纳
2回答
错误发生在两种情况下：
如果输入在另一个页面上调用的组件中，则If输入具有onChange。
例如：
在Page1.js上我们有：
return <div> <Page2 /> </div>
在Page2.js上我们有：
const [customState, customSetState] = useState({
customText: ''
});
return <input value={customState.customText} onChange={setCustomStateText} />
functi
浏览 3提问于2020-01-06得票数 3
我尝试了新的ErrorBoundary功能的ReactJS 16，我试图使用它来捕获未定义的变量，呈现某些组件。这使得我的整个应用程序表现得很奇怪。我试图封装未定义变量的副作用，以便组件优雅地分解。我在这里定义了ErrorBoundary组件如下-
import React, { Component } from "react";
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
浏览 5提问于2017-10-04得票数 3
我有在中提到的默认错误边界，并且我有一个字典，它通常由我可以执行的函数填充。我在下面专门创建了一个测试用例，因为字典中不存在一个特定的函数，所以下面的测试用例会出错，我希望错误边界能够捕捉到这个错误，但是，它似乎不起作用，会发生什么呢？
应该出错的简单组件，但其部分仍应呈现：
export const App = () => {
return
<ErrorBoundary>
<Suspense fallback={<LoadingIcon/>}>
<div>t
浏览 6提问于2022-07-07得票数 0
1回答
我有一些关于在React 16中捕获错误的问题。
目前，我们在为应用程序创建新版本时处理ChunkLoadErrors。所以我想实现一个错误边界来包装我们的整个应用程序。现在出现了几个问题：
看起来，这些错误并没有像try / catch语句那样被真正“捕获”。这意味着，如果出现错误，它仍然会被抛给浏览器，因此在开发模式下，应用程序实际上会中断，并且您看不到回退UI。这是否意味着像Sentry这样的服务仍然会收到关于这些错误的通知，即使它们得到了处理？
第二:将整个应用程序包装在一个错误边界中并过滤掉特定的错误，这是不是一种糟糕的做法？如果是这样，有没有更好的解决方案？我正在考虑在我的错误边界
浏览 0提问于2020-02-27得票数 0
我想构建一个在componentDidMount上异步加载数据的React组件。
这是该函数当前的样子(用TypeScript编写)：
async componentDidMount(): Promise<void> {
try {
const { props: { teamId }, state: { } } = this;
const awaitableData = await UrlHelper.getDataAsync("some-fancy-url");
// ... do something wi
浏览 0提问于2018-04-25得票数 9
1回答
我正在尝试用来自apollo客户端的onError方法来捕获我所有的graphQLErrors。我的目标是为我所有的API调用只有一个catch块。
const errorLink = onError(({ graphQLErrors, networkError ,operation}) => {
if (graphQLErrors && graphQLErrors?.length > 0) {
catchError((e) => handleError(e))
} else if (networkError) {
consol
浏览 4提问于2020-10-12得票数 1
我想给有redux错误的组件添加一个句柄处理，我如何才能添加这个组件，正常告警工作，但我想在组件中呈现错误，以避免错误发生时应用程序崩溃?？在这种情况下，我如何实现它?？ import React, { useState } from "react";
import { connect } from "react-redux";
import * as actions from "../actions";
import { Text, View, TextInput, Alert, TouchableOpacity } from "re
浏览 5提问于2020-07-15得票数 0
当用户点击图像视图时，我的应用程序会做一些事情，当用户的手指竖起时，它也会做一些事情，我的问题是，我如何检查用户的手指何时偏离图像视图，但仍在按屏幕，类似于flash中的MOUSE_OUT……到目前为止，我有：
myImageView.setOnTouchListener(new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction() & MotionEvent.ACTION_MA
浏览 3提问于2011-10-03得票数 1
回答已采纳
在我的Hello.jsx组件中，我调用一个可能会失败的API。这里有一个假API叫做loader
import React, { useEffect } from "react";
export const Hello = () => {
const loader = async () => {
return Promise.reject("API error.");
};
useEffect(() => {
const load = async () => {
await loader();
浏览 9提问于2021-06-08得票数 6
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
