时间戳

首页 > 解决方案 > 如何将 Vue.js 集成添加到已初始化的 Sentry.io 设置中？

javascript - 如何将 Vue.js 集成添加到已初始化的 Sentry.io 设置中？

问题描述

我有一个包含一些 Vue.js 的 Web 应用程序，以及一些不使用 webpack 或 Vue 的旧应用程序（例如，jQuery 等）。有时遗留代码和 Vue 都在起作用。

在我们的主布局中，我们通过其 CDN 文件（当前版本 5.29.2）添加 Sentry，并使用以下命令初始化 Sentry：

Sentry.init({
  dsn: 'https://abcde@abcde.ingest.sentry.io/12345',
  environment: 'development',
  autoSessionTracking: true
});

这正确地捕获了抛出的错误。

对于我们的 Vue 代码，我们很乐意利用 Sentry 的Vue 集成。我们的一些 Vue 应用程序与遗留代码并排呈现，有些是独立的。在前一种情况下，遗留代码将在初始化 Vue 应用程序之前使用上述代码初始化 Sentry。我在 Vue 插件的上下文中使用以下代码（受此sentry issue启发）来设置 Vue 与 Sentry 的集成：

import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';

export default {
  install(Vue) {
    const sentryClientOptions = {
      dsn: 'https://abcde@abcde.ingest.sentry.io/12345',
      environment: 'development', 
      autoSessionTracking: true,
      logErrors: !devMode, // delegate to original Vue logError
      integrations: integrations => [
        ...integrations,
        new Integrations.Vue({ Vue })
      ]
    }

    if (!Sentry.getCurrentHub().getClient()) {
      // No sentry at all--let's initialize
      Sentry.init(sentryClientOptions);
    } else {
      // Sentry is already loaded, but not with the Vue integration, so lets set that up
      const client = new Sentry.BrowserClient(sentryClientOptions);
      client.setupIntegrations();
      Sentry.getCurrentHub().bindClient(client);
    }
  }
};

如果没有先前Sentry的初始化，这将捕获所有抛出的错误。

但是，如果先前Sentry已初始化，则仅捕获Vue 中抛出的错误。遗留代码中的错误在控制台中显示为Uncaught Error，但不会发送到 Sentry。

如何在运行时设置 Vue 集成并仍然处理所有抛出的错误，无论是在 Vue 内部还是外部。

标签： javascriptvue.jserror-handlingvuejs2sentry

解决方案

推荐阅读