Tracing: Frontend Issues With Backend Solutions
summary
A demo of Sentry shows a checkout 500 error on an Empower Plant site, a Slack alert linking to an issue view, a session replay that masks PII and surfaces web vitals (CLS, LCP) and a slow DB query, and a full trace view that follows a front-end submit to an n+1 inventory query and a "not enough inventory for product" exception that is technically handled but blocks purchases. The UI surfaces a suspect commit, proposed autofix suggestions, and a VS Code Co-pilot extension to speed fixes.
AI-written summary · about
chapters (9)
- 0:00Introduction to talk
- 0:20What is Sentry
- 2:49Debugging in practice
- 5:16Issue view overview
- 7:00Session replay demo
- 9:54Tracing backend issues
- 12:00Key debugging features
- 13:23AI and Sentry tools
- 14:05Closing remarks
related talks
08mMonitoring Errors and Slowdowns with a JS Frontend and Node Backend
33mFrom “its broken” to “fix is out”
08mMonitoring Errors and Slowdowns Across JS Applications
14mSpeed up fixing app issues using Sentry
08mTrack Slowdowns and Crashes in your React apps
07mIdentify Issues and Prevent Slowdowns in your Vue.JS Apps
12mSolve 100% of your errors
49mObservability in Practice: How to Become Proactive with Bugs