通过 100 多个技巧的集合学习 Nuxt!

bugsnag
nuxt-bugsnag

用于 nuxt.js 的 Bugsnag 集成。使其易于将 Bugsnag 添加到您的项目中。支持上传源代码映射。

nuxt-bugsnag

npm versionnpm downloadsCodecovLicense

📖 发行说明

Playground

打开 Stackblitz 并尝试一下

性能目前已禁用!

https://github.com/JulianMar/nuxt-bugsnag/issues/80

设置

  1. nuxt-bugsnag 依赖项添加到您的项目中
npx nuxi@latest module add bugsnag
  1. nuxt-bugsnag 添加到 nuxt.config.jsmodules 部分。
{
  modules: [
    'nuxt-bugsnag'
  ]
}

您可以在配置对象中传递所有 bugsnag 选项

{
  bugsnag: {
    config: {
      apiKey: 'your key',
      enabledReleaseStages: ['staging', 'production'],
    }
  }
}

源代码映射

您可以通过添加 publishRelease 选项来上传源代码映射。设置 baseUrl 也很重要,它将允许 bugsnag 将您的错误映射到源代码映射

{
  bugsnag: {
    publishRelease: true,
    baseUrl: 'https://127.0.0.1:3000'
  }
}

中型 Nuxt 应用程序的输出可能会很大。因此,我们添加了一个选项来禁用这种情况的日志。

{
  bugsnag: {
    publishRelease: true,
    disableLog: true,
    baseUrl: 'https://127.0.0.1:3000'
  }
}

设置不同的项目根目录

如果您的 Nuxt 应用程序在与 / 不同的文件夹中运行,您可能需要将 projectRoot 设置为此目录,以便 BugSnag 可以匹配源代码映射。

{
  bugsnag: {
    publishRelease: true,
    projectRoot: '/someFolder/'
  }
}

配置示例

我建议设置这些选项

{
  modules: [
    'nuxt-bugsnag',
  ],

  bugsnag: {
    publishRelease: true,
    config: {
      apiKey: 'YOUR_API_KEY',
      enabledReleaseStages: ['staging', 'production'],
      releaseStage: process.env.NODE_ENV,
      appVersion: 'YOUR_VERSION',
    }
  }
}

报告自定义错误

最简单的答案是这样的。

this.$bugsnag.notify(new Error('Some Error'))

如果您喜欢组合方法,您可以这样做

useBugsnag().notify('Some Error')

性能

仅在 7.4.0 及更高版本中可用

bugsnag 性能功能的最简单配置如下

{
  bugsnag: {
    apiKey: 'YOUR API KEY',
    performance: true
  }
}

对于自定义选项,您可以使用以下配置并从此处获取所有设置

{
  bugsnag: {
    apiKey
    config: {
      performanceConfig: {
        autoInstrumentFullPageLoads: true,
      }
    }
  }
}

自定义性能监控

有关发送自定义 Spans,请参阅文档。模块中有一个小的助手来发送自定义跨度。

这只能在客户端使用,绝不能在服务器端调用。其中包含一个模拟,因此您无需担心,但应牢记。

useBugsnagPerformance().startSpan('my-span')

开发

  1. 克隆此存储库
  2. 使用 npm install 安装依赖项
  3. 使用 npm run dev 启动开发服务器

许可证

MIT 许可证

版权所有 (c) Julian Martin [email protected]