Skip to main content

Error

You can subscribe to runtime errors similar to other action types. Error actions might occur asynchronously after actions are dispatched, so it’s a good idea to subscribe to app errors. Errors will be thrown in the console if there isn't an error handler defined.

Anchor to SetupSetup

Create an app and import the Error module from @shopify/app-bridge/actions. Note that we'll be referring to this sample application throughout the examples below.

Note

In the following example, config is a valid App Bridge configuration object. Learn more about configuring App Bridge.

import createApp from '@shopify/app-bridge';
import {Error} from '@shopify/app-bridge/actions';

const app = createApp(config);

Anchor to Subscribe to all errors through the appSubscribe to all errors through the app

Call the app.error method to subscribe to all errors including those that are caused by actions. Calling app.error returns a method that you can call to unsubscribe from all errors:

const unsubscribe = app.error((data) => {
// type will be the error type
// action will contain the original action including its id
// message will contain additional hints on how to fix the error
const {type, action, message} = data;
// Handle all errors here
switch(type) {
case Error.Action.INVALID_PAYLOAD:
//Do something with the error
break;
}
}
});

// Unsubscribe from all errors
unsubscribe();

Anchor to Subscribe to specific errorsSubscribe to specific errors

You can call app.subscribe with a specific error type to subscribe only to that error type:

const unsubscribe = app.subscribe(Error.Action.INVALID_ACTION, (data) => {
// Do something with the error
});

// Unsubscribe from the error
unsubscribe();

Anchor to Subscribe to all errors for an action setSubscribe to all errors for an action set

Call the error method on any action set to subscribe to all errors that are related to that action set:

import {Modal} from '@shopify/app-bridge/actions';

const modalOptions = {
message: 'Hello World',
};
const modal = Modal.create(app, modalOptions);

const unsubscribe = modal.error((data) => {
// type will be the error type
// action will contain the original action including its id
// message will contain additional hints on how to fix the error
const {type, action, message} = data;
// Handle all errors here
switch(type) {
case Error.Action.UNEXPECTED_ACTION:
//Do something with the error
break;
}
}
});

// Trigger an UNEXPECTED_ACTION error by updating a modal that is not opened
modal.set({title: 'Greeting'});

// Unsubscribe from all errors related to this flash
unsubscribe();

Anchor to Subscribe to a specific error for an action setSubscribe to a specific error for an action set

import {Modal} from '@shopify/app-bridge/actions';

const modalOptions = {
message: 'Hello World',
};
const modal = Modal.create(app, modalOptions);

const unsubscribe = modal.subscribe(Error.Action.UNEXPECTED_ACTION, (data) => {
// type will be the error type
// action will contain the original action including its id
// message will contain additional hints on how to fix the error
const {type, action, message} = data;
// Handle the error here
}
});

// Trigger an UNEXPECTED_ACTION error by updating a modal that is not opened
modal.set({title: 'Greeting'});

// Unsubscribe from UNEXPECTED_ACTION errors related to this flash
unsubscribe();
Was this page helpful?