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
    });
</script>