LoginSignup
3

More than 3 years have passed since last update.

Sentry使いたい、使いたくない?って感じで導入したは良いもののSourceMapとかの連携どうすれば良いんだろー?ってなったときにおもむろに見る記事

Last updated at Posted at 2020-12-14

やっほー、エラーの監視やってるかい?

フロントエンドのエラー監視ってなかなか難しいよねぇ…
そんなこんなでSentryを導入して…みたは良いものの、連携項目が素のまま何もしてない!せめてSourceMapのアップロードくらいはしたいぜ!でも、サイトのドキュメントを見ても、やり方いっぱい書いてあって結局どうすれば良いんじゃ?ってなったときにこの記事が役に立つことを願ってるぜぇ、ぉぅぃぇ。

対象

この記事の対象は
1. アカウント登録をした
2. プロジェクトの作成をした
3. ソースマップのアップロードをしたい…いっぱい手順が書いてあるけど…うーん?どうすれば…

って人が対象だ!基本的にはドキュメントに全て記載されている。そしてこのドキュメントはめちゃくちゃ親切なので、まずは下記をドキュメントページを参照だ!
https://docs.sentry.io/

何はともあれSentryに登録だ

何も難しいことはない、シュッと登録しちゃいなよyou!

まずはProjectを作ろう!

アカウント登録が完了して、ログインすると、ダッシュボード画面に飛ばされるはずだ!
まずは監視したいプロジェクトに合った環境を選んでプロジェクトを作るのだ!

スクリーンショット 2020-12-03 17.40.23.png

Sentryはとても親切なので、 Setup Sentry って項目に何をしたら良いかってのを教えてくれるタスクリストなんかも設けられている。基本的にそのタスクリストを元にセットアップすれば、実はこの記事に書かれていることの大半は必要がなくなるってのは内緒だ!

さて、今回はプラットフォームとして JavaScript、アラート設定はデフォルトのままにしてみたぜ!

スクリーンショット 2020-12-03 17.50.06.png

画像で挙げられている選択肢以外にもかなり豊富な選択肢がある。これもサポートされてるのか!良いな!ってのもいっぱい有ると思う。その感動は君の目で確かめてみてくれ!

…ああ、そうそう、Projectは 後から追加 & 削除 & プラットフォームの切り替えなどなど自由自在だ! 安心してボッコボッコとプロジェクトを作ってOKだ!

次にSentryを導入だ!

さて、プラットフォームをJavaScriptにしてプロジェクトを作成するとConfigure JavaScriptなる案内に飛ばされる。この案内はめちゃめちゃ親切で、もはやコピペだけで導入が完了する。
実際に表示される案内は、 このドキュメントのページの内容 なので、間違って別のページに遷移しちゃったり、ブラウザを閉じて戻ることができなくても安心召されい!

Projectの設定も済んだし、Sentryの導入も済んだな?さぁ本番だ!

長い長い前座を経て、やっとこさ本題のSourceMapのアップロードだ。
SourceMapのアップロードに関しても基本的にはドキュメントページにとても親切に記載されている。が、記事を書いている人間は悲しいかなあまり英語が得意ではなくちょっとハマった。

SourceMapをアップロードするために必要なAPIKeyを作成するのだ!

SentryにSourceMapをアップロードするとき、Sentryは何をするかというと、内部的にはSentryCLIを用いて、SourceMapをアップロードする。みたいな挙動を取る。(多分そう、きっとそう。)
つまりは、SentryがSourceMapをアップロードできるようにするには、何らかの方法で、Sentryで作成したプロジェクトにアクセスできるようにする必要が有るわけだ。

そこで登場するのがAPIKeyの作成というわけなんだねぇ。

では、APIKeyの作成といこうか!
Settings > Developer Settings > Internal Integrationで作成だ!

スクリーンショット 2020-12-03 18.41.34.png

こんな感じで作成する!
スクリーンショット 2020-12-03 18.49.42.png

