Is there any way to check & load custom code(javascript) if my plugin code fails to load due to any reason?

Technical Questions
1

Is there any way to check & load custom code(javascript) if my plugin code fails to load due to any reason?

2

Hello Soumya,

Could you please provide more context about the issue and the requirements? Thank you.

3

Like if i have created a plugin, lets say abc.plugin.js, and i want to execute some tracking/other code if the abc.plugin.js file doesn’t get loaded or throws an error.

4

Hello @soumya,

To ensure that your custom plugin (abc.plugin.js ) can handle errors such as failing to load, you can implement a robust error-handling mechanism. The following steps outline a method to check and load custom fallback code if the main plugin fails to load.

Error Handling with Dynamic Script Loading in JSX

You can use dynamic script loading in JavaScript to handle errors and load fallback scripts if necessary.

function loadScript(src, onError) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = resolve;
    script.onerror = () => {
      if (onError) onError();
      reject(new Error(`Failed to load script ${src}`));
    };
    document.head.appendChild(script);
  });
}

Handle Loading and Fallback Mechanism
You can use the loadScript function to attempt to load your main plugin script and then load a fallback script if the main script fails.

function loadScriptWithFallback(src, fallbackSrc) {
  return loadScript(src, () => {
    console.log('Primary script failed to load. Loading fallback script.');
    // Attempt to load a fallback script
    loadScript(fallbackSrc)
      .then(() => console.log('Fallback script loaded successfully.'))
      .catch((error) => console.error('Fallback script also failed to load.', error));
  });
}

// Usage
loadScriptWithFallback('path/to/abc.plugin.js', 'path/to/fallback.js');

Example Implementation: JSX Plugin Registration with Fallback

Here is how you can use the above approach in the context of JSX with @emotion/core and Builder components:

/** @jsx jsx */
import { jsx } from '@emotion/core';
import { Builder } from '@builder.io/react';
import ReactQuill from 'react-quill';

// Define the RichTextEditor component
function RichTextEditor(props) {
  return (
    <ReactQuill value={props.value} onChange={props.onChange} />
  );
}

// Register the editor component
Builder.registerEditor({
  name: 'MyText',
  component: RichTextEditor
});

// Function to load the primary and fallback script
function loadScript(src, onError) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = resolve;
    script.onerror = () => {
      if (onError) onError();
      reject(new Error(`Failed to load script ${src}`));
    };
    document.head.appendChild(script);
  });
}

function loadScriptWithFallback(src, fallbackSrc) {
  return loadScript(src, () => {
    console.error('Primary script failed to load. Loading fallback script.');
    loadScript(fallbackSrc)
      .then(() => console.info('Fallback script loaded successfully.'))
      .catch((error) => console.error('Fallback script also failed to load.', error));
  });
}

// Try loading the primary script and fall back if errors occur
loadScriptWithFallback('path/to/abc.plugin.js', 'path/to/fallback.js');

For more in-depth guides on error handling and dynamic imports, you can refer to the provided links: