npm install --save @sentry/vue @sentry/tracing @sentry/integrations
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;
},
});
デフォルトで有効なインテグレーションです
https://docs.sentry.io/platforms/javascript/guides/gatsby/configuration/integrations/default/
プラグインです
https://docs.sentry.io/platforms/javascript/configuration/integrations/plugin/
https://docs.sentry.io/platforms/javascript/guides/vue/features/component-tracking/
Vueコンポーネントの追跡
SentryのVue SDKは、Vueコンポーネントのパフォーマンスを監視する機能として、コンポーネントトラッキングを提供しています。この機能を有効にすると、コンポーネントのライフサイクルイベントと継続時間を表すスパンがトランザクションに表示されます。これにより、コンポーネントがどのように動作しているかを詳細に把握することができ、遅い初期化や頻繁な更新を特定するなど、アプリのパフォーマンスに影響を与える可能性のあることを行うことができます。
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:
throw new Error('TEST ERROR');
console.error("TEST CONSOLE ERROR")
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",
});
引用: https://medium.com/@tsugitta/sentry-on-react-native-1364c3fb407a
オプションで level など追加できます
https://docs.sentry.io/clients/javascript/usage/
Sentry.captureMessage("my-error", {
level: "info",
});
KEY は任意の値です
Sentry.setContext("KEY", {
id: 'xxxxx',
userName: 'yyyyy',
});
引用: Sentry で始める快適エラートラッキング on React Native | by tsugitta | Medium