如何让反应电子忽略未定义的错误？答案

【问题标题】：How to let react electron ignore undefined error?如何让反应电子忽略未定义的错误？
【发布时间】：2019-04-18 02:48:40
【问题描述】：

在windows上React electron，如果A为null，调用A.test会使应用程序停止工作，那么用户必须关闭应用程序并重新启动它。如何让react 忽略错误，继续工作。代码有很多A.test，我不能到处写if(A) A.test。如果这无法解决，我可以在 Web 视图上打印错误吗？这样我就不用远程访问用户的电脑来查看控制台错误了。

【问题讨论】：

Electon 只是节点上的后端服务器应用程序和前端基于 chrome 的引擎。不要等待浏览器忽略错误。只需检查if (something.MemberList) { then do operation } 即可编写干净、良好的代码您必须处理可能的情况以避免错误中断代码执行。
用trycatch包装代码
@num8er 不，您的代码也会停止软件，if(something&&Object.keys(something).includes('MemberList')){ 是对的！我有太多这样的代码了。
@Oram 我用的是ErrorBoundary，但是不能像A.test is undefined这样打印错误代码
也许你想要这个？ stackoverflow.com/questions/39249886/…

标签： javascript reactjs electron

【解决方案1】：

注意

我认为解决方案是按照控制台中的建议使用react error boundaries。

您已经指出您正在使用错误边界，因此在测试您的场景in this fiddle 之后，我相信您的实现可能不正确。

鉴于文档中 ErrorBoundary 的类似实现：

class ErrorBoundary extends React.Component {
  state = { hasError: '' };
  render() {
    return this.state.hasError ? (
      <span>Oops! Something went wrong:<br />{this.state.hasError}</span>
    ) : this.props.children;
  }
}
ErrorBoundary.getDerivedStateFromError = (error) => ({ hasError: error.toString() });

该组件将在其任何子中断时呈现回退。

错误边界是 React 组件，可在其子组件树中的任何位置捕获 JavaScript 错误，记录这些错误并显示回退 UI

它看起来类似于：

<MyReactApp>
  <ErrorBoundary>
    <ChatContent />
  </ErrorBoundary>
</MyReactApp>

现在ChatContent 中的任何错误都将被ErrorBoundary 捕获，让您有机会呈现如下后备：

Oops! Something went wrong:
ReferenceError: test is not defined

【讨论】：

【解决方案2】：

代码有很多A.test，我不可能每处都写 if(A) A.test

但是为什么呢？您可以使用some editor 进行多文件编辑。所以你可以把A.test()替换成safeTest(A)函数。

export const safeTest = (Obj) => {
 if (Obj) {
  Obj.test();
 } else {
  // Any action you want
 }
}

【讨论】：

如果您查看有关问题的 cmets，它也会参考这种情况：map((value,key) => <option value={key} key={key}>{vadlue}</option> )，这与安全代码相反。用户可能正在从事由第三方编写的代码质量不可靠的项目。
第三方代码 - 可能。但我什么也没看到。我真正读到的是The code has many A.test, I can't write every where if(A) A.test

【解决方案3】：

很难回答您的问题，因为我没有看到您的项目代码，但如果您的反应版本是 16，您可以使用名称为 componentDidCatch 的特殊组件生命周期方法。

在此方法中，您将拥有以下值：

componentDidCatch(error, info) {
  // Do something with error and info
}

即使你可以在这个方法中使用setState 并显示你想要的。我认为这种方法可以帮助您实现第二个愿望，即在 Web 视图中打印 error。

【讨论】：

【解决方案4】：

我倾向于使用default props。如果 prop 传入未定义，您可以为组件设置一个值以分配给 prop。例如，如果您的组件依赖于嵌套在对象中的数组，则默认情况下可以将该值设置为空数组。当您的组件依赖于 API 调用的结果数组但组件在请求完成之前呈现时，这尤其方便。

【讨论】：

【解决方案5】：

如果您想尽最大努力从 Electron 中的主进程和渲染器进程中捕获所有未处理的错误，并通过对话框向用户显示它们 ，最简单的方法是使用electron-unhandled，它就是这样做的：

安装它 (npm i electron-unhandled) 后，在您的主入口文件和渲染器入口文件（可能是它们的根目录 index.js）中，您只需在开头添加：

const unhandled = require('electron-unhandled');

unhandled({ showDialog: true });

现在，话虽如此，使用全局错误捕获器是一种很好的做法，但如果只使用它，那将是一个非常糟糕的做法。您应该尝试更准确地涵盖您的错误处理，至少是逐个方法：

.then() { ... }.catch(err => ...) 你的承诺，
(..., (err, res) => { if (err !== null) { ... } ... ) 回电，
try { ... } catch(err) { ... } 用于非异步或基于 await 的代码代码部分。

另外，我自己创建了一个dependenciless library，以便安全且轻松地创建一个全局错误字典，以便组织好您的错误，但是如果这个没有，还有其他选择不符合您的需求。

【讨论】：

【解决方案6】：

我想最好的解决方案是在try 和catch 中包围你的A.test。在这种情况下，您可以做的是 catch 错误是 A 是 null 并从您身边执行一些错误页面以防万一您想要它，或者只是保持错误静音以防您不想执行任何操作并抑制出错并继续执行。

您还可以将A.test 包装在带有try-catch 的函数中，并使用该函数代替A.test。这样您就可以避免多个try-catch 块，您可以在此处根据您的要求处理错误。

【讨论】：