Since enabling browser profiling on our Sentry.io dashboard a month ago, we have collected over 2M profiles and learned a lot about how our users experience our dashboard. The profiles collected gave us insight into how our dashboard performs in production and surfaced some issues causing UI jank. In this post, we will look at an example of an issue we discovered using Profiling.

Let’s cut right to it. Read on to learn about all the product updates from our oddly productive December. From new tools to help with debugging while in development to new performance issues, we shipped a handful of new capabilities for every developer.

Like everyone else in the world, we are thinking hard about how we can harness the power of AI and machine learning while also staying true to our core values around respecting the security and privacy of our users’ data. If you use Sentry, you might have seen our “Suggested Fix” button which uses GPT-3.5 to try to explain and resolve a problem. We have additional ideas being developed as well that we’re excited to preview.

Slow-loading assets on your web pages can lead to frustrated users, high bounce rates, and lost conversions. For the vast majority of websites, slow-loading resources will be your main performance bottleneck. There’s no way to get around going through the network for essential resources like JavaScript, CSS, and images — thus, it’s crucial that you can quickly identify and fix your slow-loading assets.

While Sentry can automatically detect unhandled exceptions, poor performance, and even signals of user frustration such as rage clicks, there are some problems that only a human can identify. This is where Sentry’s new User Feedback widget can help.

Bundle Size matters - this is something we SDK engineers at Sentry are acutely aware of. In an ideal world, you’d get all the functionality you want with no additional bundle size - oh, wouldn’t that be nice? Sadly, in reality any feature we add to the JavaScript SDK results in additional bundle size for the SDK - there is always a trade off to be made. With Session Replay, this is especially challenging.

Have you seen this problem? Or maybe this one? You’ve most likely seen this: Hint: they’re all the same. The first image is Sentry’s Event Details page, the second is Chrome’s Network tab, and the code snippet is what causes it. If you can answer yes to any of these, then you need to keep reading. If not, you still need to keep reading, so your future self can thank you. This is called “fetch waterfall” and it’s a common data fetching issue in React.

Your images are 404ing all over the place. You’ve got an angry email from a client. Their site is “broken”, images aren’t loading, cumulative layout shift is running riot, and everything is messed up. The crowds are mocking your broken code on Twitter. A fun GIF loaded via a Giphy URL no longer exists. And someone has accidentally deleted an image from the CMS.

Grab your favorite mug, fill it with some warm chocolatey goodness – it is hot cocoa season after all –, and check out our most recent product updates to Sentry.

A long time ago I worked on a project called Django Debug Toolbar (DJDT). It was a local development plugin that would give you a debug overlay within Django’s development environment, helping you diagnose things like the SQL queries being made, environment configuration, and what templates were rendered. In general, it made the local dev experience much better, helping you prevent or more easily fix things like N+1 queries.