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
コンポーネント指向時代のJSエラートラッキング
Search
Edward Fox
May 18, 2017
Programming
1
870
コンポーネント指向時代のJSエラートラッキング
Rails Developers Meetup #1
https://rails-developers-meetup.connpass.com/event/55363/
Edward Fox
May 18, 2017
Tweet
Share
More Decks by Edward Fox
See All by Edward Fox
Priorityを制するものはローディングを制す
edwardkenfox
4
700
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
91
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
570
Repro basketball club
edwardkenfox
0
240
Introduction to UX Optimizer
edwardkenfox
0
99
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
320
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
130
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
430
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
1.1k
Other Decks in Programming
See All in Programming
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
330
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
15k
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
TypeScriptでDXを上げろ! Hono編
yusukebe
3
870
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
520
効率的な開発手段として VRTを活用する
ishkawa
1
180
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
1k
AIともっと楽するE2Eテスト
myohei
9
3.1k
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
130
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
700
Reactの歴史を振り返る
tutinoko
1
140
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
630
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
4 Signs Your Business is Dying
shpigford
184
22k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Gamification - CAS2011
davidbonilla
81
5.4k
Agile that works and the tools we love
rasmusluckow
329
21k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
RailsConf 2023
tenderlove
30
1.2k
Being A Developer After 40
akosma
90
590k
Transcript
ίϯϙʔωϯτࢦ࣌ͷ JSΤϥʔτϥοΩϯά EDWARD FOX @Rails Developers Meetup 2017/05/18
λΠτϧ͔͚ͬͭͯ͜·͕͢ RailsͰϑϩϯτΛ࡞͖ͬͯͨ தͰΤϥʔऩूʹ͍ͭͯ ߟ͑ͨ͜ͱΛ͠·͢
Edward Fox - Developer @ Repro Inc. - RoR, JavaScript,
AWS - Vue.js, HTTP/2, Browsers
Rails × ϑϩϯτΤϯυ Ͱ ०ͳ
webpacker
None
None
ReactVue.jsͳͲͷ ίϯϙʔωϯτࢦͳ ϥΠϒϥϦ͕͙͢ಈ͘
ΫϥΠΞϯτͷ͕ େ͖͘ͳΔҰํɺ ΤϥʔτϥοΩϯά σόοάपΓ͕εΩͩΒ͚
ϑϩϯτͷΤϥʔΛ ૄ͔ʹ͍͚ͯ͠ͳ͍
ࠓͷ݁: Sentry ͍·͠ΐ͏
Sentry is Կ
None
1. Τϥʔʹؾ͘ 2. ΤϥʔΛཧղ͢Δ 3. ΤϥʔΛ࠶ݱ͢Δ
1. Τϥʔʹؾ͘ 2. ΤϥʔΛཧղ͢Δ 3. ΤϥʔΛ࠶ݱ͢Δ
RailsͰ༻ҙͨ͠ APIΤϯυϙΠϯτʹ JS͔Βඇಉظ௨৴ͯ͠ σʔλΛऔಘ
RailsͰఆ௨Γͷ JSONΛฦ͍ͯͯ͠ɺ ࣮σʔλΛड͚औͬͨ ΫϥΠΞϯτ͏·͘ ॲཧͰ͖͍ͯͳ͍͔
ΫϥΠΞϯτͰͷ Τϥʔൃੜ࣌ʹ - ϦΫΤετύϥϝʔλ - ελοΫτϨʔε - Τϥʔͷߦɾྻ൪߸ ͱ͍ͬͨใ͕औಘՄೳ
1. Τϥʔʹؾ͘ 2. ΤϥʔΛཧղ͢Δ 3. ΤϥʔΛ࠶ݱ͢Δ
֊ߏΛ࣋ͭ ίϯϙʔωϯτ͔Β Τϥʔ͕ൃੜ
Τϥʔͷൃੜࣗମʹ ؾ͚ͯɺΤϥʔΛ ىͨ͜͠ίϯϙʔωϯτ͕ Ͳ͏͍͏ঢ়ଶ͔Θ͔Βͳ͍
- component name - lifecycle hook - state, data, props
- localStorage ͱ͍ͬͨใ͕औಘՄೳ
Τϥʔ͕ൃੜͨ͠ͱ͖ͷ ίϯϙʔωϯτͷঢ়ଶΛ Ѳ͠ɺΤϥʔͷৄࡉΛ ཧղͰ͖Δ
1. Τϥʔʹؾ͘ 2. ΤϥʔΛཧղ͢Δ 3. ΤϥʔΛ࠶ݱ͢Δ
ΤϥʔࣗମΛཧղͰ͖ͯ ͦͷΤϥʔʹࢸΔ·Ͱͷ ྲྀΕ͕͔Βͣ ࠶ݱͰ͖ͳ͍
SentryͷBreadcrumbsΛݟΔ
None
Ϣʔβʔͷը໘ૢ࡞͕ ͑ΔͨΊ Τϥʔͷ࠶ݱ͕༰қ
Ϧιʔεͷঢ়ଶ͕URLͰදݱ Ͱ͖ͳ͍SPAͰ͋ͬͯɺ SentryʹૹΔใΛ ؆୯ʹՃͰ͖Δ
·ͱΊ
Sentry ͍·͠ΐ͏
1. Τϥʔʹؾ͘ 2. ΤϥʔΛཧղ͢Δ 3. ΤϥʔΛ࠶ݱ͢Δ
ϦονͳUIɺSPAΛ࡞ΔͳΒ ΫϥΠΞϯτͷΤϥʔΛ ͪΌΜͱऩू͠ ݎ࿚ͳRailsΞϓϦΛ࡞Ζ͏
edwardkenfox.com