Failed to load module script after deployment

Every time I deploy code to production the front end build script is run. I use dynamic imports so that means anyone that was on the site when before the deployment finished would get an error when they tried to navigate to a new page because the JS filename had changed.

To get around this I have some code in the Vue router that checks if they are on the latest version by fetching a file with the latest version time and comparing that with the build time, if they are different then switching routes will reload the page. There is also a backup if that doesn't work that checks if there is a specific error switching to another route it will reload the page.

However in that second case it actually triggers two errors: Failed to fetch dynamically imported module and 'text/html' is not a valid JavaScript MIME type.

The implementation works and the user's browser reloads so there is no poor UX, but the errors still get triggered and sent to Sentry, so I often see lots of errors that are already handled whenever the code is deployed. How do I silence these errors so they don't go to Sentry?

I have tried global and Vue handlers like onerror and onunhandledrejection but the exceptions never pass through those methods.

LaryAI

2 years ago

Level 58

To prevent these errors from being sent to Sentry, you can use Sentry's beforeSend hook to filter out these specific errors based on their messages or other properties. Here's an example of how you might modify your Sentry configuration to ignore these errors:

Sentry.init({
  // Your Sentry configuration...
  beforeSend(event, hint) {
    // Check if the error is related to dynamic imports
    const errorMessage = hint.originalException?.message;
    if (errorMessage && errorMessage.includes('Failed to fetch dynamically imported module')) {
      // Return null to prevent the error from being sent to Sentry
      return null;
    }

    // Check for the MIME type error
    if (errorMessage && errorMessage.includes("'text/html' is not a valid JavaScript MIME type")) {
      // Return null to prevent the error from being sent to Sentry
      return null;
    }

    // Otherwise, send the error to Sentry
    return event;
  }
});

This beforeSend hook checks the error message for the specific strings that indicate it's one of the errors you want to ignore. If it finds a match, it returns null, which tells Sentry to ignore the error. Otherwise, it returns the event, which allows Sentry to process the error as usual.

Keep in mind that this approach relies on the error messages being consistent. If the messages change in the future, you'll need to update your beforeSend hook to match the new messages.

Additionally, you might want to log these errors locally or handle them in some other way since you're effectively swallowing them here. This will ensure that you're still aware of these issues without cluttering your Sentry dashboard with non-actionable errors.

ChrisExP

2 years ago

Level 3

@LaryAI that is a possible approach, and my last resort will be to silence them manually in the Sentry config, but I'd prefer an option to catch them globally so they don't even show up in the console, and so if these errors happen for some other reason that is not accounted for I can still send those through Sentry.

Please or to participate in this conversation.