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();