Solve 100% Of Your Errors: How to Root Cause Issues Faster With Session Replay

Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)

- Errors? How to render and log your server and client errors
a - When to return errors vs throw
b - Setup logging service like Sentry, LogRocket, and Bugsnag
- Forms? How to validate and handle multi-page forms
a - Use zod to validate form data in your action
b - Step through multi-page forms without losing data
- Stuck? How to patch bugs or missing features in Remix so you can move on
a - Use patch-package to quickly fix your Remix install
b - Show tool for managing multiple patches and cherry-pick open PRs
- Users? How to handle multi-tenant apps with Prisma
a - Determine tenant by host or by user
b - Multiple database or single database/multiple schemas
c - Ensures tenant data always separate from others

We’ll go through setting up Sentry step--step to get visibility into our frontend and backend. Once integrated, we will track and triage errors + transactions surfaced Sentry from our services to understand why/where/how errors and slowdowns occurred within our application code.

Learn the ways of the
clinic suite of tools
, which help you detect performance issues in your Node.js applications. This workshop walks you through a number of examples, and the knowledge required to do benchmarking and debug I/O and Event Loop issues.

In this workshop, you will learn how to Debug Node.js Applications and what best practices are important to increase the debuggability of your Node.js applications.

Join Sentry’s Evan Purkhiser and David Wang as they walk through Sentry’s 230k LoC Typescript/React codebase. They’ll tell war stories of the good, the bad, and the ugly. Gaze in wonder at their modern usage of Typescript, react hooks, and styled components. Recoil in disgust at their legacy Reflux usage and perplexing Webpack configuration. Step away from the workshop with a working knowledge of techniques to keep a large-scale frontend codebase modern and maintainable.