Documentation
  • Documentation
  • Development
    • Quickstart
    • Initialization
    • Embedding
    • Pages
    • Forms: Sending Data
    • Datasources: Fetching Data
    • Mapping Data
    • Custom event listeners
    • URL Parameters
    • Handling Errors
    • Security
    • Nesting Components
  • 3rd-Party Integrations
    • reCAPTCHA
    • Stripe
Powered by GitBook
On this page
  1. Development

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>
PreviousURL ParametersNextSecurity

Last updated 6 years ago