やっほー、エラーの監視やってるかい？
フロントエンドのエラー監視ってなかなか難しいよねぇ…
そんなこんなでSentryを導入して…みたは良いものの、連携項目が素のまま何もしてない！せめてSourceMapのアップロードくらいはしたいぜ！でも、サイトのドキュメントを見ても、やり方いっぱい書いてあって結局どうすれば良いんじゃ？ってなったときにこの記事が役に立つことを願ってるぜぇ、ぉぅぃぇ。
対象
この記事の対象は
- アカウント登録をした
- プロジェクトの作成をした
- ソースマップのアップロードをしたい…いっぱい手順が書いてあるけど…うーん？どうすれば…
って人が対象だ！基本的にはドキュメントに全て記載されている。そしてこのドキュメントはめちゃくちゃ親切なので、まずは下記をドキュメントページを参照だ！
https://docs.sentry.io/
何はともあれSentryに登録だ
何も難しいことはない、シュッと登録しちゃいなよyou！
まずはProjectを作ろう！
アカウント登録が完了して、ログインすると、ダッシュボード画面に飛ばされるはずだ！
まずは監視したいプロジェクトに合った環境を選んでプロジェクトを作るのだ！
Sentryはとても親切なので、 Setup Sentry って項目に何をしたら良いかってのを教えてくれるタスクリストなんかも設けられている。基本的にそのタスクリストを元にセットアップすれば、実はこの記事に書かれていることの大半は必要がなくなるってのは内緒だ！
さて、今回はプラットフォームとして JavaScript、アラート設定はデフォルトのままにしてみたぜ！
画像で挙げられている選択肢以外にもかなり豊富な選択肢がある。これもサポートされてるのか！良いな！ってのもいっぱい有ると思う。その感動は君の目で確かめてみてくれ！
…ああ、そうそう、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で作成だ！
こんな感じで作成する！
大事なのはPermissionの設定だ！（プロジェクト、Issue&Eventsの設定なんかは必要なかったかも…）ともかく リリースをAdminにする これだけ設定すればOK！
APIKeyの生成が完了すると、このようになる。
APIKeyのTokenなどの情報は生成されたAPIKeyの詳細情報の最下部にこのように表示される。
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種類の設定項目に分かれる。
- SentryCLIに対する設定
- 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
Organization Slugを設定すること！
Display Nameを設定するんじゃあないぞ！
プロジェクト名はここから確認ができる
Settings > Projects > 作成したプロジェクト > General Settings
このGeneral Settingsは プロジェクト単位での General Settingsなので注意すること！
Webpackで設定したプロジェクトの設定に依存する設定
| プロパティ名 | 内容 |
|---|---|
| include | 最終成果物、つまりビルドしたファイルが配置されるディレクトリのpathを指定する。(webpack.config.jsからの相対pathで指定) |
| ignore | 最終成果物からSentryにアップロードしたくないファイルのpathを指定する。(includeからの相対path) |
もっと詳しく、そして細かく設定したいときは、SentryCLIのドキュメントページを見るか、あるいはSentryWebPackPluginのページを見ると良いぞ！
WebpackPluginの設定もバッチリだな？じゃあビルドしてみよう！
SentryWebpackPluginを適切に設定できると、SourceMapがwebpackを利用したビルドの度にアップロードされる。 SourceMapは下記から確認できる。
Settings > Projects > 作成したプロジェクト > Source Maps
塗りつぶされててナンノコッチャだが、このような感じ。（releaseプロパティを設定してるので、複数SourceMapが存在している。）
以上！
最後に
他にもアラート設定やら、Slack連携の設定やら、色々できること、やることは有るが、大丈夫。ドキュメントあるいはこの記事やSentryの管理画面を頑張って行き来しながらプロジェクトの設定とにらめっこして設定できたんだ（できてると良いな）他の設定もきっとできるはずだ！
次は @n-sugimoto の記事ですぜぇ！