Skip to main content

Error handling

You can use standard web techniques to handle errors in checkout UI extensions but you may need to account for how they run inside of a Web Worker.

Anchor to handling-any-errorHandling any error

Add an unhandledrejection listener for promise rejections or an error listener for other exceptions like Javascript runtime errors or failures to load a resource.

Handling any error

// For unhandled promise rejections
self.addEventListener(
'unhandledrejection',
(error) => {
console.warn(
'event unhandledrejection',
error,
);
},
);

// For other exceptions
self.addEventListener('error', (error) => {
console.warn('event error', error);
});

Anchor to third-party-librariesThird party libraries

You can use error reporting libraries like Sentry. However, they might require extra configuration because UI extensions run inside of a Web Worker. You should also consider using source maps to help debug errors.

Tip

You must request network access to transmit errors to a third party service.

Anchor to sentrySentry

Install and initialize Sentry following their Browser JavaScript guide. We recommend disabling the default integrations to be sure it will run within a Web Worker. You'll need to add event listeners manually.

Sentry

import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import * as Sentry from '@sentry/browser';

Sentry.init({
dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
defaultIntegrations: false,
});

self.addEventListener(
'unhandledrejection',
(error) => {
Sentry.captureException(error);
},
);

self.addEventListener('error', (error) => {
Sentry.captureException(error);
});

// Your normal extension code.
export default function extension() {
render(<Extension />, document.body);
}

function Extension() {
return <s-banner>Your extension</s-banner>;
}