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
0
280
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
2k
5分で流し読むCloudflare Developer Platform
nkzn
3
220
次世代Web認証「パスキー」 / mo-zatsudan-passkey
nkzn
30
18k
パスキーについて今日時点の僕が知っていること / What I Know About Passkeys as of Today
nkzn
8
2.6k
青い空の歩き方 / Flying in the bluesky
nkzn
1
230
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
nkzn
46
16k
RemixでWeb標準を学んだ1年間 / First year with Remix
nkzn
22
7.3k
純粋培養フルリモート開発組織のワーク&ライフスタイル / monicle full remote style
nkzn
5
3.6k
資産運用を対面で相談するサービスでITエンジニアがやることあるの? / derta-gig-04
nkzn
0
1.3k
Other Decks in Programming
See All in Programming
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
220
"型"のあるRailsアプリケーション開発 / Typed Rails application development
sinsoku
7
2k
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.6k
RemixとCloudflare Stack におけるFile Upload
ossamoon
1
110
DjangoNinjaで高速なAPI開発を実現する
masaya00
0
140
Hermes: Better Performance with Bytecode Translation (React Universe 2024)
tmikov2023
0
180
Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する!Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
sumio
3
1.8k
Google Sign-inの移行から始めるCredential Manager活用
clockvoid
0
560
GenU導入でCDKに初挑戦し、悪戦苦闘した話
hideg
0
810
API Platform for Laravel
dunglas
1
1.1k
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
13
3.2k
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
210
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
36
1.7k
Thoughts on Productivity
jonyablonski
67
4.2k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
Designing the Hi-DPI Web
ddemaree
278
34k
Being A Developer After 40
akosma
84
590k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
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!