Help improving Brave compatibility with my web app

Hello everybody.
I am a web app developer that maintains and develops new features on a time tracking app for company employees.

Recently I migrated some of functionality to Vue components. In order to integrate with the current, pretty old, architecture, I simply output following tags in server’s HTML response:

<!-- <Widget:{$widgetInfo['component_name']}> -->
<script type="application/javascript">console.debug('[PontApp.WidgetManager] Injecting {$widgetInfo['vue_component']}...', JSON.parse('{$widgetInfoJson}'))</script>
<div data-widget="{$widgetInfo['component_name']}">{$widgetInfo['html']}</div>
<!-- AdBlock checker: notify user if script was not loaded successfully -->
<script src="{$widgetInfo['js']}" type="application/javascript" onerror="window.handleScriptLoadError(this)"></script>
<!-- </Widget:{$widgetInfo['component_name']}> -->

This code injects component’s HTML tag, then the component’s root script.

The main problem is on pages where I load widgets that are related to time tracking, as they are named accordingly:

  • tracker-pause
  • tracker-control
  • tracker-history

There are a pretty large number of people that starts using this browser and I received many complains, as Brave (and other adblock tool) blocks these scripts for loading. I managed to make a work around for plugins that rejects scripts, but Brave does not throw any error at all.

I’d like to show up a pop-up telling users that our web app is currently incompatible with adblocking technologies and those blocked functionality does not harm users at all. Except of this detection script and adblock detection libraries, is there anything else we can do to prevent a blank page showing up for Brave users? I’d love too have something clean rather than hacky.

Thanks in advance for your time.
