在 Laravel 中使用 Honeybadger 跟踪 Vue 错误

我觉得 Vue 和 Laravel 几乎是天生一对，我一直使用 Vue 很长时间了。我非常高兴 Honeybadger 最近发布了 Vue.js 的官方集成。让我们一起完成设置，这样如果您的 Vue 应用程序出现问题，就可以解决它！

#设置 Vue 错误报告

#安装 Honeybadger Vue 包

# npm
npm add @honeybadger-io/vue --save
 
# yarn
yarn add @honeybadger-io/vue

#配置 Honeybadger

要进行设置，请转到 assets/js/app.js 并导入 Honeybadger 的 Vue 库。

import HoneybadgerVue from '@honeybadger-io/vue'

接下来，我们需要将其添加到 Vue 中。

Vue.use(HoneybadgerVue, {
    apiKey: process.env.MIX_HONEYBADGER_API_KEY,
    environment: process.env.MIX_HONEYBADGER_ENVIRONMENT,
    revision: 'master'
});

我相信您已经注意到对本地环境变量的所有引用。Laravel Mix 将传递以 MIX_ 为前缀的环境变量。这有助于我们使集成非常顺利。因此，我们需要更新 .env 文件。Laravel Mix 文档

如果您使用的是 honeybadger-io/honeybadger-laravel，您需要为 Vue 应用程序设置一个新项目。

MIX_HONEYBADGER_API_KEY="GCDWEMt9vhhpDsUT"
MIX_HONEYBADGER_ENVIRONMENT="${APP_ENV}"

现在，所有未处理的异常都将报告给 Honeybadger。查看官方的 Vue 集成指南，了解更详细的说明和文档。

#不要忘记源代码映射！

获取前端错误的良好堆栈跟踪可能很棘手。一个好的堆栈跟踪指向 Vue 项目中发生错误的原始源文件中的行号。

不幸的是，现代构建过程有多个阶段，其中您的原始源代码会被分割、优化和压缩，以从中获得最佳性能。这对性能来说很好，但对调试（即错误报告）来说很糟糕。源代码映射是答案。

Honeybadger 提供了一个非常酷的 Webpack 插件，它会将您的源代码映射推送到 Honeybadger，使跟踪错误变得轻而易举。

#安装 Honeybadger Webpack 包

# npm
npm add @honeybadger-io/webpack --save-dev
 
# yarn
yarn add @honeybadger-io/webpack

#将插件添加到您的 Webpack 配置中

在 webpack.mix.js 中，我们将从导入源代码映射库开始。

const HoneybadgerSourceMapPlugin = require('@honeybadger-io/webpack')

接下来，我们需要为 Laravel Mix 启用源代码映射。

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .sourceMaps()

我们还必须扩展 Laravel Mix 的 Webpack 配置以使用 Honeybadger 源代码映射插件。

mix.webpackConfig({
    plugins: [new HoneybadgerSourceMapPlugin({
    apiKey: process.env.MIX_HONEYBADGER_API_KEY,
    assetsUrl: process.env.MIX_HONEYBADGER_ASSET_URL,
    revision: 'master'
  })]
})

我们添加了一个新的变量 MIX_HONEYBADGER_ASSET_URL，所以让我们更新 .env 文件。

MIX_HONEYBADGER_ASSET_URL=https://cdn.example.com/assets

每次使用 npm run prod 或 yarn prod 构建项目时，源代码映射都会上传到 Honeybadger。查看 Honeybadger Webpack 插件，了解其他文档。

#为您的项目版本控制

请注意，在上面的示例中，我们在 Vue 和 Webpack 配置中都设置了 revision: 'master' 选项。在 Honeybadger 中，revision 是您项目的唯一版本；它用于将正确的源代码映射与正确的错误匹配。虽然 master 实际上适用于您的第一次构建，但您需要想出一种更好的方法来对 Honeybadger 中的项目进行版本控制 - 每次构建都应该是唯一的。

就我个人而言，我更喜欢 Git 提交 SHA，因为它们在当前构建中始终是唯一的。根据 Stack Overflow，这里有一个快速的方法来获取您项目的当前提交 SHA。

在您的 webpack.mix.js 中，让我们添加以下环境变量。

process.env.MIX_HONEYBADGER_REVISION = require('child_process')
  .execSync('git rev-parse HEAD')
  .toString().trim()

现在我们可以更新 Webpack 配置以使用新的变量。

mix.webpackConfig({
    plugins: [new HoneybadgerSourceMapPlugin({
    apiKey: process.env.MIX_HONEYBADGER_API_KEY,
    assetsUrl: process.env.MIX_HONEYBADGER_ASSET_URL,
    revision: process.env.MIX_HONEYBADGER_REVISION
  })]
})

我们还可以返回并更新 Vue 集成以使用这个新的修订版本变量。

Vue.use(HoneybadgerVue, {
    ...
    revision: process.env.MIX_HONEYBADGER_REVISION
    ...
})

#总结

我很高兴看到 Honeybadger 对 Vue 的官方支持。他们的使命是让 Honeybadger 成为监控您的生产 Vue 应用程序的最佳方式。要充分发挥 Honeybadger 的威力，请使用它来监控 Laravel、Vue、计划任务和外部正常运行时间。

成为您团队中的 Honeybadger - 开始您的 15 天免费试用

---

非常感谢 Honeybadger 对 Laravel 新闻的支持