Errors Tab

The errors tab is a powerful tool for debugging issues with your react code, namely invalid HTML. It helps you detect potential HTML issues in your code, such as invalid HTML nesting or hydration issues.

​

Invalid HTML

If you have invalidely nested HTML (eg. a div inside a p), you will see an error in the errors tab. These kind of nesting issues can cause unexpected behavior in your application, namely hydration issues. The browser does a lot of work to make sure that the HTML you send to the client is valid so it can sometimes move the order of elements around to make sure it's valid. This can cause unexpected hydration issues in your application.

Whenever there is a case of this found in your html the errors tab will show you the error and the file where the error is found. If the error is found in a file that is a part of your project you can click on the file name to open the file in your editor and change the issue right away.

​

Hydration Mismatch

Hydration mismatch is a common issue in React applications. It occurs when the server-rendered HTML does not match the HTML generated by the client. This can cause unexpected behavior in your application, such as the loss of user input or the loss of scroll position. In Remix it can also cause FOUC (Flash of Unstyled Content).

To avoid hydration mismatch, you should make sure that the HTML generated by the server matches the HTML generated by the client.

These kind of issues are very hard to track down because they can be caused by a lot of different things.

If a hydration mismatch happens the errors tab will show you the diff between the server and client HTML, allowing you to analyze the differences and fix the issue.