Remix × Cloudflare Pages × Sentry 奮闘記 / remix-pages-sentry

Remix × Cloudflare Pages × Sentry 奮闘記 2024.9.25 Remix Tokyo
Meetup / Nkzn

1. Cloudflare PagesにSentry入れたかった 2. Cloudflare的なアプローチ 3. 暫定の解決策 4. 本筋の解決策が生まれたかも？

Who？ 3 • 中川幸哉 a.k.a Nkzn（なかざん） • ‘86世代🐰の37歳新潟生まれ新潟育ち（大学だけ会津） •
Android→Cordova→React Native→Next.js→Rails→Remix • 技術書典Webのフロントエンド＆アプリ担当 ◦ 11月2日から技術書典17やるからよろしくね！ ◦ 弊社も開発合宿まとめ本を出します

Remix × Cloudflare Pagesでサイト作った

キャラつくAI https://charatsukuai.limo.media/

7 https://speakerdeck.com/nkzn/cloudflare-developer-platform-for-ai-avatar-service

そうだ、Sentryを入れよう

@sentry/remix がCloudflareをサポートしてない 9 https://docs.sentry.io/platforms/javascript/guides/remix/

@sentry/wizardは一旦上手くいくけど…… 10 ←localhostでは元気に動いてる（Node.jsにMiniflareを　ちょっと被せただけだからね）デプロイで失敗する→

Cloudflare × Sentryなアプローチを探す

公式Sentry Integration（Workers用）ログ監視用Worker（tail worker）を別途用意して、ログをSentryに送ってくれるやつ 12 Workers Pages そんなものはPagesにはない

生のPages Functions用ライブラリはあるトップレベルまで届いた例外をキャッチしてSentryに送るやーつ 13 https://developers.cloudflare.com/pages/functions/plugins/sentry/ functions/_middleware.ts（全てのreq,resの前後の処理を制御するやつ） Remixレイヤーで全部キャッチしちゃうからか _middlewareまで例外が届かない……！

• 上手くいったとしてもさほど嬉しくない • トップレベルまで届いちゃった例外のロギングなら確かに前述のアプローチでもいい • でもサーバーサイドでもSentry.captureMessageとか使いたいじゃん……！しっくりこない 14

命令としてSentryを使えるアプローチを探す

Cloudflare Workersで使えるSentryクライアント • @cloudflare/pages-plugin-sentryのドキュメント内にrobertcepa/toucan-jsへの言及があった > Toucan is a Sentry client
for Cloudflare Workers written in TypeScript. • これ欲しかったやつでは……！？ • raven（カラス）との対比でtoucan（オオハシ）になっているらしい 16

やったー動いたー動く……動くぞ……！ 17

getLoadContextでToucanを初期化して、contextに登録しておけば、loaderやactionで使える RemixのコンテキストにToucan製sentryを追加する 18 load-context.ts いったんこれでしのぐか……？参考： https://remix.run/docs/en/2.12.1/guides/vite#augmenting-load-context

俺たちの戦いはこれからだ！（6月のワイ）

9月のワイ実はnode_compat_v2で @sentry/remixが動くようになったみたいな話はないかなー（なかったです）

あれ、動きあるっぽくない？ 21 https://github.com/getsentry/sentry-javascript/issues/12620

おやおや？？？ https://www.npmjs.com/package/@sentry/cloudflare 22

いっちょやってみっか functions/_middleware.ts app/routes/hoge.tsx 23 Context等を経由せずにいきなりcaptureXxxを呼んでいいらしい

動いたーーーーーーーーーー！！！！！！！！！！

もちろんhandleErrorにも使っていいよね 25 app/routes/hoge.tsx app/entry.server.tsx

やったぜ npx @sentry/wizard@latest -i sourcemaps で事前にソースマップをアップロードする運用にしておくと、なおよさそう

@sentry/cloudflareの今後に期待 • まだアルファ版 • いつか @sentry/remix/cloudflare みたいなのも出てくるのかなあ • 脱toucan-jsできそうなのはいい話なので、見守っていきたい 27

ご清聴ありがとうございました！ We are hiring!

Remix × Cloudflare Pages × Sentry 奮闘記 / remix-p...