Error Handling in React Embedded signing

We are not getting any event if below reason -

1. Presigned url expired2. Already used url3. Error in load docusign bundle script4. Any network issue in connectivity5. Wrong integration key or expired key6. Amy issue in mount docusign

How I integrated  in React js application -
 

/* istanbul ignore file */
// Unpublished Work © 2024 Deere & Company.

import React, {useEffect} from 'react';
import PropTypes from 'prop-types';
import './docu_sign.css';
import Script from 'react-load-script';
import {useState} from '@types/react';

const timeoutMs = 15000;
const docusignBundle = "https://js-d.docusign.com/bundle.js";

function DocuSignUi({integrationKey, docUrl}) {
    console.log('docUrl', docUrl);

    const [isScriptLoaded, setScriptLoaded] = useState(false);

    const loadDocuSign = async () => {
        const docusign = await window.DocuSign.loadDocuSign(integrationKey);
        const url = `${docUrl}&output=embed`;

        const signing = docusign.signing({
            url,
            displayFormat: 'focused',
            style: {

                /** High-level variables that mirror our existing branding APIs. Reusing the branding name here for familiarity. */
                branding: {
                    primaryButton: {
                        /** Background color of primary button */
                        backgroundColor: '#FFDE00',
                        /** Text color of primary button */
                        color: '#000000'
                    }
                },

                /** High-level components we allow specific overrides for */
                signingNavigationButton: {
                    finishText: 'Accept and E-sign',
                    /** 'bottom-left'|'bottom-center'|'bottom-right',  default: bottom-right */
                    position: 'bottom-left'
                }
            }
        });

        signing.on('ready', (event) => {
            console.log('ready event', event);

            localStorage.setItem('isPageLoaded', 'true');
        });

        signing.on('sessionEnd', (event) => {
            console.log('sessionend event', event);
            if (event.sessionEndType === 'signing_complete') {
                console.log('signing_complete', event);
                docuSignUpdate(false, true);
            } else if (event.sessionEndType === 'decline') {
                console.log('decline', event);
            } else {
                // Other events
            }
        });

        signing.mount('#agreement');
    };

    useEffect(() => {
        console.log('DOCUSIGN RENDER');
        localStorage.setItem('isPageLoaded', 'false');
        loadDocuSign();
    }, []);

    setTimeout(() => {
        console.log('Status after 15 seconds ', localStorage.getItem('isPageLoaded'));

        if (localStorage.getItem('isPageLoaded') !== 'true') {
            clearTimeout();
            //Error in docusign pae loading,
            /*
               reason may be -
               1. Presigned url expired
               2. Already used url
               3. Error in load docusign bundle script
               4. Any network issue in connectivity
               5. Wrong integration key or expired key
             */
        }
    }, timeoutMs);

    return (
        <>
            <Script
                onCreate={() => console.log('script onCreate')}
                onError={() => console.log('script onError')}
                onLoad={() => setScriptLoaded(true)}
                url={docusignBundle}
            />

            {isScriptLoaded && <div
                className="docusign-agreement"
                data-testid="agreement"
                id="agreement"
            />}
        </>
    );
}

DocuSignUi.propTypes = {
    docuSignUpdate: PropTypes.func.isRequired,
    docUrl: PropTypes.string.isRequired,
    integrationKey: PropTypes.string.isRequired
};

export default DocuSignUi;

I can reproduce you issue, I find the root cause is limit by CORS setting. when the redirect url is not set in frameAncestors, the redirect url will deny to access when all parameters are correct for :{{baseUrl}}/v2.1/accounts/{{accountId}}/envelopes/{{envelopeId}}/views/recipient. when one of the parameter is not correct, so there are no correct frameAncestors, all is deny. so the exception can’t catch.

FreeLink/甫连信息
🌍 DocuSign Partner | Partner Profile
🏆 2024 APAC Reseller Growth Partner of the Year
🔧 First globally to pass DocuSign eSignature Technical Consultant certification
🚀 Expertise in DocuSign integrations with in-house systems for leading enterprises across various industries.

Feel free to reach out for collaboration opportunities.