Handling Errors

Provide feedback to your users when something goes wrong.
In order to display an error to your user, your server may respond with a 4xx or 5xx HTTP response code, and an application/json payload containing an error.
To display a single error message to your user, respond with a payload in the following format
error: 'An error message',
If your server does respond with an error payload, a generic error message will be displayed. To perform your own error handling, or provide a custom error message, you may provide an onError callback function to your feature.
import React from 'react';
import { Canvas } from '@mason-api/react-sdk';
class MyRegister extends React.Component {
render() {
return <Canvas id="YOUR_COMPONENT_ID" onError={(response) => {
let error = '';
for (const key in response) {
error += response[key] + '\n';
return error;
}} />;

Handling Errors in HTML

Handle errors in HTML by subscribing to the mason.error event.
<mason-canvas id="register" data-id="YOUR_COMPONENT_ID"></mason-canvas>
<script type="text/javascript">
const registerNode = document.getElementById('register');
registerNode.addEventListener('mason.error', function(event) {
const error = event.detail;
//do something with error