Sentry

● sentry のインストール

npm install --save @sentry/vue @sentry/tracing @sentry/integrations

● sentry のDSNの確認方法

Sentry ログインする
「Settings」 →「Projects」 →「<あなたのプロジェクト>」 →「client keys(DSN)」
から参照する
import { BrowserTracing } from "@sentry/tracing";
import { CaptureConsole } from "@sentry/integrations";
Sentry.init({
  app,
  dsn: "xxxxxxxxxxxxxxxx",
  denyUrls: [<除外したいホスト名の文字列 or regex>],
  ignoreErrors: [<除外したいエラーの文字列 or regex>],
  integrations: [
    new BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracePropagationTargets: [
        "localhost",
        "your.server.com",  // 変更する
        /^\//,
      ],
    }),
    new CaptureConsole({ levels: ["error"] }),
  ],
  tracesSampleRate: 1.0,
});

init のオプション

Sentry.init({
  // Client's DSN.
  dsn: 'xxxxxxx',
  // An array of strings or regexps that'll be used to ignore specific errors based on their type/message
  ignoreErrors: [],
  // An array of strings or regexps that'll be used to ignore specific errors based on their origin url
  denyUrls: [],
  // An array of strings or regexps that'll be used to allow specific errors based on their origin url
  allowUrls: [],
  // Debug mode with valuable initialization/lifecycle informations.
  debug: true,
  // Whether SDK should be enabled or not.
  enabled: true,
  // Custom integrations callback
  integrations(integrations) {
    return [new HappyIntegration(), ...integrations];
  },
  // A release identifier.
  release: '',
  // An environment identifier.
  environment: '',
  // Custom event transport that will be used to send things to Sentry
  transport: HappyTransport,
  // Method called for every captured event
  async beforeSend(event, hint) {
    // Because beforeSend and beforeBreadcrumb are async, user can fetch some data
    // return a promise, or whatever he wants
    // Our CustomError defined in errors.js has `someMethodAttachedToOurCustomError`
    // which can mimick something like a network request to grab more detailed error info or something.
    // hint is original exception that was triggered, so we check for our CustomError name
    if (hint.originalException.name === 'CustomError') {
      const serverData = await hint.originalException.someMethodAttachedToOurCustomError();
      event.extra = {
        ...event.extra,
        serverData,
      };
    }
    console.log(event);
    return event;
  },
  // Method called for every captured breadcrumb
  beforeBreadcrumb(breadcrumb, hint) {
    // We ignore our own logger and rest of the buttons just for presentation purposes
    if (breadcrumb.message.startsWith('Sentry Logger')) return null;
    if (breadcrumb.category !== 'ui.click' || hint.event.target.id !== 'breadcrumb-hint') return null;
    // If we have a `ui.click` type of breadcrumb, eg. clicking on a button we defined in index.html
    // We will extract a `data-label` attribute from it and use it as a part of the message
    if (breadcrumb.category === 'ui.click') {
      const label = hint.event.target.dataset.label;
      if (label) {
        breadcrumb.message = `User clicked on a button with label "${label}"`;
      }
    }
    console.log(breadcrumb);
    return breadcrumb;
  },
});

● sentry integration

・Default Integration

デフォルトで有効なインテグレーションです

https://docs.sentry.io/platforms/javascript/guides/gatsby/configuration/integrations/default/

・Pluggable Integrations

プラグインです

https://docs.sentry.io/platforms/javascript/configuration/integrations/plugin/

● Track Vue Components

https://docs.sentry.io/platforms/javascript/guides/vue/features/component-tracking/

Vueコンポーネントの追跡
SentryのVue SDKは、Vueコンポーネントのパフォーマンスを監視する機能として、コンポーネントトラッキングを提供しています。この機能を有効にすると、コンポーネントのライフサイクルイベントと継続時間を表すスパンがトランザクションに表示されます。これにより、コンポーネントがどのように動作しているかを詳細に把握することができ、遅い初期化や頻繁な更新を特定するなど、アプリのパフォーマンスに影響を与える可能性のあることを行うことができます。

● Sentry で localhost を除外する

1. Log in to your Sentry account and select the project you want to configure.
2. Navigate to the "Settings" section and click on "Filters."
3. Create a new filter by clicking the "Create Filter" button.
4. In the "Filter Name" field, enter a descriptive name for your filter, such as "Exclude Localhost Errors."
5. In the "Filter Expression" field, enter the following expression to exclude errors from localhost:

● エラーを発生させて Sentry へ送信されていることをテストする

・エラーを発生させると 設定が正しく行われている場合 Sentry へ自動的に送信されます

throw new Error('TEST ERROR');

Sentryではこのように表示されます

・CaptureConsole を している場合は consoleへの 出力も送信されます

console.error("TEST CONSOLE ERROR")

・ 明示的にエラーを送信する場合は Error があるのであれば captureException を、そうでなければ captureMessage を使います。

import { Sentry, SentrySeverity } from 'react-native-sentry';
// Error を渡す時
Sentry.captureException(error, {
  tags: {
    // 補足情報
    scene: 'SomeScene', // e.g. どの画面か
    fooState: state.foo // e.g. 関連する State はどのような状態か
  }
}
// メッセージを渡す時
Sentry.captureMessage("MyCustomError", {
  level: "error",
});

Sentryではこのように表示されます

引用: https://medium.com/@tsugitta/sentry-on-react-native-1364c3fb407a

オプションで level など追加できます
https://docs.sentry.io/clients/javascript/usage/

  Sentry.captureMessage("my-error", {
    level: "info",
  });

● どのユーザーがエラーを起こしたかをSentryに記録する

KEY は任意の値です

Sentry.setContext("KEY", {
  id: 'xxxxx',
  userName: 'yyyyy',
});

引用: Sentry で始める快適エラートラッキング on React Native | by tsugitta | Medium

Next.jsでSentryにソースマップを送信する

https://qiita.com/tamonmon/items/d0f0bf26f85d2de18987

添付ファイル1
添付ファイル2
添付ファイル3
No.2279
02/21 11:41

edit

添付ファイル