$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
コンポーネント指向時代のJSエラートラッキング
Search
Edward Fox
May 18, 2017
Programming
1
880
コンポーネント指向時代の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
760
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
100
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
590
Repro basketball club
edwardkenfox
0
250
Introduction to UX Optimizer
edwardkenfox
0
110
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
330
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
150
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
460
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
1.1k
Other Decks in Programming
See All in Programming
開発に寄りそう自動テストの実現
goyoki
1
350
AI時代もSEOを頑張っている話
shirahama_x
0
230
【CA.ai #3】ワークフローから見直すAIエージェント — 必要な場面と“選ばない”判断
satoaoaka
0
210
Navigation 3: 적응형 UI를 위한 앱 탐색
fornewid
1
120
「コードは上から下へ読むのが一番」と思った時に、思い出してほしい話
panda728
PRO
1
1.3k
WebRTC と Rust と8K 60fps
tnoho
2
1.9k
Herb to ReActionView: A New Foundation for the View Layer @ San Francisco Ruby Conference 2025
marcoroth
0
240
tparseでgo testの出力を見やすくする
utgwkk
1
130
Microservices rules: What good looks like
cer
PRO
0
540
Microservices Platforms: When Team Topologies Meets Microservices Patterns
cer
PRO
1
910
Rediscover the Console - SymfonyCon Amsterdam 2025
chalasr
2
140
なあ兄弟、 余白の意味を考えてから UI実装してくれ!
ktcryomm
10
11k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Practical Orchestrator
shlominoach
190
11k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Writing Fast Ruby
sferik
630
62k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
GraphQLとの向き合い方2022年版
quramy
50
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
8.3k
How to Think Like a Performance Engineer
csswizardry
28
2.3k
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