Sending logs from actions and loaders to the browser console
|
Hey y'all, David here. You signed up for my newsletter at programmingarehard.com. I'm super jazzed about what I have for you today! One of the inherent benefits of Single Page Apps(SPAs) I took for granted was the logging that comes out of the box via the Network tab in the console. Every api request happens in the browser and you can easily inspect those which is super handy. Once you move to something like Remix/React Router 7, you become painfully aware that you've lost access to that since most of your api requests are now happening on the server in actions and loaders. This is a Major Bummer 🫡 when coming from the SPA world. Instead, you have to manually log those in your loaders and actions and inspect those where your logs go during development: commonly your terminal or a file. This kinda stinks for a couple of reasons:
Let's come up with a way to ship our server logs directly to the browser console so we can see those in real time as we're interacting with our apps. Let me show you exactly how I'm doing this in my app. Or you can read the blog post here. Hope you find it useful. Have an awesome Thursday ✌️ David |
ProgrammingAreHard
For developers looking to learn useful tips and tricks.
React Router Guide How I used Prettier to help me find and fix a bug I recently encountered a bug where a system that's been working for years stopped working after a code release. The confusing bit was that the updated code had absolutely nothing to do with the system that was breaking. Through a series of trial and error and lots of scratching my head, I ended up using Prettier to pinpoint where the problem was and was able to find and fix the bug. Check out the full write-up here. Have a...
React Router Guide React Router error reporting from scratch As awesome of developers as we all are, errors are bound to crop up in our apps. React Router allows us to be notified of these errors via a handleError function but what exactly can you do here? That's what my latest post covers. I'll teach you how to use source maps to pinpoint the source code where an error is coming from so you can jump on bugs faster. Check it out below. React Router error reporting from scratch. Currently...
React Router Tip Debounce Requests in React Router v7 Have you ever implemented a search input filter for table or grid of data in your app that needs to initiate fetching new, filtered, data? If you want to initiate the requests as the user changes the filter value without having to manually click a submit button you likely want to debounce those requests. Do you use a debounce hook and resort to useEffect to kick of requests?? No! There's a much easier way that doesn't involve adding a...