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
89
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
570
Repro basketball club
edwardkenfox
0
240
Introduction to UX Optimizer
edwardkenfox
0
98
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
310
僕と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
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
Hack Claude Code with Claude Code
choplin
4
2k
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
470
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
870
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
120
Discover Metal 4
rei315
2
130
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
86
28k
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
Featured
See All Featured
A better future with KSS
kneath
238
17k
Optimizing for Happiness
mojombo
379
70k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Embracing the Ebb and Flow
colly
86
4.7k
Visualization
eitanlees
146
16k
Designing for Performance
lara
610
69k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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