React Summit

React Summit 2023

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 🤐)

React Performance Debugging Masterclass

Ivan Akulov

As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Debugging JS

Mark Erikson

JS Nation

JSNation 2023

Few developers enjoy debugging, and debugging can be complex for modern web apps because of the multiple frameworks, languages, and libraries used. But, developer tools have come a long way in making the process easier. In this talk, Jecelyn will dig into the modern state of debugging, improvements in DevTools, and how you can use them to reliably debug your apps.

Modern Web Debugging

Jecelyn Yeen

React Advanced

React Advanced Conference 2023

React Performance Debugging

React's component model and one-way data flow give us a great mental model for building our apps, but debugging React apps can still be confusing. React's internals are a black box, and it's often hard to understand why components rendered or what caused errors. The Replay time-travel debugger makes it easier to debug React apps by letting you inspect what's happening at any point in time. But what if we could go beyond the usual debugger features, and build new debugging features that tell us more about what React is doing? Let's see how Replay's API makes that possible.

Building Better React Debugging with Replay Analysis

The current revision of the JavaScript Source Maps specification is over 12 years old. Throughout this time, the entire ecosystem has evolved immensely, but for some reason, we have done nothing to improve the debugging experience and are still stuck at version 3 of the specification. Can we do better?

JavaScript Source Maps, Can We Do Better?

Kamil Ogórek

We are all using static analysis tools like ESLint every day to ensure the better quality of our code. How does it work, and what is tricky about JavaScript, making writing a proper rule often not trivial?

Static Analysis in JavaScript: What’s Easy and What’s Hard

Elena Vilchik

You know that annoying bug? The one that doesn’t show up locally? And no matter how many times you try to recreate the environment you can’t reproduce it? You’ve gone through the breadcrumbs, read through the stack trace, and are now playing detective to piece together support tickets to make sure it’s real. Join Sentry developer Ryan Albrecht in this talk to learn how developers can use Session Replay - a tool that provides video-like reproductions of user interactions - to identify, reproduce, and resolve errors and performance issues faster (without rolling your head on your keyboard).

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

Ryan Albrecht

JSNation 2022

Learn the ways of the <a href="https://clinicjs.org/">clinic suite of tools</a>, 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.

The Clinic.js Workshop

Rafael Gonzaga

TestJS Summit

TestJS Summit 2021

In this workshop, we will be building a testing environment for a pre-built application, then we will write and automate end-to-end tests for our serverless application. And in the final step, we will demonstrate how easy it is to understand the root cause of an erroneous test using distributed testing and how to debug it in our CI/CD pipeline with Thundra Foresight. Table of contents: - How to set up and test your cloud infrastructure - How to write and automate end-to-end tests for your serverless workloads - How to debug, trace, and troubleshot test failures with Thundra Foresight in your CI/CD pipelines <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Live e2e test debugging for a distributed serverless application

Serkan Ozal

Oguzhan Ozdemir

React Advanced Conference 2021

POV: Your app has a crash affecting thousands of users, but for the life of you, you can't reproduce it and have no idea what's causing it. Hear the story of an epic struggle to vanquish a non reproducible bug and learn what to do (and what not to do) when facing such a foe. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Debugging a Non Reproducible Crash

Alexandre Moureaux

DevOps.js

DevOps.js Conf 2021

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Let's Debug Node.js Applications

Julián Duque

JSNation Live

JSNation Live 2021

Jecelyn will share some tips and tricks to help you debug your web app effectively with Chrome DevTools. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#debug