Remix Conf Europe

Remix Conf Europe 2022

Welcome to my inaugural remote workshop for RemixConf Europe. We'll cover error logging, multi-page forms, patching Remix, and multi-tenant apps with Prisma. We'll discuss expected and unexpected errors, code and error handling, and server-side error logging. Additionally, we'll explore handling form fields and errors, using typed JSON and overriding default functions, and managing data for multi-page forms. We'll also touch on storing session and form data, using standard fetch and form data in a Remix app, and multi-tenant Remix apps with Prisma. Finally, we'll delve into patching Remix to overcome limitations and testing with Remix and Playwright.

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

How to Solve Real-World Problems with Remix

Michael Carter

DevOps.js

DevOps.js Conf 2024

Monitoring and observability are important for catching bugs before they become noticeable. Examples of monitoring issues include confusion and frustration when monitoring leads to misunderstandings. Teamwork is essential for effective monitoring, automation can streamline processes and improve efficiency. Custom monitoring is necessary to prevent hazards and unnecessary alerts can hurt productivity. Challenges include relying too much on monitoring without addressing root issues and struggling with manual configuration.

Ever struggled with monitoring in your Node.JS apps? Not anymore! By sharing the good, the bad, and the hair-pulling from our own experiences, I want to help you steer clear of monitoring chaos. We’ll see how truly knowing how your apps work help you have more focused monitoring. This allows you to dodge black holes checkbox monitoring can have as you can make sure that important metrics and alerts are not swallowed. Additionally, we’ll see how strategic and focused logging, monitoring, and alerting with tools like Graylog, Grafana and Prometheus can supercharge your app’s resilience. Join to uncover how reliability and monitoring patterns and anti-patterns can help improve app quality. You will return armed with invaluable insights that can skyrocket your monitoring game!

Guardians of the Applications: Conquering Node.JS App Monitoring

Ante Tomić

We're going to be talking about next level JavaScript error tracking with Sentry. Error tracking is the process of identifying, recording, and managing errors in a web application. Traditional JavaScript error tracking methods have disadvantages and lack context about the device and user. You can automate error tracking with Sentry, an open source error tracking tool that helps developers monitor and fix crashes in real time. Setting up Sentry is simple using the Sentry SDK and configuring with the DSN.

Discover advanced techniques to track and resolve errors in JavaScript applications, using Sentry as a powerful ally. This session will explore the art of pinpointing issues before they hit users, streamlining your error-handling process, and enhancing application performance.

Next-Level JavaScript Error Tracking with Sentry

Ebenezer Don

React Advanced

React Advanced 2023

In this workshop, we will discuss monitoring and debugging with Sentry, focusing on Next.js. We'll cover setting up a Sentry project, configuring source maps, adding event context and custom tags, and resolving errors. Sentry helps developers quickly identify and resolve issues in their code, providing valuable context like stack traces, breadcrumbs, and session replay. Integrations with services like GitHub and Slack enhance error management, and alerts can be customized based on specific metrics. Distributed tracing allows for tracking performance issues, and session replay provides valuable context for debugging errors.

If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project.

Monitoring 101 for React Developers

Lazar Nikolov

Sarah Guthals

TS Congress

TypeScript Congress 2023

Today's Workshop focused on setting up a Vue TypeScript project and integrating it with Rollbar for error monitoring. Participants learned how to modify code to be TypeScript compliant, connect Rollbar plugin and test components, and add additional data to the payload. The Workshop also covered customizing the payload, configuring Rollbar, and using the transform function to modify the payload. Overall, participants gained insights into handling errors, capturing telemetry data, and integrating Rollbar with other tools.

During this session you will learn how to create a new Rollbar account and integrate the Rollbar SDK with your application to monitor errors in real-time and respond and fix those errors. We will also cover how to customize payload data sent to Rollbar to extend your monitoring capabilities. Agenda:- Create a Rollbar Account (Free Account)- Integrate your application with the Rollbar SDK- Send handled and unhandled errors to Rollbar- Add Custom payload data to your configuration.

Live Coding Workshop to Setup Rollbar Error Monitoring

Nico Krüger

React Summit

React Summit 2023

Grafana uses React to power its open source platform, leveraging its vast ecosystem, improved performance, and community contributions. The choice of state management tool depends on the team's problem space. React Hooks have posed challenges but have also been a powerful tool for developers. The new Scenes library simplifies development and reduces the learning curve. Despite challenges, React remains a powerful tool for complex frontends, and Grafana will continue to use it.

Why does Grafana use React for its frontend? How we leverage React’s features at Grafana What are some pain points we have ran into with using React at Grafana What are lessons learned from adopting React for the past 5+ years?

How Grafana Uses React to Power the World of Observability

Nathan Marrs

JS Nation

JSNation 2023

