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