我正在开发一个Laravel/Vuejs（3）应用程序。为了捕获错误，决定使用Sentry。问题是Sentry日志中的一些错误非常不友好，没有可用的堆栈跟踪来进行调试。此外，这些“不友好”错误仅在生产环境中显示。源Map上传正确。
当我试图将空的和不正确类型的必需属性传递给组件时，我试图在控制台中重现此类错误的示例（Sentry日志中也是如此）。
<search :test=“”…开发中（本地）env应用程序未崩溃，仅显示警告：
[Vue warn]: Template compilation error: v-bind is missing expression. 1386| :test=""
[Vue warn]: Missing required prop: "test"
at <Search…
[Vue warn]: Invalid prop: type check failed for prop "test". Expected Object, got String with value "".
at <Search所有堆栈跟踪都是可用的，并且直接指向代码中所需的行。
在生产环境中，应用程序崩溃：
Uncaught SyntaxError: 34 (at app.js?id=79c2a9c9566c92c78209124eb01cbfb4:2:150910)完全找不到组件名称。
我怀疑原因是Vue生产构建会为了更小的负载大小和更好的性能而丢弃大量代码，而且没有改变这一点的选项，对吗？
由于传递给属性的数据是动态的，并且在开发/生产环境中各不相同，因此不可能在发布之前测试所有内容，那么您如何科普调试此类难以跟踪的错误呢？
1条答案
按热度按时间7kqas0il1#
错误的有意义部分是
Missing required prop: "test" at <Search…。这意味着您有一个
<Search...组件，它声明了一个proptest，标记为{ required: true }。使用该组件时不提供test的值。通过将
prop标记为required，您实际上是在告诉Vue：* “如果在没有此属性值的情况下使用此组件，则会引发错误（例如：:test="/* allowed value */"）"*.如果您不希望出现这些错误，请从
prop中删除required: true（并提供一个default）。在生产环境中，应用程序崩溃：（...），无论如何都无法追踪到组件名称。
您要做的是在本地使用源Map进行构建（用于调试）。确切的语法将取决于您使用的是
@vue/cli还是vite，以及您是否使用TypeScript。构建完成后，使用
http-server提供dist文件夹。这就是单元测试的作用，它给予你确信你的代码在任何情况下都不会崩溃。
我认为它们并不难追踪，我只是用一个不完整的错误消息追踪了这个。
据我估计，Vue是错误信息最有帮助的框架之一。而且我在React和Angular方面有相当多的经验，可以进行比较。
您可能是Vue的新手，还不习惯查找相关部分。熟能生巧。