이 블로그는 Sentry 자체 호스팅series의 5번째 게시물입니다. 이 기사에서는 성능 및 오류를 추적하고 모니터링하기 위해 Sentry로 프로젝트를 생성하는 프로세스를 살펴보겠습니다. 이 게시물은 Sentry를 설정하기 위해 시리즈의 이전 게시물을 이미 검토했다고 가정합니다.

프로젝트 생성

가장 먼저 해야 할 일은 센트리에서 프로젝트를 생성하는 것입니다. 이렇게 하려면 Sentry 자체 호스팅 도메인으로 이동하고 사이드 메뉴에서 프로젝트를 클릭합니다. ![2022-03-17 at 2.40.42 PM.png]( https://cdn.hashnode.com/res/hashnode/image/upload/v1647520846126/-

그런 다음 오른쪽 상단에 있는 버튼을 사용하여 프로젝트를 만듭니다.

플랫폼 목록에서 필요한 SDK를 선택합니다.



프로젝트 이름을 추가하고 팀을 선택합니다(새 팀을 생성할 수도 있음).

프로젝트 생성을 클릭합니다.

만든 후에는 설정 방법에 대한 자습서가 있는 설정 페이지로 리디렉션됩니다. 지시 사항을 따르면 잘 갈 수 있습니다.

Vue.js를 예로 설정하겠습니다. 다른 것들도 비슷해야 합니다(단, 플랫폼에 따라 다름).

Vue 구성 예

종속성 설치

# Using yarn
yarn add @sentry/vue @sentry/tracing

# Using npm
npm install --save @sentry/vue @sentry/tracing

구성

Vue 2의 경우

import Vue from "vue";
import Router from "vue-router";
import * as Sentry from "@sentry/vue";
import { BrowserTracing } from "@sentry/tracing";

Vue.use(Router);

const router = new Router({
  // ...
});

Sentry.init({
  Vue,
  dsn: "dsn_to_your_instance",
  integrations: [
    new BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
    }),
  ],
  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
});

// ...

new Vue({
  router,
  render: h => h(App),
}).$mount("#app");

Vue 3의 경우

import { createApp } from "vue";
import { createRouter } from "vue-router";
import * as Sentry from "@sentry/vue";
import { BrowserTracing } from "@sentry/tracing";

const app = createApp({
  // ...
});
const router = createRouter({
  // ...
});

Sentry.init({
  app,
  dsn: "dsn_to_your_instance",
  integrations: [
    new BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
    }),
  ],
  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
});

app.use(router);
app.mount("#app");

변경해야 할 몇 가지 사항은 다음과 같습니다.

dsn: 프로젝트 설정에서 찾을 수 있음

tracingOrigins: 보고할 URL

tracesSampleRate : 개발 목적으로 1.0으로 유지할 수 있습니다. 프로덕션의 경우 이 값을 0.1로 낮추는 것이 좋습니다(사용자의 10%가 성능 분석을 보고한다는 의미)

.

위의 필드를 변경한 후 Sentry SDK는 사용 분석을 Sentry 자체 호스팅 인스턴스로 다시 보내기 시작해야 합니다. (데이터가 나타나기 시작하는 데 몇 분 정도 걸릴 수 있습니다).

평소와 같이 질문이 있으시면 주저하지 마시고 DM이나 댓글로 질문해 주세요.

행운을 빕니다!