显示自定义错误的Bugsnag ErrorBoundary，然后显示默认浏览器覆盖
Bugsnag ErrorBoundary 是一个用于捕获和处理 JavaScript 错误的工具。它可以帮助开发人员在前端开发过程中更好地管理和调试错误，提高应用程序的稳定性和可靠性。
Bugsnag ErrorBoundary 的主要功能包括：
- 错误捕获和报告：Bugsnag ErrorBoundary 可以捕获 JavaScript 运行时错误，包括未捕获的异常、语法错误等，并生成相应的错误报告。这些报告包含了错误的详细信息，如错误堆栈追踪、错误发生的位置等，有助于开发人员快速定位和解决问题。
- 自定义错误显示：Bugsnag ErrorBoundary 允许开发人员自定义错误的显示方式。通过自定义错误显示，开发人员可以根据应用程序的需求，以更友好和直观的方式展示错误信息给用户，提高用户体验。
- 默认浏览器覆盖：Bugsnag ErrorBoundary 提供了默认的浏览器覆盖功能。当应用程序发生错误时，Bugsnag ErrorBoundary 可以在浏览器中显示一个覆盖层，以防止错误信息泄露给用户。这有助于保护用户隐私和应用程序的安全性。
Bugsnag ErrorBoundary 的应用场景包括但不限于：
- 前端应用程序开发：Bugsnag ErrorBoundary 可以用于前端应用程序开发过程中，帮助开发人员捕获和处理 JavaScript 错误，提高应用程序的稳定性和可靠性。
- 前端框架集成：Bugsnag ErrorBoundary 可以与各种前端框架（如React、Vue等）集成，提供更好的错误管理和调试功能。
- 线上错误监控：Bugsnag ErrorBoundary 可以与线上错误监控系统集成，实时监测应用程序的错误情况，并生成相应的报告。这有助于开发人员及时发现和解决问题，提高应用程序的可靠性和用户满意度。
腾讯云相关产品推荐：
腾讯云提供了一系列与云计算和前端开发相关的产品和服务，以下是一些推荐的产品和产品介绍链接地址：
- 云函数（Serverless）：腾讯云云函数是一种无服务器计算服务，可以帮助开发人员更轻松地构建和运行事件驱动的应用程序。了解更多：云函数产品介绍
- 云开发（CloudBase）：腾讯云云开发是一套面向前端开发者的全托管后端云服务，提供了云数据库、云存储、云函数等功能，帮助开发人员快速构建全栈应用。了解更多：云开发产品介绍
- 云监控（Cloud Monitor）：腾讯云云监控是一种全面的云资源监控服务，可以帮助开发人员实时监测应用程序的性能和健康状况。了解更多：云监控产品介绍
请注意，以上推荐的产品和服务仅代表了腾讯云在云计算领域的一部分解决方案，其他厂商的类似产品也可能存在。
相关·内容
我想包括Bugsnag，以报告未处理的错误，并提供足够的详细信息，以便尽快修复它们。 我想知道Bugsnag是否有可能定制ErrorBoundary，重定向或向用户显示一些不那么难看的东西？ 但是下面的代码提出了一个很大的难题，<ErrorView />在一秒钟后出现，如下面的屏幕截图所示： ? 然后被浏览器错误消息覆盖： ? import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App fro
浏览 20提问于2020-10-02得票数 0
回答已采纳
我正在使用React开发一个SPA。 目前，在生产环境中，当应用程序崩溃时，用户只能看到空白页面。 因此，我正在尝试设置一个自定义错误页面。 由于我在react应用程序中使用BugSnag进行错误监控，因此我使用了BugSnag提供的ErrorBoundary。 下面是初始化和放置ErrorBoundary的代码。 const bugsnagClient = bugsnag('8XXXXXXXXXXXXXXXbac')
bugsnagClient.use(bugsnagReact, React)
const ErrorBoundary = bugsnagClient.getP
浏览 14提问于2019-12-10得票数 1
我有这个 bugsnagClient.use(bugsnagReact, React)
const ErrorBoundary = bugsnagClient.getPlugin('react')
<ErrorBoundary FallbackComponent={ErrorFallbackComponent}>
<AppContainer />
</ErrorBoundary>
export const ErrorFallbackComponent = () => <div>An error has occ
浏览 30提问于2019-06-30得票数 1
我正在尝试运行我的第一个jest测试，但似乎我的react文件的设置方式有问题： app_test： it('renders without crashing', () => {
const app = shallow(<App />);
}); app.js class App extends Component {
componentWillMount() {
this.fetchUserAccountInfo();
}
render() {
return <MainRoutes auth={this.props.
浏览 35提问于2019-09-13得票数 9
我的React应用程序正在捕获错误并正确地显示我的自定义错误消息，但一秒钟后它仍然显示原始的错误记录。因此，回退UI将被初始错误屏幕所取代。
测试组件：
import React, { Component } from 'react';
export class Test extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<ErrorBoundary>
<
浏览 0提问于2018-08-30得票数 46
回答已采纳
使用"@bugsnag/browser": "7.5.6"
我已经将bugsnag配置为通过执行以下操作向自定义端点发送请求：
Bugsnag.start({
...
autoTrackSessions: false,
endpoints: {
notify: 'htts://custom-notify-url.example.com',
sessions: 'https://bugsnag-sessions.example.com',
},
onError: async function (
浏览 1提问于2021-01-16得票数 1
回答已采纳
在使用相关文档安装了Laravel和Bugsnag之后，我发现，例如，没有向Bugsnag报告NotFoundHttpException错误(但是notifyError是)。我的问题是如何设置它，以便报告所有错误，而不必反复使用这些行：
Bugsnag::notifyError('ErrorType', 'Something bad happened');
或
try {
// Some potentially crashy code
} catch (Exception $ex) {
Bugsnag::notifyException($ex);
浏览 7提问于2016-07-28得票数 4
我正在学习如何使用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
回答已采纳
当向bugsnag Enterprise发出标准的Bugsnag请求时，Chrome向我显示该请求已被服务器拒绝，状态为405响应。
Request Method:GET
Status Code:405 Method Not Allowed
下面是我的代码：
const script_tag = document.createElement('script');
script_tag.setAttribute('src', '//d2wy8f7a9ursnm.cloudfront.net/bugsnag-3.min.js');
document.
浏览 14提问于2017-08-09得票数 2
回答已采纳
当API服务器不可用时，我正在学习React，无法获得错误边界，无法捕获由axios http请求在子组件中引发的网络连接错误。
我可以看到，错误记录在子组件的catch处理程序中，但是ErrorBoundary组件没有捕获抛出语句。
有什么想法吗?如何获得错误边界，捕捉从componentDidMount生命周期方法抛出的错误？
父母- App.tsx
export class App extends React.Component<AppProps, {}> {
public render(): JSX.Element {
return (
<di
浏览 3提问于2019-10-07得票数 2
回答已采纳
3回答
出于测试的目的，我想“捕捉”我的应用程序中出现的任何错误，并将其显示在页面上(而不是在控制台)。为此，我在6框架中发现了ErrorBoundary组件。
首先，我在Bazor WebAssembly项目中成功地测试了这个组件。
步骤：
创建newBlazor WebAssembly项目
创建组件CustomErrorBoundary.razor (请参阅下面的代码)
在MainLayout.razor中，用组件CustomErrorBoundary包围@Body指令
在FetchData.razor中，在代码中抛出一个异常(参见下面)
CustomErrorBound
浏览 10提问于2021-12-02得票数 6
回答已采纳
我所做的
当出现异常时，我在App.brazor中使用App.brazor来显示自定义布局中的错误。
我使用以下代码。
App.razor
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
// use ErrorBoundary in App.razor
<ErrorBoundary>
<ChildContent>
...
浏览 5提问于2022-07-17得票数 0
我有一个应用程序，我想在其中实现reacts错误边界：
import React, { Component } from 'react'
import ErrorView from './components/ErrorView'
class ErrorBoundary extends Component {
state = {
hasError: false,
}
static getDerivedStateFromError(error: any) {
// Update state so the next render wi
浏览 0提问于2019-09-11得票数 3
回答已采纳
我正在遵循reactjs.org上的教程，并练习使用错误边界来捕获错误。我已经编写了自己的代码，类似于本教程的代码，但我发现边界不会重新呈现回退UI。我使用的是React的16.8.6版本。下面是我的代码：
ErrorBoundary.js：
import React from 'react'
export const ErrorContext = React.createContext({
error: null,
errorInfo: null,
clickCount: 0,
increment : () =>{},
})
export d
浏览 29提问于2019-07-26得票数 1
我在我的React应用程序中使用ErrorBoundary，并希望在出现错误时重定向到主页-但我的重定向不起作用。相反，应用程序停留在同一页上。 相比之下，添加按钮允许用户在单击按钮时切换页面。 但我希望在发生错误时自动将用户带到那里。 当然，肯定有一种简单的方法可以做到这一点，我错过了。 import React from 'react';
import { Redirect } from 'react-router-dom';
class ErrorBoundary extends React.Component {
constructor(prop
浏览 19提问于2020-07-24得票数 2
回答已采纳
我在我的代码中使用了错误边界，当我在渲染主要布局组件的文件中使用它时，它是有效的，例如： <ErrorBoundary>
<header></header>
</ErrorBoundary>
<ErrorBoundary>
<main/> //this component has an error
</ErrorBoundary>
<ErrorBoundary>
<footer></footer>
</ErrorBoundary> 上面的代码可以正常工作，并针对
浏览 38提问于2021-07-03得票数 1
回答已采纳
我想通过属性notifyReleaseStage将错误发送到我创建的阶段
const app = express();
const bugsnag = require('@bugsnag/js');
const bugsnagClient = bugsnag({
apiKey: process.env.bugsnag_api_key,
onUnhandledRejection: function (err) {
log("Unhandled Rejection >>>
浏览 0提问于2019-09-12得票数 2
回答已采纳
我正在考虑为特定的用例在ReactJS中执行嵌套错误边界：
在子组件中显示错误视图
若要在父组件中显示错误对话框，请执行以下操作
<ErrorBoundary1>
<ErrorBoundary2><child1 /></ErrorBoundary2>
<ErrorBoundary2><child2 /></ErrorBoundary2>
</ErrorBoundary1>
我已经尝试过这样做了，但是当发生错误时，似乎没有传递父错误边界。
浏览 1提问于2018-07-17得票数 7
我使用React 16和Error Boundary功能: Profile.js
class Profile extends Component {
constructor(props) {
super(props);
this.state = {
// user: {
// name: "Ha (Huck) H.K. NGUYEN"
// }
user: null
};
this.updateUser = this.updateUser.bind(this);
}
upd
浏览 0提问于2018-07-23得票数 3
回答已采纳
1回答
当使用反应边界并抛出一个手动错误时，错误边界起作用了！问题是，在1-2秒之后，它会呈现错误，就好像没有错误边界一样
这是代码
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI
浏览 15提问于2020-11-13得票数 1
2回答
我不断收到404个错误，因为人们在我的网站内容上发布了糟糕的链接。我意识到BugSnag没有告诉我这件事，那么我如何配置BugSnag来报告404错误或在我的rails应用程序中抛出404错误呢？另外，希望404个html页面不受Bugsnag干扰地呈现。
浏览 8提问于2015-06-13得票数 2
在我的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
回答已采纳
我试图弄清楚，如果我在路由/results的另一个页面中出现错误，如何直接转到我的主页/。我可以使用组件中的ErrorBoundary重定向到我的主页，但是路由没有改变，并且立即恢复到相同的错误。(我基本上是想在出现错误时显示主页) 我尝试在ErrorBoundary组件中使用react-router-dom和render函数，如下所示： render() {
if (this.state.hasError) {
return (
<Router>
<Switch>
&
浏览 25提问于2021-01-28得票数 0
我有以下几点： <ErrorBoundary>
<NavBar />
</ErrorBoundary>
<ErrorBoundary>
<Switch>
<Route exact path="/" component={mainPage} />
<Route exact path="/" component={buyerPage} />
<Route exact path="
浏览 96提问于2020-07-25得票数 0
代码链接到下面，使用react-router和一个错误边界来捕获每个路由中的错误。
如果您单击"Shop"，则会按预期捕获错误，但其他链接将不再工作。这里发生了什么事？为什么react-router-dom似乎停止工作？做这件事的“正确”方法是什么？是<ErrorBoundary>组件的问题，还是路由组件包装的方式问题？
如果代码链接发生了什么情况：
const { BrowserRouter, Switch, Route, NavLink } = ReactRouterDOM;
class ErrorBoundary extends React.Compon
浏览 1提问于2020-02-12得票数 4
回答已采纳
错误:HostFunction中的异常: java.lang.IllegalStateException:未能初始化原生Bugsnag客户端，请检查您在应用程序子类的onCreate()方法中添加了Bugsnag.start()
浏览 8提问于2022-05-20得票数 0
我正在开发的应用程序使用错误边界，这对我来说是个新手。我们还使用了React Router，我想用它在一些特定错误的情况下重定向到主页(而不是直接跳到错误边界)。
例如，如果datasetId不存在，我希望重定向到仪表板组件，但这种情况总是直接导致错误边界被挂载。我不确定如何“覆盖”它，或者在错误边界发生之前捕获错误并进行重定向。
这里有一些相关的代码来说明这个例子：
路由：
const Dataset = () => {
return (
<Switch>
<Route
name="data-snapshot"
浏览 47提问于2019-11-26得票数 0
回答已采纳
我不太确定，我是否完全理解了React ErrorBoundary的概念。我需要说的是，我实际上想开始使用ErrorBoundary，但我是第一次使用它。 所以我创建了一个ErrorBoundary组件： import React, { Component } from "react";
import * as Data from '../../backend/data';
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
浏览 27提问于2021-07-02得票数 2
回答已采纳
我继承了一个React应用程序(它是使用版本Reactive17.0.2的自定义react应用程序，而不是基于CRA的)，当出现错误时，整个屏幕都会显示错误，如下所示。有办法阻止这件事吗？我尝试过添加一个ErrorBoundary，但是当它们看起来被执行时，错误仍然会显示出来。
浏览 1提问于2022-08-17得票数 0
最干净的方式是将react管理的所有屏幕包装在一个也可以导航的错误边界中。我目前的方法涉及到一个顶级组件，比如：
class App extends Component{
navigateTo(routeName) {
this.navigator && this.navigator.dispatch(NavigationActions.navigate({ routeName }));
}
render(){
return (
<Provider store={store}>
<PersistGate
浏览 1提问于2018-10-11得票数 8
我在学习反应打字稿。我使用的反应谷歌地图显示我的地区。我成功地展示了这张地图。当我试图使用标记从反应-谷歌地图指出我的地区和定位我的纬度和经度。我收到打字错误：Property 'position' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<GoogleMapReact> & Readonly<Props> & Readonly<...>。我真的不知道怎么解决它。
import React, { useEffec
浏览 0提问于2020-05-08得票数 2
回答已采纳
我正在尝试处理我的React应用程序中的一些错误，但一定有什么东西让我逃脱了，因为我似乎无法让它工作。下面是我的代码：
App.js
import ErrorBoundary from "./Error";
import ChildComponent from "./ChildComponent";
function App() {
return (
<ErrorBoundary>
<ChildComponent />
</ErrorBoundary>
);
}
export defau
浏览 0提问于2020-11-24得票数 0
1回答
我试图为一个简单的application.When添加错误边界--我点击了一个按钮“出了问题”应该显示在screen.But中--在我的例子中，它不像screen.But那样显示，我理解ErrorBoundary.js不工作，因为我尝试了控制台日志it.When，我在屏幕上运行了这个应用程序，它显示错误:不正确的点击
App.js
import './App.css';
import Button from './Components/Button';
import ErrorBoundary from './Components/ErrorBounda
浏览 2提问于2020-11-09得票数 0
我正在尝试将BugSnag与通过Laravel Vapor部署在AWS Lambda上的Laravel应用程序集成。 Bugsnag在我的本地上工作得很好，但没有从AWS Lamda发送任何错误。 我也尝试过Bugsnag::setBatchSending(false)，但它仍然不适用于我。 有什么想法可能是错的吗？
浏览 22提问于2019-12-31得票数 1
回答已采纳
在调用(Illuminate\Support\Facades\)Log::error时，我只能看到Bugsnag上的消息，而不能看到上下文信息。我是否可以设置Laravel/Bugsnag来传递上下文？
例如，当执行Log::error("Exception occurred.", ["Further info here."]);时，只有消息(“异常发生了”)。显示在Bugsnag上。
浏览 1提问于2018-06-01得票数 4
回答已采纳
我有一个页面，它使用不同的组件，这是使用反应路由器加载。当我使用react路由器路由到不同的页面时，是否可以将错误边界集成到每个组件中，如下面的代码所示？
我的目标是显示错误，特别是单个组件的错误，以便在一个组件出现错误的情况下其他组件可以正常工作。
下面是我的代码：
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './regi
浏览 0提问于2018-03-06得票数 17
回答已采纳
1回答
我创建了一个错误边界，将应用程序重定向到/error路由。但是，有时当触发错误时(在代码框中，单击bug页面的链接)，将调用我的错误边界，并将浏览器重定向到/error路由，但是应该显示在/error上的组件不会显示/呈现，而是只看到一个白色屏幕。什么是错误，为什么错误边界被调用，使它重定向浏览器，但呈现不完成？谢谢!
index.js:
import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
impo
浏览 1提问于2020-06-24得票数 1
回答已采纳
我有一个标准的rails 4应用程序部署在heroku上。
我是想给它添点小麻烦。
第一：
我在Bugsnag ()中创建了一个新项目，
选择rails，
rails generate bugsnag <API_KEY_FROM_BUGSNAG_UI>
Gemfile
gem 'bugsnag'
config/initializers/bugsnag.rb
Bugsnag.configure do |config|
config.api_key = '<API_KEY_FROM_BUGSNAG_UI>'
end
l
浏览 3提问于2016-06-27得票数 2
我在努力让我的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
在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边界(v6)，但似乎需要用一个错误边界包装每个路由元素，如下所示
import { ErrorBoundary } from "react-error-boundary";
export const AppRoutes = createBrowserRouter([
{
path: "/",
element: <ErrorBoundary FallbackComponent={GlobalError}><Login /></ErrorBoundary>
},
{
path: "
浏览 16提问于2022-10-10得票数 1
我不确定为什么会出现这个错误，因为如果将错误传递给bugsnag控制台，显然会定义bugsnag： ? 这是我的file文件： import { Client } from 'bugsnag-react-native';
import Config from 'react-native-config'
export const bugsnag = new Client(Config.BUGSNAG_KEY); config具有正确的API密钥 下面是我的错误文件： import bugsnag from './bugsnag'
浏览 14提问于2019-05-30得票数 0
我们在服务器中运行多个cron任务，并使用rails运行程序启动它们，如下所示：
rails runner 'MyTask.run'
其中MyTask是项目中的一个类。问题是，我们使用来处理错误，以防任何事情失败。当我们运行一个rake任务，Bugsnag保存错误并在他们的网站上列出它们。但是在使用rails runner时不会发生这种情况。当这种情况发生时，我如何配置rails将错误发送到Bugsnag？
浏览 13提问于2014-01-05得票数 3
回答已采纳
React只是显示一个空屏幕，而不是在我的导师系统中显示一个类似这样的错误：
我怎么才能解决这个问题？
编辑:我肯定可以在控制台和IDE中看到错误，但是为了测试错误边界，我想修复这个错误。目前，当我使用错误边界并使用抛出新错误()创建自己的错误时，错误边界只会console.logs错误，但不显示UI，我的屏幕只会被冻结。
关于使用错误边界: App.js：
import UserFinder from './components/UserFinder';
import UsersContext from './store/user-context
浏览 7提问于2022-01-14得票数 0
回答已采纳
我刚刚实现了Sentry.ErrorBoundary组件，我想知道是否可以测试它的呈现。例如：
<Sentry.ErrorBoundary>
<FailComponent />
</Sentry.ErrorBoundary>
或
<Sentry.ErrorBoundary>
<SuccessComponent />
</Sentry.ErrorBoundary>
浏览 13提问于2022-05-19得票数 0
我有一个，有时它只显示白色的屏幕，而不是呈现组件。没有错误或异常，它就像空DOM一样。
这个错误出现在Android和iOS上，当它发生时，我无法捕捉到任何模式。BugSnag或者Crashlytics能给我提供更多的信息吗？是否有任何方法将白屏幕视为这些服务中的错误？
浏览 0提问于2018-09-07得票数 2
回答已采纳
1回答
我试图实现一个ErrorBoundary HoC组件，以便按照进行错误处理。我将ErrorBoundary组件设置为PureComponent，并且我注意到子道具总是相等的，并且它试图阻止子组件的重新呈现。
class ErrorBoundary extends React.PureComponent {
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(error, info) {
this.setState({ hasError: tru
浏览 0提问于2019-02-18得票数 0
5回答
当反应16代码基中抛出一个错误时，它会被我们的顶级错误边界捕获。当这种情况发生时，ErrorBoundary组件愉快地呈现一个错误页面。
ErrorBoundary的位置
return (
<Provider store={configureStore()}>
<ErrorBoundary>
<Router history={browserHistory}>{routes}</Router>
</ErrorBoundary>
</Provider>
浏览 12提问于2018-01-05得票数 28
回答已采纳
2回答
新的React，但不是测试应用程序。
我希望确保每次组件抛出错误时都会显示ErrorBoundary消息。如果你不知道我说的ErrorBoundary是什么意思，这里是一个。
我使用 + + 。
假设我们需要使用以下测试配置测试。
测试配置
// DOM
import jsdom from 'jsdom';
const {JSDOM} = jsdom;
const {document} = (new JSDOM('<!doctype html><html><body></body></html>'))
浏览 0提问于2018-03-11得票数 9
我有一个像这样构造的组件，我的ErrorBoundary封装了我的Suspense元素。
function App() {
return (
<ErrorBoundary fallback={<h2>Could not fetch cities.</h2>}>
<Suspense fallback={<div>Loading..</div>}>
<MyList />
</Suspense>
</ErrorBoundary>
浏览 18提问于2022-01-10得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
