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
430
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
2.3k
5分で流し読むCloudflare Developer Platform
nkzn
3
230
次世代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
240
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
nkzn
46
16k
RemixでWeb標準を学んだ1年間 / First year with Remix
nkzn
23
7.5k
純粋培養フルリモート開発組織のワーク&ライフスタイル / monicle full remote style
nkzn
5
3.6k
資産運用を対面で相談するサービスでITエンジニアがやることあるの? / derta-gig-04
nkzn
0
1.3k
Other Decks in Programming
See All in Programming
Compose Multiplatform과 Ktor로 플랫폼의 경계를 넘어보자
kwakeuijin
0
270
現場から考えるソフトウェアエンジニアリングの価値と実験
nomuson
1
130
Competitionsだけじゃない! Kaggle Notebooks Grandmasterのすすめ
corochann
2
450
XP2024 っていう国際会議に行ってきたよの記
bonotake
4
240
CSC509 Lecture 03
javiergs
PRO
0
140
Micro Frontends for Java Microservices - dev2next 2024
mraible
PRO
0
210
個人開発で使ってるやつを紹介する回
yohfee
1
700
GrafanaのHTTP API を眺めてみよう
rinchoku
0
130
Unlocking Python's Core Magic
leew
0
130
How to debug Xdebug... or any other weird bug in PHP
dunglas
2
1k
ROS 2のZenoh対応とZenohのROS 2対応
takasehideki
2
310
Pythonによるイベントソーシングへの挑戦と現状に対する考察 / Challenging Event Sourcing with Python and Reflections on the Current State
nrslib
3
1.3k
Featured
See All Featured
How to Ace a Technical Interview
jacobian
275
23k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
The Invisible Side of Design
smashingmag
297
50k
What's in a price? How to price your products and services
michaelherold
243
11k
Being A Developer After 40
akosma
84
590k
How GitHub (no longer) Works
holman
311
140k
Unsuck your backbone
ammeep
668
57k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
Typedesign – Prime Four
hannesfritz
39
2.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4.1k
Web development in the modern age
philhawksworth
205
10k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
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!