SlideShare ist ein Scribd-Unternehmen logo
1 von 14
Downloaden Sie, um offline zu lesen
Phone Home
Chris Birchall
2013/08/16
#m3dev
Phone Home is...
A system to collect client-side errors
● Client
○ JavaScript
○ Runs in user’s browser
● Server
○ Scalatra
○ Accepts POST data from clients, saves to
MongoDB
https://github.com/cb372/phone-home
http://phone-home-demo.herokuapp.com/
Motivation
● Wanted to debug weird, unreproducable
jQuery errors affecting a handful of users
○ IE, of course
● Kept system running long-term to track
number and types of JS errors
● Page load timing info also useful
Error collection
Client - Features
● Error handling
○ Using either wrap() or window.onerror
● Collect page load timing info
○ Supported browsers: FF, Chrome, IE9+
● Basic logging support
○ Send arbitrary log messages to PH server
● Sampling rate
○ Avoid overloading PH server
● Custom field support
○ Attach custom key-value metadata to errors
Server - Features
● Accepts POST data from clients
○ Writes to LTSV log file
○ Stores to MongoDB
● Simple admin UI
○ Stats
○ Recent events list
● Client sample page
○ Useful for testing that POSTs are working
● CORS support (details later)
● Async event processing
○ Respond to clients as quickly as possible
XmlHttpRequest payload
{
"error": {
"line": 50,
"file": "http://phone-home-demo.herokuapp.com/sample",
"message": "fool!",
"name": "Uncaught SyntaxError"
},
"customFields": {
"baz": "hoge",
"foo": "bar"
},
"userAgent": "Mozilla/5.0 ...",
"url": "http://phone-home-demo.herokuapp.com/sample",
"app": "phone-home sample"
}
CORS - XHR
Situation:
Website and PH are on separate domains
(www.foo.com and ph.foo.com)
Problem:
Browser will not let you send an XHR to
another domain, for security reasons
Solution:
PhoneHome server supports CORS
CORS - XHR
CORS - XHR
Situation:
Website and PH are on separate domains
(www.foo.com and ph.foo.com)
Problem:
IE (< 10) doesn’t support CORS for XHR
(IE 8, 9 offer limited support using XDomainRequest)
Solution:
Proxy ph.foo.com behind www.foo.com
Proxying for IE
CORS - <script> tag
Situation:
Website and JS files are on separate domains
(www.foo.com and static.foo.com)
Problem:
Browsers hide error info for cross-origin scripts
Solution:
● Add crossorigin=”anonymous” to <script> tags
● Set up CORS support on static.foo.com webserver
○ Check request’s origin header
○ if OK, add Access-Control-Allow-Origin header
errorMessage:Script error. errorFile: errorLine:0
Thank you
Issues and pull requests welcome!
https://github.com/cb372/phone-home
http://phone-home-demo.herokuapp.com/
Bonus: Data crunching with ltsv4s
scala> val errors = io.Source.fromFile("ph-errors.log")
.getLines.map(LTSV.parseLine(_, true)).toList
errors: List[Map[String,String]] = ...
scala> errors.map(_("errorMessage")).take(2)
res1: List[String] = List(Script error., Can't find variable: Ajax)
scala> errors.count(_("userAgent").contains("Chrome"))
res2: Int = 15
libraryDependencies += "com.github.seratch" %% "ltsv4s" %
"[0.2,)"
initialCommands in console := "import com.github.seratch.ltsv4s.
_"
build.sbt

Más contenido relacionado

Was ist angesagt?

Create a RESTful API with NodeJS, Express and MongoDB
Create a RESTful API with NodeJS, Express and MongoDBCreate a RESTful API with NodeJS, Express and MongoDB
Create a RESTful API with NodeJS, Express and MongoDBHengki Sihombing
 
Mongo db in 3 minutes BoilerMake
Mongo db in 3 minutes   BoilerMakeMongo db in 3 minutes   BoilerMake
Mongo db in 3 minutes BoilerMakeValeri Karpov
 
JS & NodeJS - An Introduction
JS & NodeJS - An IntroductionJS & NodeJS - An Introduction
JS & NodeJS - An IntroductionNirvanic Labs
 
MongoDB backup service overview Boston MUG
MongoDB backup service overview Boston MUGMongoDB backup service overview Boston MUG
MongoDB backup service overview Boston MUGMongoDB
 
Splitgraph: Open data and beyond - SF ClickHouse Meetup Sep 2020
Splitgraph: Open data and beyond - SF ClickHouse Meetup Sep 2020Splitgraph: Open data and beyond - SF ClickHouse Meetup Sep 2020
Splitgraph: Open data and beyond - SF ClickHouse Meetup Sep 2020Altinity Ltd
 
Mux loves Clickhouse. By Adam Brown, Mux founder
Mux loves Clickhouse. By Adam Brown, Mux founderMux loves Clickhouse. By Adam Brown, Mux founder
Mux loves Clickhouse. By Adam Brown, Mux founderAltinity Ltd
 
Web Performance Part 3 "Server-side tips"
Web Performance Part 3  "Server-side tips"Web Performance Part 3  "Server-side tips"
Web Performance Part 3 "Server-side tips"Binary Studio
 
Understanding and tuning WiredTiger, the new high performance database engine...
Understanding and tuning WiredTiger, the new high performance database engine...Understanding and tuning WiredTiger, the new high performance database engine...
Understanding and tuning WiredTiger, the new high performance database engine...Ontico
 
Hosting huge amount of binaries in JCR
Hosting huge amount of binaries in JCRHosting huge amount of binaries in JCR
Hosting huge amount of binaries in JCRWoonsan Ko
 
Welcome to ClojureScript
Welcome to ClojureScriptWelcome to ClojureScript
Welcome to ClojureScriptIkuru Kanuma
 
Future-proof Development for Classic SharePoint
Future-proof Development for Classic SharePointFuture-proof Development for Classic SharePoint
Future-proof Development for Classic SharePointBob German
 
ClojureScript@node
ClojureScript@nodeClojureScript@node
ClojureScript@nodeIkuru Kanuma
 
NodeJS Concurrency
NodeJS ConcurrencyNodeJS Concurrency
NodeJS Concurrencypgriess
 
Synapse india reviews sharing chapter 23 – asp.net
Synapse india reviews sharing  chapter 23 – asp.netSynapse india reviews sharing  chapter 23 – asp.net
Synapse india reviews sharing chapter 23 – asp.netSynapseindiaComplaints
 

Was ist angesagt? (20)

Create a RESTful API with NodeJS, Express and MongoDB
Create a RESTful API with NodeJS, Express and MongoDBCreate a RESTful API with NodeJS, Express and MongoDB
Create a RESTful API with NodeJS, Express and MongoDB
 
Mongo db in 3 minutes BoilerMake
Mongo db in 3 minutes   BoilerMakeMongo db in 3 minutes   BoilerMake
Mongo db in 3 minutes BoilerMake
 
JS & NodeJS - An Introduction
JS & NodeJS - An IntroductionJS & NodeJS - An Introduction
JS & NodeJS - An Introduction
 
MongoDB backup service overview Boston MUG
MongoDB backup service overview Boston MUGMongoDB backup service overview Boston MUG
MongoDB backup service overview Boston MUG
 
Splitgraph: Open data and beyond - SF ClickHouse Meetup Sep 2020
Splitgraph: Open data and beyond - SF ClickHouse Meetup Sep 2020Splitgraph: Open data and beyond - SF ClickHouse Meetup Sep 2020
Splitgraph: Open data and beyond - SF ClickHouse Meetup Sep 2020
 
AJAX
AJAXAJAX
AJAX
 
Mux loves Clickhouse. By Adam Brown, Mux founder
Mux loves Clickhouse. By Adam Brown, Mux founderMux loves Clickhouse. By Adam Brown, Mux founder
Mux loves Clickhouse. By Adam Brown, Mux founder
 
Web Performance Part 3 "Server-side tips"
Web Performance Part 3  "Server-side tips"Web Performance Part 3  "Server-side tips"
Web Performance Part 3 "Server-side tips"
 
node.js dao
node.js daonode.js dao
node.js dao
 
Understanding and tuning WiredTiger, the new high performance database engine...
Understanding and tuning WiredTiger, the new high performance database engine...Understanding and tuning WiredTiger, the new high performance database engine...
Understanding and tuning WiredTiger, the new high performance database engine...
 
Hosting huge amount of binaries in JCR
Hosting huge amount of binaries in JCRHosting huge amount of binaries in JCR
Hosting huge amount of binaries in JCR
 
Welcome to ClojureScript
Welcome to ClojureScriptWelcome to ClojureScript
Welcome to ClojureScript
 
Future-proof Development for Classic SharePoint
Future-proof Development for Classic SharePointFuture-proof Development for Classic SharePoint
Future-proof Development for Classic SharePoint
 
Node proxy
Node proxyNode proxy
Node proxy
 
JavaCro'14 - Using WildFly core to build high performance web server – Tomaž ...
JavaCro'14 - Using WildFly core to build high performance web server – Tomaž ...JavaCro'14 - Using WildFly core to build high performance web server – Tomaž ...
JavaCro'14 - Using WildFly core to build high performance web server – Tomaž ...
 
ClojureScript@node
ClojureScript@nodeClojureScript@node
ClojureScript@node
 
Node.js concurrency
Node.js concurrencyNode.js concurrency
Node.js concurrency
 
NodeJS Concurrency
NodeJS ConcurrencyNodeJS Concurrency
NodeJS Concurrency
 
Synapse india reviews sharing chapter 23 – asp.net
Synapse india reviews sharing  chapter 23 – asp.netSynapse india reviews sharing  chapter 23 – asp.net
Synapse india reviews sharing chapter 23 – asp.net
 
Node js
Node jsNode js
Node js
 

Andere mochten auch

Branching Strategies: Feature Branches vs Branch by Abstraction
Branching Strategies: Feature Branches vs Branch by AbstractionBranching Strategies: Feature Branches vs Branch by Abstraction
Branching Strategies: Feature Branches vs Branch by AbstractionChris Birchall
 
Coursera experience
Coursera experienceCoursera experience
Coursera experienceBrian Hooper
 
Writeexcelについて
WriteexcelについてWriteexcelについて
Writeexcelについてasa 999
 
DevOpsハッカソン参加レポート
DevOpsハッカソン参加レポートDevOpsハッカソン参加レポート
DevOpsハッカソン参加レポートTakashi Takebayashi
 
Guess the Country - Playing with Twitter Streaming API
Guess the Country - Playing with Twitter Streaming APIGuess the Country - Playing with Twitter Streaming API
Guess the Country - Playing with Twitter Streaming APIChris Birchall
 
3分 gem クッキング
3分 gem クッキング3分 gem クッキング
3分 gem クッキングKenji Mori
 
Skinny Controllers, Skinny Models
Skinny Controllers, Skinny ModelsSkinny Controllers, Skinny Models
Skinny Controllers, Skinny ModelsKazuhiro Sera
 
テストの運用について #m3dev
テストの運用について #m3devテストの運用について #m3dev
テストの運用について #m3devKazuhiro Sera
 
問題が起こった時、変えるのは人かそれともプロセスか?
問題が起こった時、変えるのは人かそれともプロセスか?問題が起こった時、変えるのは人かそれともプロセスか?
問題が起こった時、変えるのは人かそれともプロセスか?Takashi Takebayashi
 
多分モダンなWebアプリ開発
多分モダンなWebアプリ開発多分モダンなWebアプリ開発
多分モダンなWebアプリ開発tak-nakamura
 
Skinny Framework 1.0.0
Skinny Framework 1.0.0Skinny Framework 1.0.0
Skinny Framework 1.0.0Kazuhiro Sera
 
マイクロサービス運用の所感 #m3dev
マイクロサービス運用の所感 #m3devマイクロサービス運用の所感 #m3dev
マイクロサービス運用の所感 #m3devKazuhiro Sera
 
Trunk Based Development Explored
Trunk Based Development ExploredTrunk Based Development Explored
Trunk Based Development ExploredCarlos Lopes
 
Trunk Based Development in the Enterprise - Its Relevance and Economics
Trunk Based Development in the Enterprise - Its Relevance and EconomicsTrunk Based Development in the Enterprise - Its Relevance and Economics
Trunk Based Development in the Enterprise - Its Relevance and EconomicsPerforce
 
Continously delivering
Continously deliveringContinously delivering
Continously deliveringJames Cowie
 
Trunk based development
Trunk based developmentTrunk based development
Trunk based developmentgo_oh
 

Andere mochten auch (16)

Branching Strategies: Feature Branches vs Branch by Abstraction
Branching Strategies: Feature Branches vs Branch by AbstractionBranching Strategies: Feature Branches vs Branch by Abstraction
Branching Strategies: Feature Branches vs Branch by Abstraction
 
Coursera experience
Coursera experienceCoursera experience
Coursera experience
 
Writeexcelについて
WriteexcelについてWriteexcelについて
Writeexcelについて
 
DevOpsハッカソン参加レポート
DevOpsハッカソン参加レポートDevOpsハッカソン参加レポート
DevOpsハッカソン参加レポート
 
Guess the Country - Playing with Twitter Streaming API
Guess the Country - Playing with Twitter Streaming APIGuess the Country - Playing with Twitter Streaming API
Guess the Country - Playing with Twitter Streaming API
 
3分 gem クッキング
3分 gem クッキング3分 gem クッキング
3分 gem クッキング
 
Skinny Controllers, Skinny Models
Skinny Controllers, Skinny ModelsSkinny Controllers, Skinny Models
Skinny Controllers, Skinny Models
 
テストの運用について #m3dev
テストの運用について #m3devテストの運用について #m3dev
テストの運用について #m3dev
 
問題が起こった時、変えるのは人かそれともプロセスか?
問題が起こった時、変えるのは人かそれともプロセスか?問題が起こった時、変えるのは人かそれともプロセスか?
問題が起こった時、変えるのは人かそれともプロセスか?
 
多分モダンなWebアプリ開発
多分モダンなWebアプリ開発多分モダンなWebアプリ開発
多分モダンなWebアプリ開発
 
Skinny Framework 1.0.0
Skinny Framework 1.0.0Skinny Framework 1.0.0
Skinny Framework 1.0.0
 
マイクロサービス運用の所感 #m3dev
マイクロサービス運用の所感 #m3devマイクロサービス運用の所感 #m3dev
マイクロサービス運用の所感 #m3dev
 
Trunk Based Development Explored
Trunk Based Development ExploredTrunk Based Development Explored
Trunk Based Development Explored
 
Trunk Based Development in the Enterprise - Its Relevance and Economics
Trunk Based Development in the Enterprise - Its Relevance and EconomicsTrunk Based Development in the Enterprise - Its Relevance and Economics
Trunk Based Development in the Enterprise - Its Relevance and Economics
 
Continously delivering
Continously deliveringContinously delivering
Continously delivering
 
Trunk based development
Trunk based developmentTrunk based development
Trunk based development
 

Ähnlich wie Phone Home: A client-side error collection system

Top 10 HTML5 Features for Oracle Cloud Developers
Top 10 HTML5 Features for Oracle Cloud DevelopersTop 10 HTML5 Features for Oracle Cloud Developers
Top 10 HTML5 Features for Oracle Cloud DevelopersBrian Huff
 
The Recording HTTP Proxy: Not Yet Another Messiah - Bulgaria PHP 2019
The Recording HTTP Proxy: Not Yet Another Messiah - Bulgaria PHP 2019The Recording HTTP Proxy: Not Yet Another Messiah - Bulgaria PHP 2019
The Recording HTTP Proxy: Not Yet Another Messiah - Bulgaria PHP 2019Viktor Todorov
 
Design Web Service API by HungerStation
Design Web Service API by HungerStationDesign Web Service API by HungerStation
Design Web Service API by HungerStationArabNet ME
 
Krzysztof Kotowicz - Hacking HTML5
Krzysztof Kotowicz - Hacking HTML5Krzysztof Kotowicz - Hacking HTML5
Krzysztof Kotowicz - Hacking HTML5DefconRussia
 
HTML5 New Features and Resources
HTML5 New Features and ResourcesHTML5 New Features and Resources
HTML5 New Features and ResourcesRon Reiter
 
PHP BASIC PRESENTATION
PHP BASIC PRESENTATIONPHP BASIC PRESENTATION
PHP BASIC PRESENTATIONkrutitrivedi
 
Krug Fat Client
Krug Fat ClientKrug Fat Client
Krug Fat ClientPaul Klipp
 
Nodejs and WebSockets
Nodejs and WebSocketsNodejs and WebSockets
Nodejs and WebSocketsGonzalo Ayuso
 
Node.js: The What, The How and The When
Node.js: The What, The How and The WhenNode.js: The What, The How and The When
Node.js: The What, The How and The WhenFITC
 
Html5 Application Security
Html5 Application SecurityHtml5 Application Security
Html5 Application Securitychuckbt
 
Cloud Computing in Systems Programming Curriculum
Cloud Computing in Systems Programming CurriculumCloud Computing in Systems Programming Curriculum
Cloud Computing in Systems Programming CurriculumSteven Miller
 
Using communication and messaging API in the HTML5 world - GIl Fink, sparXsys
Using communication and messaging API in the HTML5 world - GIl Fink, sparXsysUsing communication and messaging API in the HTML5 world - GIl Fink, sparXsys
Using communication and messaging API in the HTML5 world - GIl Fink, sparXsysCodemotion Tel Aviv
 
Going Beyond Cross Domain Boundaries (jQuery Bulgaria)
Going Beyond Cross Domain Boundaries (jQuery Bulgaria)Going Beyond Cross Domain Boundaries (jQuery Bulgaria)
Going Beyond Cross Domain Boundaries (jQuery Bulgaria)Ivo Andreev
 
Mobile Device APIs
Mobile Device APIsMobile Device APIs
Mobile Device APIsJames Pearce
 

Ähnlich wie Phone Home: A client-side error collection system (20)

Building Client-Side Attacks with HTML5 Features
Building Client-Side Attacks with HTML5 FeaturesBuilding Client-Side Attacks with HTML5 Features
Building Client-Side Attacks with HTML5 Features
 
Browser Security
Browser SecurityBrowser Security
Browser Security
 
Top 10 HTML5 Features for Oracle Cloud Developers
Top 10 HTML5 Features for Oracle Cloud DevelopersTop 10 HTML5 Features for Oracle Cloud Developers
Top 10 HTML5 Features for Oracle Cloud Developers
 
The Recording HTTP Proxy: Not Yet Another Messiah - Bulgaria PHP 2019
The Recording HTTP Proxy: Not Yet Another Messiah - Bulgaria PHP 2019The Recording HTTP Proxy: Not Yet Another Messiah - Bulgaria PHP 2019
The Recording HTTP Proxy: Not Yet Another Messiah - Bulgaria PHP 2019
 
Design Web Service API by HungerStation
Design Web Service API by HungerStationDesign Web Service API by HungerStation
Design Web Service API by HungerStation
 
Krzysztof Kotowicz - Hacking HTML5
Krzysztof Kotowicz - Hacking HTML5Krzysztof Kotowicz - Hacking HTML5
Krzysztof Kotowicz - Hacking HTML5
 
HTML5 New Features and Resources
HTML5 New Features and ResourcesHTML5 New Features and Resources
HTML5 New Features and Resources
 
Full stack development
Full stack developmentFull stack development
Full stack development
 
PHP BASIC PRESENTATION
PHP BASIC PRESENTATIONPHP BASIC PRESENTATION
PHP BASIC PRESENTATION
 
02 intro
02   intro02   intro
02 intro
 
Krug Fat Client
Krug Fat ClientKrug Fat Client
Krug Fat Client
 
Nodejs and WebSockets
Nodejs and WebSocketsNodejs and WebSockets
Nodejs and WebSockets
 
introduction to web application development
introduction to web application developmentintroduction to web application development
introduction to web application development
 
Node.js: The What, The How and The When
Node.js: The What, The How and The WhenNode.js: The What, The How and The When
Node.js: The What, The How and The When
 
Html5 Application Security
Html5 Application SecurityHtml5 Application Security
Html5 Application Security
 
Single Page Application
Single Page ApplicationSingle Page Application
Single Page Application
 
Cloud Computing in Systems Programming Curriculum
Cloud Computing in Systems Programming CurriculumCloud Computing in Systems Programming Curriculum
Cloud Computing in Systems Programming Curriculum
 
Using communication and messaging API in the HTML5 world - GIl Fink, sparXsys
Using communication and messaging API in the HTML5 world - GIl Fink, sparXsysUsing communication and messaging API in the HTML5 world - GIl Fink, sparXsys
Using communication and messaging API in the HTML5 world - GIl Fink, sparXsys
 
Going Beyond Cross Domain Boundaries (jQuery Bulgaria)
Going Beyond Cross Domain Boundaries (jQuery Bulgaria)Going Beyond Cross Domain Boundaries (jQuery Bulgaria)
Going Beyond Cross Domain Boundaries (jQuery Bulgaria)
 
Mobile Device APIs
Mobile Device APIsMobile Device APIs
Mobile Device APIs
 

Mehr von Chris Birchall

Scala.js & friends: SCALA ALL THE THINGS
Scala.js & friends: SCALA ALL THE THINGSScala.js & friends: SCALA ALL THE THINGS
Scala.js & friends: SCALA ALL THE THINGSChris Birchall
 
Tour of Distributed Systems 3 - Apache Kafka
Tour of Distributed Systems 3 - Apache KafkaTour of Distributed Systems 3 - Apache Kafka
Tour of Distributed Systems 3 - Apache KafkaChris Birchall
 
Tour of distributed systems 2 - Cassandra
Tour of distributed systems 2 - CassandraTour of distributed systems 2 - Cassandra
Tour of distributed systems 2 - CassandraChris Birchall
 
Tour of distributed systems 1 - ZooKeeper
Tour of distributed systems 1 - ZooKeeperTour of distributed systems 1 - ZooKeeper
Tour of distributed systems 1 - ZooKeeperChris Birchall
 
Debugging and Testing ES Systems
Debugging and Testing ES SystemsDebugging and Testing ES Systems
Debugging and Testing ES SystemsChris Birchall
 

Mehr von Chris Birchall (7)

Scala.js & friends: SCALA ALL THE THINGS
Scala.js & friends: SCALA ALL THE THINGSScala.js & friends: SCALA ALL THE THINGS
Scala.js & friends: SCALA ALL THE THINGS
 
Rust 超入門
Rust 超入門Rust 超入門
Rust 超入門
 
Tour of Distributed Systems 3 - Apache Kafka
Tour of Distributed Systems 3 - Apache KafkaTour of Distributed Systems 3 - Apache Kafka
Tour of Distributed Systems 3 - Apache Kafka
 
Tour of distributed systems 2 - Cassandra
Tour of distributed systems 2 - CassandraTour of distributed systems 2 - Cassandra
Tour of distributed systems 2 - Cassandra
 
Tour of distributed systems 1 - ZooKeeper
Tour of distributed systems 1 - ZooKeeperTour of distributed systems 1 - ZooKeeper
Tour of distributed systems 1 - ZooKeeper
 
Hydra
HydraHydra
Hydra
 
Debugging and Testing ES Systems
Debugging and Testing ES SystemsDebugging and Testing ES Systems
Debugging and Testing ES Systems
 

Último

Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosErol GIRAUDY
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptxHansamali Gamage
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)codyslingerland1
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNeo4j
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingFrancesco Corti
 

