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
720
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
95
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
580
Repro basketball club
edwardkenfox
0
240
Introduction to UX Optimizer
edwardkenfox
0
110
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
320
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
140
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
440
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
1.1k
Other Decks in Programming
See All in Programming
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
480
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
210
Laravel Boost 超入門
fire_arlo
2
210
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
旅行プランAIエージェント開発の裏側
ippo012
2
890
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
130
Cache Me If You Can
ryunen344
2
670
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
260
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
1
120
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
730
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
350
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Agile that works and the tools we love
rasmusluckow
330
21k
Into the Great Unknown - MozCon
thekraken
40
2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Building an army of robots
kneath
306
46k
A better future with KSS
kneath
239
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Optimizing for Happiness
mojombo
379
70k
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