Merge pull request #41 from IanVS/script-error

Author: marsidev

docs/props.mdx

@@ -56,3 +56,4 @@ These are the props you can pass to the `Turnstile` component.
 | `async`              | boolean  | `true`                      | Define if set the injected script as async.  This option has no effect if `injectScript` is set to false.             |
 | `appendTo`           | string   | `'head'`                    | Define if inject the script in the head or in the body.  This option has no effect if `injectScript` is set to false. |
 | `onLoadCallbackName` | string   | `'onloadTurnstileCallback'` | Custom name of the onload callback.  This option has no effect if `injectScript` is set to false.                     |
+| `onError`            | function | `undefined`                 | Callback invoked when script fails to load (e.g. Cloudflare has an outage).                                           |

packages/lib/src/types.ts

@@ -266,6 +266,11 @@ interface ScriptOptions {
 	 * @default `onloadTurnstileCallback`
 	 */
 	onLoadCallbackName?: string
+
+	/**
+	 * Callback invoked when script fails to load (e.g. Cloudflare has an outage).
+	 */
+	onError?: () => void
 }
 
 /** `<Turnstile />` component props */

packages/lib/src/utils.ts

@@ -22,7 +22,7 @@ export const checkElementExistence = (id: string) => !!document.getElementById(i
 export const injectTurnstileScript = ({
 	render = 'explicit',
 	onLoadCallbackName = DEFAULT_ONLOAD_NAME,
-	scriptOptions: { nonce = '', defer = true, async = true, id = '', appendTo } = {}
+	scriptOptions: { nonce = '', defer = true, async = true, id = '', appendTo, onError } = {}
 }: InjectTurnstileScriptParams) => {
 	const scriptId = id || DEFAULT_SCRIPT_ID
 
@@ -47,6 +47,10 @@ export const injectTurnstileScript = ({
 		script.nonce = nonce
 	}
 
+	if (onError) {
+		script.onerror = onError
+	}
+
 	const parentEl = appendTo === 'body' ? document.body : document.getElementsByTagName('head')[0]
 
 	parentEl!.appendChild(script)