This workshop introduces Replay, a tool for solving bugs faster by providing context through session replays. It demonstrates the importance of context in bug solving and showcases the features of session replay, such as viewing HTML, console logs, network requests, and linking backend errors. The workshop also covers the use of virtual DOM and mutation observer for efficient page changes. Privacy concerns are addressed by replacing sensitive information in replays, and the power of session replay in identifying and understanding the sequence of errors is highlighted.

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

DevOps.js Conf 2022

Sentry is an error monitoring platform that helps developers optimize the customer experience by alerting them of errors and slowdowns. It supports all major languages and frameworks, with a focus on error monitoring, performance monitoring, and release health. The Talk explores how Sentry organizes and represents error data, analyzes error details and tags, and investigates backend issues, performance problems, and release health. Collaboration with backend teams is emphasized to resolve issues and optimize transaction time. The Talk also highlights the importance of analyzing graphs, issues, and regressions to identify areas for improvement in release health.

Learn about tools to trace frontend to backend data and increase visibility on errors and performance. We'll go through how to know which teams are responsible for which error, what the impact is, and all the context needed to solve it. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Monitoring Errors and Slowdowns Across JS Applications

Simon Zhong

Node Congress

Node Congress 2022

Sentry is code monitoring for developers, specifically designed for the application layer. It helps identify error details, frequency, release, user information, and stack trace. Source maps can be uploaded to see the original source code and suspect commits can be identified. Performance monitoring helps identify slowdowns and determine the cause. Automating alerts and investigating errors helps gain instant context and trace errors across different projects.

We've got a JavaScript frontend hitting a Node (Express.js) backend. We'll go through how to know which party is responsible for which error, what the impact is, and all the context needed to solve it. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Monitoring Errors and Slowdowns with a JS Frontend and Node Backend

Chris Stavitsky

This Talk explores error handling in Node.js, including types of errors, handling techniques, and debugging. It discusses the use of exceptions, callbacks, and promises for error handling. The importance of proper error handling and the benefits of using error classes, expressive error messages, and automated testing are emphasized. The speaker also addresses the use of TypeScript and test-driven development for error prevention. Overall, the Talk provides valuable insights and techniques for mastering error handling in Node.js.

Errors happen to every programmer. Devs have different choices: suppress it, notify the user, report to the team, ignore it or write code to handle the error. In this talk, you will learn all the important aspects of the Node.js error system, the types of errors, different ways to deliver an error, and patterns to improve error handling - with examples! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Mastering Error Handling Node.js

Lizz Parody

Today's Workshop focused on application monitoring using Sentry. The importance of tracking errors, slowdowns, and releases was highlighted, along with the integration process for React, Express, and Node.js applications. The debugging capabilities of Sentry were demonstrated, including identifying errors, slowdowns, and debugging backend issues. Monitoring releases, querying data, and visualizing information were also covered, along with the integration of Sentry with workflow tools. The Q&A session addressed various topics, including the use of Sentry in different environments and its integration with other tools.

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

Tracking errors and slowdowns in Node + JavaScript using Sentry

Neil Manvar

React Advanced 2021

Sentry is a tool for code observability that supports multiple languages and frameworks. It allows monitoring of errors and performance in applications, such as React apps in an ecommerce site. With Sentry, developers can easily investigate errors using developer tools and get a summary of the error. It also provides human-readable stack traces that highlight the exact line of the error.

In this lightning talk, you will see:<ul><li>The lack of visibility on React applications</li><li>How to install the Sentry React SDK</li><li>How Sentry can help you identify errors and slowdowns within your React App so you can see faster, solve quicker and continuously learn from your applications</li></ul> <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Track Slowdowns and Crashes in your React apps

Vue.js Live Conference

Vue.js London Live 2021

Hi, I'm Simon, a solutions engineer at Sentry. We focus on code observability, supporting all major languages and frameworks. With the Sentry SDK, you can monitor errors and performance. Get started with an easy installation process. Sentry provides detailed error information, including the stack trace and contextual information. It also supports source control management systems and integrates with issue tracking tools. The distributed trace feature allows you to see relationships between errors on the front end and back end. We can optimize queries to improve user experience and reduce user misery.

In this lightning talk, you will see: 1. The lack of visibility on Vue.js applications. 2. How to install the Sentry Vue.js SDK. 3. How you can use Sentry to identify errors and slowdowns within your Vue.js App. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Identify Issues and Prevent Slowdowns in your Vue.JS Apps

Sentry is a valuable tool for handling errors and optimizing performance in applications. The Core UI Team at Sentry ensures a high-quality product and fills in any gaps. The workshop covered topics such as the tech stack, front-end compilation, styling with Emotion and React Router, state management with Reflux, the benefits of TypeScript, performance optimization, code reviews, and measuring page load. The workshop concluded with the recommendation to join the Sentry Discord for further discussion and exploration of the open-source code.

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

#error monitoring