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.
Setup
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.
import createApp from '@shopify/app-bridge';
import {Error} from '@shopify/app-bridge/actions';
const app = createApp({
apiKey: '12345',
shopOrigin: shopOrigin,
});
Subscribe 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();
Subscribe 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();
Subscribe 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();
Subscribe 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();