이미 초기화된 Sentry.io 설정에 Vue.js 통합을 추가하려면 어떻게 해야 합니까?

이미 초기화된 Sentry.io 설정에 Vue.js 통합을 추가하려면 어떻게 해야 합니까?

일부 Vue.js와 웹 팩 또는 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 문제에서 영감을 얻어)를 사용하여 나중에 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 ErrorSentry로 전송되지 않습니다.

실행 시 Vue 통합을 설정하고 Vue 내에서 발생하는 모든 오류를 처리할 수 있는 방법은 무엇입니까?

언급URL : https://stackoverflow.com/questions/65624169/how-do-i-add-vue-js-integration-to-an-already-initialized-sentry-io-setup