Is it possible to capture ExtensionUsageError in extensions?

Extensions
,
1

Is it possible to capture ExtensionUsageError in extensions?

For example I can generate this error

In en.default.json:
{
  "foobar": "{{foo}} {{bar}}"
}

Then in my code:

const translate = useTranslate();
translate("foobar", { bar: "bar" });

ExtensionUsageError: translate(): MISSING PLACEHOLDER for locale “en”: “{{foo}}” not found in “foobar”

To capture errors with Sentry

// https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/error-handling#sentry

Sentry.init({
  dsn: 'https://xxxxxxx@o0.ingest.sentry.io/yyyyyyy',
});


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

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

export default reactExtension('customer-account.page.render', () => (
  <App></App>
));

I can capture unhandled errors thrown by my code, but I can’t seem to capture ExtensionUsageError. Would be very useful to catch missing translations for example.

2

Hi!

Thanks for reaching out. When translation errors like this occur, we do not throw an error. Instead we log the message you see to the console to notify the developer of the issue.

This is intentional, to prevent crashing the entire extension in production when a translation error occurs.

Since we do not throw an error in these cases, it does not bubble up and will not be caught by error tracking services like Sentry.