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 Untangling dialogs in React Router I have been struggling with determining how to best implement dialogs in React Router apps for years: useState to control their open state Forms vs fetchers for data submissions resource routes to form data(<select> options) useEffect for listening for the action data to close the dialog useEffect for listing for a toast message There's a lot to consider. However, tons of these problems go away if you move dialogs into their own dedicated...
React Router Guide Contributing Callsite Revalidation Opt-out to React Router If you’ve used React Router’s data APIs, you’ve probably noticed it revalidates all your loaders after mutations, even when you know that’s completely unnecessary. I got tired of implementing shouldRevalidate functions that ended up feeling really awkward. I found an old proposal from Ryan Florence in GitHub, and decided to take a crack at implementing it myself. A few months and one merged PR later, it shipped in...
React Router Guide How to execute api requests in React Router There's not a lot of opinions on how to structure code that interacts with apis in React Router apps. This is what I've come up with and the post I wish existed before I started using React Router's actions/loaders with my existing api(and if middleware existed back then). Check out the article here. Have a great Tuesday ✌️ Unsubscribe · Preferences