Developer Mode

Display Vite-Like errors in weblabs

From version 0.2.8-beta, weblabs supports debugging logs simillar to what vite shows for react. This is still under development and can cause issues.

DebugRender()

The new DebugRender() function is same as the render() function of WebLabs, what it does is intercepts all the errors of a specific application instance and reports them on a modal on the screen. It includes the error name and stack trace.

Example:

import { DebugRender } from "@weblabsjs/core/util";
import { div } from "@weblabsjs/core/components";

function App() {

	return div(

		"Hello World",
		intentional_error

	) //intentional error here

}

DebugRender("app", App) //instead of render()

The error which will be reported will look somewhat like this:

Error at - WebLabs@vite + tailwindcss, font Poppins

If you have noticed, the DebugRender() function does not rakes WebLabsElement, but a function that returns WebLabsElement.

It is to be noted that the error message will look different depending on the font used, the css styles used and as such. It does not have a pre-defined font style, and does not imports any assests. It is also available in CDN