I'm trying to understand how you are supposed to use Gutenberg in general, but this is my problem.

I have a UI built on the admin side using the "edit" function. This UI allows you to change block settings, and I store the changes in an attribute as JSON data.

On the front end I render things based on how you wanted them to look in the UI using that JSON data.

Here's my problem, this works the first time around. If you create the block, change nothing about it and press save everything's good to go front end and back end.

However once you change anything the block breaks showing this message: The block has encountered an error and can not be previewed.

How am I supposed to put new data on the front side, if any changes break the block? I've isolated it to the save function, if I remove my front end logic and make the save function return a blank Div I'm fine.

Edit: Here is my front end save function:

export default function save( { attributes, className } ) {
let compositionData = JSON.parse(attributespositionData);
return (
    <div class='FM_Composition'>
        <div class="FM_Data" style="display: none;">
            <pre>
                <code>{ JSON.stringify(compositionData, null, 2) }</code>
            </pre>
        </div>
    </div>
);
}