At work, I've built a solution to display server-side errors on the client using the onRecoverableError callback from React 18.
I've extended that solution to display a diff on hydration errors based on this package, so thank you very much for sharing it.
A different approach I used was to format the HTML using prettier instead of beautify. I was getting a lot of false positives with beautify due to different things like HTML comments (<!--$-->), semicolons... So my diff was always huge. Using prettier, it's much smaller and there are only some false positives involving inline style attributes.
It might be good to explore this approach for the library itself. Here is a code snippet:
import prettier from 'prettier';
import parserHtml from 'prettier/parser-html';
const prettierHtmlOptions: prettier.Options = {
parser: 'html',
plugins: [parserHtml],
tabWidth: 2,
};
prettier.format(value, prettierHtmlOptions);
At work, I've built a solution to display server-side errors on the client using the
onRecoverableErrorcallback from React 18.I've extended that solution to display a diff on hydration errors based on this package, so thank you very much for sharing it.
A different approach I used was to format the HTML using
prettierinstead ofbeautify. I was getting a lot of false positives withbeautifydue to different things like HTML comments (<!--$-->), semicolons... So my diff was always huge. Usingprettier, it's much smaller and there are only some false positives involving inline style attributes.It might be good to explore this approach for the library itself. Here is a code snippet: