Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Remix × Cloudflare Pages × Sentry 奮闘記 / remix-p...
Search
Yukiya Nakagawa
September 25, 2024
Programming
1
1.1k
Remix × Cloudflare Pages × Sentry 奮闘記 / remix-pages-sentry
Remix Tokyo Meetupで発表しました
https://lu.ma/4yu4sbys
Yukiya Nakagawa
September 25, 2024
Tweet
Share
More Decks by Yukiya Nakagawa
See All by Yukiya Nakagawa
Cloudflareスタックで月間1200万UUの経済メディアにアバター画像生成サービスを作る / Cloudflare Developer Platform for AI avatar service
nkzn
7
3k
5分で流し読むCloudflare Developer Platform
nkzn
3
310
次世代Web認証「パスキー」 / mo-zatsudan-passkey
nkzn
31
18k
パスキーについて今日時点の僕が知っていること / What I Know About Passkeys as of Today
nkzn
8
2.8k
青い空の歩き方 / Flying in the bluesky
nkzn
1
290
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
nkzn
48
17k
RemixでWeb標準を学んだ1年間 / First year with Remix
nkzn
23
8.4k
純粋培養フルリモート開発組織のワーク&ライフスタイル / monicle full remote style
nkzn
5
4k
資産運用を対面で相談するサービスでITエンジニアがやることあるの? / derta-gig-04
nkzn
0
1.4k
Other Decks in Programming
See All in Programming
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
290
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
40
16k
color-scheme: light dark; を完全に理解する
uhyo
7
490
Jakarta EE meets AI
ivargrimstad
0
290
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
160
Rubyと自由とAIと
yotii23
6
1.4k
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
970
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
7
1.1k
Code smarter, not harder - How AI Coding Tools Boost Your Productivity | Angular Meetup Berlin
danielsogl
0
100
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
910
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.1k
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
150
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Optimizing for Happiness
mojombo
376
70k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Designing for Performance
lara
604
68k
4 Signs Your Business is Dying
shpigford
182
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
BBQ
matthewcrist
87
9.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
A designer walks into a library…
pauljervisheath
205
24k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Transcript
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/
None
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!