Mistake in Sentry documentation

[edhgoose]

Please list the package(s) involved in the issue, and include the version you are using

checkout-ui-extensions

Describe the bug

In the documentation for Sentry: https://shopify.dev/docs/api/checkout-ui-extensions/unstable/error-handling#sentry, the following code snippet is defined:

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

But, as per typescript, reason doesn't exist on error:

Neither does it say so on MDN: https://developer.mozilla.org/en-US/docs/Web/API/ErrorEvent

This suggests that either the type is wrong (perhaps I've got the wrong ErrorEvent somehow?) or that the documentation is wrong.

Given the documentation above it does have an error.reason, I'm led to believe this is a copy paste mistake from above.

Steps to reproduce the behavior:

1. Add the code from the link above into your project.
2. Confirm that Typescript complains about an error.

Expected behavior

Correct documentation on how to capture error messages, and a recommendation on how to ensure that the right stack trace is captured.

I think this is right?

self.addEventListener('error', (error) => {
    let err = error.error;

    if ( ! (err instanceof Error)) {
        err = new Error(error.message);
    }
   
    Sentry.captureException(err);
});

Screenshots

Additional context

I'm raising this issue because we're finding we're getting unexpected errors. The errors don't have an obvious stack trace so they're very difficult to diagnose.

#2198 would be hugely beneficial too.

[edhgoose]

As requested in #2521, I have re-raised this issue as: https://community.shopify.dev/t/bug-mistake-in-sentry-documentation/6395