<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M74D8PB" height="0" width="0" style="display:none;visibility:hidden">
Loading
Skip to NavigationSkip to Main Content
Add a Custom Error Message for "Load failed" and "Failed to fetch" in the Okta Widget
SDKs & Libraries
Okta Classic Engine
Okta Identity Engine
Overview

This article discusses how to supply a custom error message for errors:

  • Load failed
  • Failed to fetch

"Load failed" error

Applies To
  • Okta Widget
    • embedded
    • custom domain
  • Widget Configuration
Cause

When network errors occur during login, the Okta Widget will display the error message returned from the Fetch client. 
Often, a catch-all generic error message of either "Load failed" or "Failed to fetch" will be returned.
These types of network errors are outside the widget’s control, and the exact message returned from the Fetch client will be displayed.

Solution

There are no i18n property keys for these errors.

Both Load failed and Failed to fetch can be customized using the afterError handler available in the widget.

NOTE: If multiple languages are supported, the below code will need to check the browser's language and set 'error.xhr.responseJSON.errorSummary' accordingly.

widget.on('afterError', (_context, error) => {
    if (error.errorSummary === 'Failed to fetch' || error.errorSummary === 'Load failed') {
        error.xhr.responseJSON.errorSummary = 'Please Check your Network Connection and try again';
    } 
});

Custom Error Message

Loading
Add a Custom Error Message for "Load failed" and "Failed to fetch" in the Okta Widget