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

Remix Tokyo Meetupで発表しました https://lu.ma/4yu4sbys

Transcript

1. Remix × Cloudflare Pages × Sentry 奮闘記 2024.9.25 Remix Tokyo Meetup / Nkzn
2. 1. Cloudflare PagesにSentry入れたかった 2. Cloudflare的なアプローチ 3. 暫定の解決策 4. 本筋の解決策が生まれたかも？
3. Who？ 3 • 中川幸哉 a.k.a Nkzn（なかざん） • ‘86世代🐰の37歳 新潟生まれ新潟育ち（大学だけ会津） • Android→Cordova→React Native→Next.js→Rails→Remix • 技術書典Webのフロントエンド＆アプリ担当 ◦ 11月2日から技術書典17やるからよろしくね！ ◦ 弊社も開発合宿まとめ本を出します
4. Remix × Cloudflare Pagesでサイト作った
5. キャラつくAI https://charatsukuai.limo.media/
7. 7 https://speakerdeck.com/nkzn/cloudflare-developer-platform-for-ai-avatar-service
8. そうだ、Sentryを入れよう
9. @sentry/remix がCloudflareをサポートしてない 9 https://docs.sentry.io/platforms/javascript/guides/remix/
10. @sentry/wizardは一旦上手くいくけど…… 10 ←localhostでは元気に動いてる （Node.jsにMiniflareを 　ちょっと被せただけだからね） デプロイで失敗する→
11. Cloudflare × Sentryなアプローチを探す
12. 公式Sentry Integration（Workers用） ログ監視用Worker（tail worker）を別途用意して、ログをSentryに送ってくれるやつ 12 Workers Pages そんなものはPagesにはない
13. 生のPages Functions用ライブラリはある トップレベルまで届いた例外をキャッチしてSentryに送るやーつ 13 https://developers.cloudflare.com/pages/functions/plugins/sentry/ functions/_middleware.ts（全てのreq,resの前後の処理を制御するやつ） Remixレイヤーで全部キャッチしちゃうからか _middlewareまで例外が届かない……！
14. • 上手くいったとしてもさほど嬉しくない • トップレベルまで届いちゃった例外のロギングなら確かに前述のアプローチでもいい • でもサーバーサイドでもSentry.captureMessageとか使いたいじゃん……！ しっくりこない 14
15. 命令としてSentryを使えるアプローチを探す
16. 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. やったー動いたー 動く……動くぞ……！ 17
18. 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
19. 俺たちの戦いはこれからだ！（6月のワイ）
20. 9月のワイ 実はnode_compat_v2で @sentry/remixが動くようになった みたいな話はないかなー （なかったです）
21. あれ、動きあるっぽくない？ 21 https://github.com/getsentry/sentry-javascript/issues/12620
22. おやおや？？？ https://www.npmjs.com/package/@sentry/cloudflare 22
23. いっちょやってみっか functions/_middleware.ts app/routes/hoge.tsx 23 Context等を経由せずに いきなりcaptureXxxを呼んでいいらしい
24. 動いたーーーーーーーーーー！！！！！！！！！！
25. もちろんhandleErrorにも使っていいよね 25 app/routes/hoge.tsx app/entry.server.tsx
26. やったぜ npx @sentry/wizard@latest -i sourcemaps で事前にソースマップをアップロードする運用にしておくと、なおよさそう
27. @sentry/cloudflareの今後に期待 • まだアルファ版 • いつか @sentry/remix/cloudflare みたいなのも出てくるのかなあ • 脱toucan-jsできそうなのはいい話なので、見守っていきたい 27
28. ご清聴ありがとうございました！ We are hiring!