Open5

Next.js(SSR)にSentryを導入する

りょーた ❖ desgin engineerりょーた ❖ desgin engineer

ここからカスタマイズをしていくに当たって、以下の記事を参考に設定を変更

https://note.com/tabelog_frontend/n/n7f6822ae0c0d

【traceSampleRateについて】
MVPでの利用と、無料枠で使いたいということもあり、低めに設定(アドバイスあればコメントください🙏)

  tracesSampler: (samplingContext) => {
    if (process.env.NEXT_PUBLIC_BUILD_ENV === 'production') {
      return 0.5;
    } else if (process.env.NEXT_PUBLIC_BUILD_ENV === 'staging') {
      return 0.25;
    }
    return 0;
  }

【本番環境でもソースマップがアップロードされてしまうについて】
デプロイしたソースを確認してみると、ソースマップがアップロードされていたので、記事に記載の通りにビルド用のnpmコマンドを変更
ただし、amplifyではnext build && next exportではなくnext buildのみなので、同じ方法では解決しなかった。

(続く🐧)

りょーた ❖ desgin engineerりょーた ❖ desgin engineer

とりあえずstaging環境とproduction環境でエラー検知ができるようになったので、あとはエラーがあったらSlackに通知するようにする

SentryにはSlackのIntegrationがある

https://docs.sentry.io/product/integrations/notification-incidents/slack/

ただ、有料プランでしか使えないので今回は利用しない。

ということで、webhook Integrationでgasを実行し、その中でslackに通知するようにした。

メッセージは以下のページでインターフェースを作成。

https://app.slack.com/block-kit-builder/

gasのソースはgistに置いておく。

こんな感じでできた