Oh no!

{"type":"doc","content":[{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"As I’m planning to work on other Remix projects in the future, I wanted to write this blog post as guide for myself. The goal of this blog post is to cover error handling and tracking, so that if you follow it from the beginning to the end, your errors will give a good experience to the users and you will learn from the errors. It’s a work in progress and I’ll be updating it as I learn new things."}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null}},{"type":"heading","attrs":{"dir":null,"ignoreBidiAutoUpdate":null,"level":2},"content":[{"type":"text","text":"Getting Started"}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"Before diving into the nitty-gritty details of error handling in Remix, it's important to note that this guide assumes you have a general understanding of errors and are using the latest Remix features, specifically v2_errorBoundary. If you're not already familiar with error boundaries, I highly recommend checking out the "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://remix.run/docs/en/main/route/error-boundary-v2","target":null,"auto":false}}],"text":"Remix documentation"},{"type":"text","text":" for more information."}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null}},{"type":"heading","attrs":{"dir":null,"ignoreBidiAutoUpdate":null,"level":2},"content":[{"type":"text","text":"TLDR:"}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"Here is what this article covers in short:"}]},{"type":"bulletList","attrs":{"dir":"ltr","ignoreBidiAutoUpdate":null},"content":[{"type":"listItem","attrs":{"closed":false,"nested":false},"content":[{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"Define a 404 page: One of the most common errors in all web page applications is the 404 Not Found error. To handle this error in Remix, you'll need to create a new file "},{"type":"text","marks":[{"type":"code"}],"text":"$.tsx"},{"type":"text","text":" at the root of your routes folder and respond with 404 in a loader. Then, define your page using a simple component to show the error. Don’t track 404s."}]}]},{"type":"listItem","attrs":{"closed":false,"nested":false},"content":[{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"Define a Root Error Boundary: This is a last resort error boundary that will be triggered for errors when no other error boundaries exist. Track those errors."}]}]},{"type":"listItem","attrs":{"closed":false,"nested":false},"content":[{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"Customize "},{"type":"text","marks":[{"type":"code"}],"text":"handleError"},{"type":"text","text":": Remix defines "},{"type":"text","marks":[{"type":"code"}],"text":"handleError"},{"type":"text","text":" by default to simply forward the error to "},{"type":"text","marks":[{"type":"code"}],"text":"console.log"},{"type":"text","text":". To customize how errors are handled, you can export your own "},{"type":"text","marks":[{"type":"code"}],"text":"handleError"},{"type":"text","text":" function in "},{"type":"text","marks":[{"type":"code"}],"text":"entry.server.ts"},{"type":"text","text":". "}]}]},{"type":"listItem","attrs":{"closed":false,"nested":false},"content":[{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"Track errors: Consider using an error tracking service like Sentry to track errors in your Remix project."}]}]},{"type":"listItem","attrs":{"closed":false,"nested":false},"content":[{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"Provide clear feedback: Whenever you show an error, give your users guidance on what went wrong and how to resolve it. Don't just show \"Something went wrong.\" Instead, show something like \"Page Not Found. Go Home.\""}]}]}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null}},{"type":"heading","attrs":{"dir":null,"ignoreBidiAutoUpdate":null,"level":2},"content":[{"type":"text","text":"Define 404"}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"First let’s cover one of the most common errors in all web page applications, 404 Not Found."}]},{"type":"paragraph","attrs":{"dir":"ltr","ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"There are a couple of things you need to do:"}]},{"type":"bulletList","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"listItem","attrs":{"closed":false,"nested":false},"content":[{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"Create a new file "},{"type":"text","marks":[{"type":"code"}],"text":"$.tsx"},{"type":"text","text":" at the root of your routes folder This is effectively a catch-all for URLs that do not find their route."}]}]},{"type":"listItem","attrs":{"closed":false,"nested":false},"content":[{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"Respond with 404 in a loader Remix doesn’t know yet that you are using this catch-all route to handle 404 errors, so it won’t respond with http status code of 404 as search engines would expect. So add a loader and respond with 404."}]}]}]},{"type":"codeBlock","attrs":{"dir":"ltr","ignoreBidiAutoUpdate":null,"language":"tsx","wrap":false},"content":[{"type":"text","text":"export function loader() {\n return new Response(\"Not Found\", {\n status: 404,\n });\n}\n"}]},{"type":"bulletList","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"listItem","attrs":{"closed":false,"nested":false},"content":[{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"Define Your Page: I’m using a simple component to show the error, but if you want you can make your page nicer."}]}]}]},{"type":"codeBlock","attrs":{"dir":"ltr","ignoreBidiAutoUpdate":null,"language":"tsx","wrap":false},"content":[{"type":"text","text":"export default function NotFoundPage() {\n return ;\n}"}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null}},{"type":"heading","attrs":{"dir":null,"ignoreBidiAutoUpdate":null,"level":2},"content":[{"type":"text","text":"Define Root Error Boundary"}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"This is a last resort error boundary and it will be triggered for errors when no other error boundaries exist. You should have more than just Root Error Boundary."}]},{"type":"codeBlock","attrs":{"dir":"ltr","ignoreBidiAutoUpdate":null,"language":"tsx","wrap":false},"content":[{"type":"text","text":"// root.tsx\nexport function ErrorBoundary() {\n const error = useRouteError();\n return (\n \n \n Oh no!\n \n \n \n \n {/* add the UI you want your users to see */}\n \n \n \n );\n}"}]},{"type":"callout","attrs":{"dir":null,"ignoreBidiAutoUpdate":null,"type":"info","emoji":"ℹ️"},"content":[{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"Use isRouteErrorResponse to check if it’s an HTTP Error response. You can use it to check error.status for example."}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null}},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"isRouteErrorResponse will return true for "},{"type":"text","marks":[{"type":"bold"}],"text":"Responses"},{"type":"text","text":" thrown in loaders and actions. Note how in our 404 page loader we are simply returning the response instead of throwing it?"}]}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null}},{"type":"heading","attrs":{"dir":null,"ignoreBidiAutoUpdate":null,"level":2},"content":[{"type":"text","text":"Handle Other Errors"}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"There has been a lot written about how and where to put other error boundaries, so I'll keep this light. But my rule of thumbs are: "}]},{"type":"bulletList","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"listItem","attrs":{"closed":false,"nested":false},"content":[{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"You don’t need ErrorBoundary for every scenario"}]}]},{"type":"listItem","attrs":{"closed":false,"nested":false},"content":[{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"Wherever you define "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" , you should likely define the boundary"}]}]}]},{"type":"callout","attrs":{"dir":null,"ignoreBidiAutoUpdate":null,"type":"info","emoji":"ℹ️"},"content":[{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"Keep in mind that ErrorBoundary will be rendered on the server only if there is a "},{"type":"text","marks":[{"type":"bold"}],"text":"loader"},{"type":"text","text":" error. If there is an "},{"type":"text","marks":[{"type":"bold"}],"text":"action"},{"type":"text","text":" error, then it is rendered on the client only. Why does this matter? If you are naively capturing and tracking errors in a boundary, you will need to implement some logic to determine the type of error."}]}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null}},{"type":"heading","attrs":{"dir":null,"ignoreBidiAutoUpdate":null,"level":3},"content":[{"type":"text","text":"Don't throw input errors"}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"First of all, you don’t want to handle input errors with an ErrorBoundary. You ideally want to handle them next to user’s input."}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"Secondly, throwing errors will trigger handleError and if you’ve set up tracking (as described below) you will get all of your input errors reported to your error tracking service. I promise you, you don’t need to know when somebody forgot to enter a valid email, and if you really need it, it should probably be part of analytics."}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null}},{"type":"heading","attrs":{"dir":null,"ignoreBidiAutoUpdate":null,"level":2},"content":[{"type":"text","text":"Track Errors"}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"Error tracking provides valuable insight into how users are interacting with the application, which helps developers improve the user experience and prioritize bug fixes. By tracking errors, you can also identify patterns and trends in errors, allowing for more efficient and effective debugging."}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"This is the "},{"type":"text","marks":[{"type":"bold"}],"text":"key to having a stable application."}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null}},{"type":"heading","attrs":{"dir":null,"ignoreBidiAutoUpdate":null,"level":3},"content":[{"type":"text","text":"Define HandleError"}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"Remix defines "},{"type":"text","marks":[{"type":"code"}],"text":"handleError"},{"type":"text","text":" by default to simply forward the error to "},{"type":"text","marks":[{"type":"code"}],"text":"console.log"},{"type":"text","text":". To customize how errors are logged/tracked, you can export your own "},{"type":"text","marks":[{"type":"code"}],"text":"handleError"},{"type":"text","text":" function in "},{"type":"text","marks":[{"type":"code"}],"text":"entry.server.ts"}]},{"type":"codeBlock","attrs":{"dir":"ltr","ignoreBidiAutoUpdate":null,"language":"tsx","wrap":false},"content":[{"type":"text","text":"export function handleError(\n error: unknown,\n { request, params, context }: DataFunctionArgs\n): void {\n // Track the error somehow\n console.log(error);\n}"}]},{"type":"callout","attrs":{"dir":null,"ignoreBidiAutoUpdate":null,"type":"info","emoji":"ℹ️"},"content":[{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"handleError"},{"type":"text","text":" is called whenever your server-side code throws an error, "},{"type":"text","marks":[{"type":"bold"}],"text":"including"},{"type":"text","text":" errors that are already handled with ErrorBoundary."}]}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null}},{"type":"heading","attrs":{"dir":null,"ignoreBidiAutoUpdate":null,"level":3},"content":[{"type":"text","text":"Extend Your Error Boundaries with Error Tracking"}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"One thing to keep in mind is that you can't just blindly track all errors in ErrorBoundaries. If you are using Sentry it's fairly simple to track errors at boundaries, you simply call "},{"type":"text","marks":[{"type":"code"}],"text":"captureRemixErrorBoundaryError"},{"type":"text","text":". But if you are not using Sentry, you will have to implement some logic, so your errors are not duplicate. For example, since "},{"type":"text","marks":[{"type":"code"}],"text":"handleError"},{"type":"text","text":" gets called for every error not matter the depth of the error boundary, you need some logic to exclude certain events."}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"I recommend you have a look at how Sentry deals with it in "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/getsentry/sentry-javascript/blob/540adac9ec81803f86a3a7f5b34ebbc1ad2a8d23/packages/remix/src/client/errors.tsx#L24","target":null,"auto":false}}],"text":"this piece of code"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null}},{"type":"heading","attrs":{"dir":null,"ignoreBidiAutoUpdate":null,"level":3},"content":[{"type":"text","text":"Tracking With Sentry"}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"If you are using Sentry, their "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://docs.sentry.io/platforms/javascript/guides/remix/","target":null,"auto":false}}],"text":"official guide "},{"type":"text","text":"will get you pretty far, but not quite to the finished integration. Here are the missing steps from Sentry’s integration:"}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null}},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Extend handleError so you keep logging errors"}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","marks":[{"type":"link","attrs":{"href":"https://docs.sentry.io/platforms/javascript/guides/remix/#v2-server-side-errors","target":null,"auto":false}}],"text":"Their docs"},{"type":"text","text":" don’t mention this, but basically the snippet in their docs does not include "},{"type":"text","marks":[{"type":"code"}],"text":"console.log"},{"type":"text","text":". This will affect both your "},{"type":"text","marks":[{"type":"bold"}],"text":"development "},{"type":"text","text":"and "},{"type":"text","marks":[{"type":"bold"}],"text":"production "},{"type":"text","text":"environment. Meaning your errors won't e logged and may go unnoticed by the team."}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"So don't forge to add "},{"type":"text","marks":[{"type":"code"}],"text":"console.log"},{"type":"text","text":" to "},{"type":"text","marks":[{"type":"code"}],"text":"handleError"},{"type":"text","text":" !"}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null}},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Fix Server Side Source Maps"}]},{"type":"callout","attrs":{"dir":null,"ignoreBidiAutoUpdate":null,"type":"error","emoji":"⚠️"},"content":[{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"Sentry Team is aware of the issue, you can check this"},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/getsentry/sentry-javascript/issues/5486#event-9938100443","target":null,"auto":false}}],"text":" GitHub issue"},{"type":"text","text":" to see if it was resolved already and skip this chapter."}]}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"If you follow the guide you will notice that you have to upload the source maps to Sentry, so you can see more than just minified stack trace. Their docs do a good job explaining how to set up the basics, and it works for client side errors."}]},{"type":"paragraph","attrs":{"dir":"ltr","ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"Since server has a separate bundle in Remix, it has a separate set of source maps as well, but their "},{"type":"text","marks":[{"type":"code"}],"text":"sentry-upload-sourcempas"},{"type":"text","text":" script "},{"type":"text","marks":[{"type":"bold"}],"text":"only uploads client side"},{"type":"text","text":" sourcemaps. The fix is quite easy:"}]},{"type":"bulletList","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"listItem","attrs":{"closed":false,"nested":false},"content":[{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"Enable sourcemap generation for your server side remix projects. If you’ve used indie stack this involves adding a "},{"type":"text","marks":[{"type":"code"}],"text":"--sourcemap"},{"type":"text","text":" flag the following 2 build scripts in package.json:"}]}]}]},{"type":"codeBlock","attrs":{"dir":"ltr","ignoreBidiAutoUpdate":null,"language":"tsx","wrap":false},"content":[{"type":"text","text":"\"build:remix\": \"remix build --sourcemap\",\n\"build:server\": \"esbuild --platform=node --sourcemap --format=cjs ./server.ts --outdir=build --bundle\","}]},{"type":"bulletList","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"listItem","attrs":{"closed":false,"nested":false},"content":[{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"Upload the server side sourcemaps immediately after "},{"type":"text","marks":[{"type":"code"}],"text":"sentry-upload-sourcemaps"},{"type":"text","text":" uploads the client side. For example:"}]}]}]},{"type":"codeBlock","attrs":{"dir":"ltr","ignoreBidiAutoUpdate":null,"language":"bash","wrap":false},"content":[{"type":"text","text":"yarn sentry-upload-sourcemaps --release $SENTRY_RELEASE\nyarn sentry-cli releases files \"$SENTRY_RELEASE\" upload-sourcemaps \\\n ./build \\\n --dist \"server\" \\\n --url-prefix '/usr/server/app/remix/build'"}]},{"type":"paragraph","attrs":{"dir":"ltr","ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"I am not sure "},{"type":"text","marks":[{"type":"code"}],"text":"--dist"},{"type":"text","text":" is required, but it works for me, so I’m keeping it for now. Note that due to the "},{"type":"text","marks":[{"type":"code"}],"text":"--dist"},{"type":"text","text":" flag you also need to update "},{"type":"text","marks":[{"type":"code"}],"text":"Sentry.init({ dist: 'server', ...})"}]},{"type":"bulletList","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"listItem","attrs":{"closed":false,"nested":false},"content":[{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"Remove the sourcemaps before shipping the production bundle. This is a security precaution."}]}]}]},{"type":"codeBlock","attrs":{"dir":"ltr","ignoreBidiAutoUpdate":null,"language":"bash","wrap":false},"content":[{"type":"text","text":"# Remove .map files\nfind ./public/build -type f -name '*.map' -delete && \\\nfind ./build -type f -name '*.map' -delete && \\\n\n# Strip sourcemap links from source files\nfind ./public/build -type f -name '*.js' -exec sed -i -e '/\\/\\/# sourceMappingURL.*/d' {} + && \\\nfind ./build -type f -name '*.js' -exec sed -i -e '/\\/\\/# sourceMappingURL.*/d' {} +"}]},{"type":"paragraph","attrs":{"dir":"ltr","ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"Notice how we strip source map links from source files? That’s because otherwise every time you open the dev tools, your browser will try to request those files, resulting in a bunch of not found errors. You don’t want to have your console polluted with warnings and you don’t want those errors reported in sentry."}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null}},{"type":"heading","attrs":{"dir":null,"ignoreBidiAutoUpdate":null,"level":2},"content":[{"type":"text","text":"A Piece of advice for UX"}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"Whenever you show an error give your users guidance on what went wrong and how to resolve it."}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"For example, don’t just show “Something went wrong”. Instead show something like: “Page Not Found. ”"}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"image","attrs":{"alt":"Error UX Suggestion. Always provide escape hatch.","crop":null,"height":null,"width":null,"rotate":null,"src":"https://otivdev.ams3.cdn.digitaloceanspaces.com/blogs/error_ux.png","title":"","fileName":null,"resizable":false}}]},{"type":"heading","attrs":{"dir":null,"ignoreBidiAutoUpdate":null,"level":2}},{"type":"heading","attrs":{"dir":null,"ignoreBidiAutoUpdate":null,"level":2},"content":[{"type":"text","text":"TaDa!"}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"If you've made it this far, hopefully your error handling is in a better shape now. If you have any suggestions let me know on "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://twitter.com/otivdev","target":null,"auto":false}}],"text":"Twitter"},{"type":"text","text":". Would love to learn from the community."}]},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null}},{"type":"paragraph","attrs":{"dir":null,"ignoreBidiAutoUpdate":null},"content":[{"type":"text","text":"And because I love learning from a community, I started a unique \"community driven\" newsletter. Join now below👇 or "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://otiv.dev/n/development-datapoints","target":null,"auto":false}}],"text":"learn more"},{"type":"text","text":"."}]}]}

Blog

Remix Error Handling Essentials

Product Prioritisation The Easy Way

Learn with other teams One Development Datapoint per week.

Recent Posts

T-Shirt Sizing: A Simple Model for Product Estimation and Sizing

Jira vs Notion: Which Project Management Tool is Right for You?

0.1 - Prioritisation Tools

Personal Tasks Automation with Notion and Slack

Why am I investing in the Remix framework?

6 Tips for Better Product

How to make world-class product decisions

Pick Your Prioritisation Weapon

What is Otiv.Dev

Learn with other teams
One Development Datapoint per week.