我应该如何处理 Laravel 应用程序中 Vue 组件中的严重错误？

Question

[澄清]

我正在使用 Vue 组件编写我的第一个 Laravel 应用程序；这是一个 CRUD。我知道如何通过Log::error("There is an error") 技术向 laravel.log 报告重大问题，但这仅在我使用 PHP 代码时有用；据我所知，没有办法从 Vue 组件中写入 laravel.log。 （如果我错了，请纠正我！）

这引发了一个问题，即我应该如何在 Laravel 应用程序的 Vue 组件中报告错误。我知道console.log()、Debugger for Chrome 和Devtools，这些都适合开发。但是生产中可能发生的错误呢？显然，需要通过通知用户并让用户更正他们的输入来处理用户错误，例如表单上的错误输入，但有些错误超出了用户的范围。例如，不难想象我的 Vue 组件由于某种原因而无法访问数据库。这种问题不应该写到日志中，以便监控生产应用程序的人可以处理它吗？

专业的应用程序将如何处理这种情况？

我最初的想法是尽可能将其写入 laravel.log，但这可能是不可能的，或者被认为是一种不好的方法。我很想知道有经验的 Laravel 开发人员在这种情况下会做什么。也许自动向支持人员发送文本会是一种更好的方法。我真的不确定这应该如何以现代专业的方式处理。

在任何情况下，都需要以某种方式告知对用户无法控制的情况负责的人，以便他们可以开始解决问题所必需的步骤。此外，需要向此人提供足够的细节，说明发生了什么才能解决问题。我希望这将包括堆栈跟踪、错误代码等内容。我不想将所有这些作为文本流发送，我希望它们都可以在某种日志中访问。然后，您只需通知支持人员在某某时间发生了某某严重程度的问题，并提醒他们在哪里可以找到详细信息。

虽然我的方法可能已经过时，但可能存在更新、更好的替代方案。这些就是我正在寻找的问题。

Answer 1

我可以为您的问题提供一个通用的答案。

React 引入了ErrorBoundary 的概念，

错误边界是 React 组件，它们在其子组件树的任何位置捕获 JavaScript 错误，记录这些错误，并显示一个备用 UI 而不是崩溃的组件树。

在 Vue 中使用错误边界

使用vue-error-boundary

这个handleError方法的简单代码展示了ErrorBoundary通过on-error prop接收回调函数。

<template>
  <ErrorBoundary :on-error="handleError">...</ErrorBoundary>
<template>
 
<script>
// ...
methods: {
  handleError (err, vm, info) {
    // do something
  }
}
// ...
</script> 

阅读docs 了解更多关于 npm 模块的信息。

---

在处理错误时，您可以将错误传递到您的生产站点的链接。
例如。 /logging 所以它就像https://www.example.com/logging，并以日期：错误文件：错误消息等格式发布错误。
您甚至可以在此链接上使用身份验证令牌（尽管没有人会使用它，因为它会是前端错误，每个人都可以在控制台上看到它）。 然后使用路由将这些错误记录到 laravel 日志中。