大事なのはPermissionの設定だ!(プロジェクト、Issue&Eventsの設定なんかは必要なかったかも…)ともかく リリースをAdminにする これだけ設定すればOK!
スクリーンショット 2020-12-03 18.49.23.png

APIKeyの生成が完了すると、このようになる。
スクリーンショット 2020-12-03 18.56.16.png

APIKeyのTokenなどの情報は生成されたAPIKeyの詳細情報の最下部にこのように表示される。
スクリーンショット 2020-12-03 18.57.49.png

APIKeyの作成 & 削除、Tokenの新規作成 & 無効化なんかはこれまた自由自在なので安心して作るとよろしい!

実はSourceMapのセクションにちゃんと記述されている。

Next you need to generate an access token for our API. Within your organization's settings, navigate to Developer Settings, create a new internal integration, and provide a name appropriate to your organization. Important: Select Releases -> Admin for Permissions.

さて、APIKeyの生成は済んだかな?じゃあ次のステップだ!

おもむろにwebpack-pluginを導入しよう!

SourceMapのセクション このページで紹介されているSentryWebPackPluginを導入しよう。

このページの案内も非常に親切で、ほとんどコピペで済む。が、パラメータの解説をすると、ざっくりと2種類の設定項目に分かれる。
1. SentryCLIに対する設定
2. Webpackで設定したプロジェクトの設定に依存する設定

この二種類だ!
ドキュメントに従って、シュッと設定しよう!

SentryCLIに対する設定

必須 プロパティ名 内容
authToken APIKeyの作成で作成した、Tokenを設定する
org 組織名
project プロジェクト名
- ※release ドキュメントには載っていない設定、プロジェクトをgit管理しているのであれば、リリースビルド時のコミットハッシュなんかを設定すると良いだろう。

ApiKeyをべた書きしたくない!ってときは
ビルドコマンドからApiKeyを渡すようにしよう!
ドキュメントにも書かれているが、こんな感じで渡してやると良いだろう。

yarnを使ったときの例

yarn build --env.SENTRY_AUTH_TOKEN={APIKeyのToken}

※releaseで例として挙げたコミットハッシュなんかもApiKeyを渡す要領で設定してやると良いだろう。

組織名はこのページから確認できる

Settings > General Settings
スクリーンショット 2020-12-03 19.26.26.png

Organization Slugを設定すること!
Display Nameを設定するんじゃあないぞ!

プロジェクト名はここから確認ができる

Settings > Projects > 作成したプロジェクト > General Settings
スクリーンショット 2020-12-03 19.26.37.png

このGeneral Settingsは プロジェクト単位での General Settingsなので注意すること!

スクリーンショット 2020-12-03 19.26.48.png

Webpackで設定したプロジェクトの設定に依存する設定

プロパティ名 内容
include 最終成果物、つまりビルドしたファイルが配置されるディレクトリのpathを指定する。(webpack.config.jsからの相対pathで指定)
ignore 最終成果物からSentryにアップロードしたくないファイルのpathを指定する。(includeからの相対path)

もっと詳しく、そして細かく設定したいときは、SentryCLIのドキュメントページを見るか、あるいはSentryWebPackPluginのページを見ると良いぞ!

WebpackPluginの設定もバッチリだな?じゃあビルドしてみよう!

SentryWebpackPluginを適切に設定できると、SourceMapがwebpackを利用したビルドの度にアップロードされる。 SourceMapは下記から確認できる。
Settings > Projects > 作成したプロジェクト > Source Maps

スクリーンショット 2020-12-03 19.54.07.png

塗りつぶされててナンノコッチャだが、このような感じ。(releaseプロパティを設定してるので、複数SourceMapが存在している。)
スクリーンショット 2020-12-03 19.54.40.png

以上!

最後に

他にもアラート設定やら、Slack連携の設定やら、色々できること、やることは有るが、大丈夫。ドキュメントあるいはこの記事やSentryの管理画面を頑張って行き来しながらプロジェクトの設定とにらめっこして設定できたんだ(できてると良いな)他の設定もきっとできるはずだ!

次は @n-sugimoto の記事ですぜぇ!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3