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.7k
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
経済メディア編集部の実務に小さく刺さるAI / small-ai-with-editorial
nkzn
2
910
Cloudflareスタックで月間1200万UUの経済メディアにアバター画像生成サービスを作る / Cloudflare Developer Platform for AI avatar service
nkzn
7
3.8k
5分で流し読むCloudflare Developer Platform
nkzn
3
380
次世代Web認証「パスキー」 / mo-zatsudan-passkey
nkzn
32
18k
パスキーについて今日時点の僕が知っていること / What I Know About Passkeys as of Today
nkzn
8
2.9k
青い空の歩き方 / Flying in the bluesky
nkzn
1
330
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
nkzn
48
18k
RemixでWeb標準を学んだ1年間 / First year with Remix
nkzn
23
8.8k
純粋培養フルリモート開発組織のワーク&ライフスタイル / monicle full remote style
nkzn
5
4.4k
Other Decks in Programming
See All in Programming
Understanding Kotlin Multiplatform
l2hyunwoo
0
260
AIのメモリー
watany
13
1.4k
What's new in Adaptive Android development
fornewid
0
140
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
17
3.8k
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.4k
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
74th
7
2.5k
Go製CLIツールをnpmで配布するには
syumai
2
1.2k
Android 15以上でPDFのテキスト検索を爆速開発!
tonionagauzzi
0
200
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
5
590
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
480
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
500
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
880
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
800
Raft: Consensus for Rubyists
vanstee
140
7.1k
Building an army of robots
kneath
306
45k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
How GitHub (no longer) Works
holman
314
140k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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!