Odd Error Returned When Using Lightning Message Service in LWC - WindowMessengerNoConnectionError

Question

This is my first time using Lightning Message Service. I set it up following the directions on this standard documentation page. After setting this up I am able to communicate between two lightning web components on the same page. Everything is working as designed except in testing sometimes when I navigate to a different record page in a fresh tab I get an error Cannot send message with type: force-messageServiceWindowBridge/broadcastMessage because there is no WindowMessengerNoConnectionError() (screenshots below). Often I can refresh the page and I will not see the error again even if I open different records on the same tab.

My use case is I have a custom LWC data table on a work order that allows for inline editing and a few additional features. After certain actions the data table will publish a message letting another component on the page know to refresh its data. Again all of this is working as expected except for the sporadic error described above. I have pasted the relavant sections of the code below. Does anyone know what is causing this error?

Excerpt From the Component that Submits the Message

/* Import message Features */
    import { publish, MessageContext } from "lightning/messageService";
    import refreshProgressBars from "@salesforce/messageChannel/RefreshConfigurableProgressBars__c";

export default class workOrderItemsTable extends NavigationMixin(
  LightningElement
) {

  @wire(MessageContext)
  messageContext;

  handleRefreshProgressBars() {
    try {
      publish(this.messageContext, refreshProgressBars, {});
    } catch (error) {
      console.error("Error refreshing progress bars", error);
    }
  }

  handleCreateNewChild(event) {
    this.loading = false;
    this.openNewRecordModal = false;
    var numOfRecsToPull =
      this.records.length > 10 ? this.records.length + 20 : 10;
    getDataHelper.call(this, numOfRecsToPull, 0);

    this.handleRefreshProgressBars();
  }

}

Excerpt from the Component that Receives the Event

import {
  subscribe,
  unsubscribe,
  MessageContext
} from "lightning/messageService";
import refreshProgressBars from "@salesforce/messageChannel/RefreshConfigurableProgressBars__c";
export default class ConfigurableProgressBar extends LightningElement {
  subscription = null;

@wire(MessageContext)
  messageContext;

  connectedCallback() {
    if (!this.subscription) {
      this.subscription = subscribe(
        this.messageContext,
        refreshProgressBars,
        message => this.handleRefresh(message)
      );
    }
  }

  disconnectedCallback() {
    unsubscribe(this.subscription);
    this.subscription = null;
  }

  handleRefresh() {
    this.loading = true;
    console.log("refresh progress bars in component");
    refreshApex(this.valueResult)
      .then(result => {
        this.loading = false;
      })
      .catch(error => {
        this.loading = false;
        this.handleError("Error refreshing progress bar", error);
      });
  }
}