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.9k
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
JS Temporalを学ぶ人のための JSR-310入門 / jsr310-for-temporal
nkzn
0
30
Cloudflare Workers で作る専門性特化型 MCP サーバー / workers-specialist-mcp
nkzn
1
110
経済メディア編集部の実務に小さく刺さるAI / small-ai-with-editorial
nkzn
2
970
Cloudflareスタックで月間1200万UUの経済メディアにアバター画像生成サービスを作る / Cloudflare Developer Platform for AI avatar service
nkzn
7
4k
5分で流し読むCloudflare Developer Platform
nkzn
3
410
次世代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
340
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
nkzn
48
18k
Other Decks in Programming
See All in Programming
CSC305 Lecture 08
javiergs
PRO
0
280
CSC305 Lecture 11
javiergs
PRO
0
270
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
300
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
660
iOSでSVG画像を扱う
kishikawakatsumi
0
170
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
120
AkarengaLT vol.38
hashimoto_kei
1
120
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
440
Google Opalで使える37のライブラリ
mickey_kubo
3
150
品質ワークショップをやってみた
nealle
0
640
Go言語の特性を活かした公式MCP SDKの設計
hond0413
2
530
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Site-Speed That Sticks
csswizardry
13
930
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
We Have a Design System, Now What?
morganepeng
53
7.8k
Context Engineering - Making Every Token Count
addyosmani
8
300
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
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!