Último (20)

Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is going
 

Phone Home: A client-side error collection system

  • 2. Phone Home is... A system to collect client-side errors ● Client ○ JavaScript ○ Runs in user’s browser ● Server ○ Scalatra ○ Accepts POST data from clients, saves to MongoDB https://github.com/cb372/phone-home http://phone-home-demo.herokuapp.com/
  • 3. Motivation ● Wanted to debug weird, unreproducable jQuery errors affecting a handful of users ○ IE, of course ● Kept system running long-term to track number and types of JS errors ● Page load timing info also useful
  • 5. Client - Features ● Error handling ○ Using either wrap() or window.onerror ● Collect page load timing info ○ Supported browsers: FF, Chrome, IE9+ ● Basic logging support ○ Send arbitrary log messages to PH server ● Sampling rate ○ Avoid overloading PH server ● Custom field support ○ Attach custom key-value metadata to errors
  • 6. Server - Features ● Accepts POST data from clients ○ Writes to LTSV log file ○ Stores to MongoDB ● Simple admin UI ○ Stats ○ Recent events list ● Client sample page ○ Useful for testing that POSTs are working ● CORS support (details later) ● Async event processing ○ Respond to clients as quickly as possible
  • 7. XmlHttpRequest payload { "error": { "line": 50, "file": "http://phone-home-demo.herokuapp.com/sample", "message": "fool!", "name": "Uncaught SyntaxError" }, "customFields": { "baz": "hoge", "foo": "bar" }, "userAgent": "Mozilla/5.0 ...", "url": "http://phone-home-demo.herokuapp.com/sample", "app": "phone-home sample" }
  • 8. CORS - XHR Situation: Website and PH are on separate domains (www.foo.com and ph.foo.com) Problem: Browser will not let you send an XHR to another domain, for security reasons Solution: PhoneHome server supports CORS
  • 10. CORS - XHR Situation: Website and PH are on separate domains (www.foo.com and ph.foo.com) Problem: IE (< 10) doesn’t support CORS for XHR (IE 8, 9 offer limited support using XDomainRequest) Solution: Proxy ph.foo.com behind www.foo.com
  • 12. CORS - <script> tag Situation: Website and JS files are on separate domains (www.foo.com and static.foo.com) Problem: Browsers hide error info for cross-origin scripts Solution: ● Add crossorigin=”anonymous” to <script> tags ● Set up CORS support on static.foo.com webserver ○ Check request’s origin header ○ if OK, add Access-Control-Allow-Origin header errorMessage:Script error. errorFile: errorLine:0
  • 13. Thank you Issues and pull requests welcome! https://github.com/cb372/phone-home http://phone-home-demo.herokuapp.com/
  • 14. Bonus: Data crunching with ltsv4s scala> val errors = io.Source.fromFile("ph-errors.log") .getLines.map(LTSV.parseLine(_, true)).toList errors: List[Map[String,String]] = ... scala> errors.map(_("errorMessage")).take(2) res1: List[String] = List(Script error., Can't find variable: Ajax) scala> errors.count(_("userAgent").contains("Chrome")) res2: Int = 15 libraryDependencies += "com.github.seratch" %% "ltsv4s" % "[0.2,)" initialCommands in console := "import com.github.seratch.ltsv4s. _" build.sbt