How to implement error handling in forms?

Plasmic Studio Questions
1

I am running into issues with trying to implement error handling on a form built in Plasmic Studio. Is there a specific way we need to address error handling because the form was built in Plasmic studio then pushed to GitLab, then pulled into VSCode?

2

We’re working on deep form support, but for now the best way to handle errors is via code components - we have an example here of one way to interface with form elements:

https://github.com/plasmicapp/plasmic/tree/master/examples/dynamic-multistep-forms

3

@yang Trial One with try catch block
function Dba_(props: DbaProps, ref: HTMLElementRefOf<‘div’>) {
// Use PlasmicDba to render this component as it was
// designed in Plasmic, by activating the appropriate variants,
// attaching the appropriate event handlers, etc. You
// can also install whatever React hooks you need here to manage state or
// fetch data.
//
// Props you can pass into PlasmicDba are:
// 1. Variants you want to activate,
// 2. Contents for slots you want to fill,
// 3. Overrides for any named node in the component to attach behavior and data,
// 4. Props to set on the root node.
//
// By default, we are just piping all DbaProps here, but feel free
// to do whatever works for you.

const handleError = (e: any) => {
	const payload: ErrorPayload = {
		mid: '1111',
		message: 'error just occured',
		action: 'creating a file',
		componentName: 'dba',
		level: 'error',
		errorTime: new Date().toISOString(),
	};

	loggerService({ url: '<http://localhost:4000/logs>', payload });
};

try {
	return <PlasmicDba root={{ ref }} {...props} />;
} catch (error) {
	handleError(error);
	return null;
}

}

const Dba = React.forwardRef(Dba_);
export default Dba;

4

/ Trial two ErrorBoundary
function Dba_(props: DbaProps, ref: HTMLElementRefOf<‘div’>) {
// Use PlasmicDba to render this component as it was
// designed in Plasmic, by activating the appropriate variants,
// attaching the appropriate event handlers, etc. You
// can also install whatever React hooks you need here to manage state or
// fetch data.
//
// Props you can pass into PlasmicDba are:
// 1. Variants you want to activate,
// 2. Contents for slots you want to fill,
// 3. Overrides for any named node in the component to attach behavior and data,
// 4. Props to set on the root node.
//
// By default, we are just piping all DbaProps here, but feel free
// to do whatever works for you.

const handleError = (e: any) => {
	console.log(e);
	const payload: ErrorPayload = {
		mid: '1111',
		message: 'error just occured',
		action: 'creating a file',
		componentName: 'dba',
		level: 'error',
		errorTime: new Date().toISOString(),
	};

	loggerService({ url: '<http://localhost:4000/logs>', payload });
};

<PlasmicDba root={{ ref }} {…props} />;

}

const Dba = React.forwardRef(Dba_);
export default Dba;

5

// Trial three with onError handler on the component instance
function Dba_(props: DbaProps, ref: HTMLElementRefOf<‘div’>) {
// Use PlasmicDba to render this component as it was
// designed in Plasmic, by activating the appropriate variants,
// attaching the appropriate event handlers, etc. You
// can also install whatever React hooks you need here to manage state or
// fetch data.
//
// Props you can pass into PlasmicDba are:
// 1. Variants you want to activate,
// 2. Contents for slots you want to fill,
// 3. Overrides for any named node in the component to attach behavior and data,
// 4. Props to set on the root node.
//
// By default, we are just piping all DbaProps here, but feel free
// to do whatever works for you.

const handleError = (e: any) => {
	const payload: ErrorPayload = {
		mid: '1111',
		message: 'error just occured',
		action: 'creating a file',
		componentName: 'dba',
		level: 'error',
		errorTime: new Date().toISOString(),
	};

	loggerService({ url: '<http://localhost:4000/logs>', payload });
};

<PlasmicDba root={{ ref }} {…props} onError={handleError} />;

}

const Dba = React.forwardRef(Dba_);
export default Dba;

6

All of these approaches have failed.

7

do you know what the source of the error is?

8

@chungwu We are simulating an error by calling a string. We are trying to build frontend logging for the form we built in Plasmic studio. The goal is to increase frontend visibility and assist with debugging.

9

I meant - when is the error happening? Is it in an event handler or at render time? At render time, an error boundary would catch errors thrown during rendering, but from an event handler, it would have to be caught by the event handler