NGINX reverse proxy not loading assets, relative URLs on docker web app

I have multiple webapps running on a server on docker containers that are mapped to their own ports. I am trying to accomplish reverse proxy with NGINX so I don't have to go to http://hostname:4012 to get to the webapp, but rather http://hostname/metrics to get to the same page. Normally, a simple proxy_pass like so would get this to work:

location /metrics/ {
proxy_pass http://localhost:4012/;
}

That worked in the sense that it got to the index.html, but wouldn't load any of the scripts in the html. I fixed that in a hacky way by adding a sub_filter to create a base url in the html:

location /metrics/ {
            proxy_pass http://localhost:4012/;
            sub_filter_once off;
            sub_filter 'http://localhost:4012/' '$scheme://$host/metrics/';
            sub_filter '<head>' '<head>\n<base href="http://hostname:4012/">';
    }

This allowed for the main JS files that are included in the index.html to load, showing the page, but not entirely. Some icons and fonts are missing, which are called by relative URLs in the .css. But more importantly, some JS on one of my apps is broken.. I click a button on my page and it does nothing, throwing this error:

ReactErrorUtils.js:51 Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'http://hostname:4012/report/81e006c3-949f-4b5d-82b8-ee8c8ba0e337' cannot be created in a document with origin 'http://cname.net' and URL 'http://cname.net/metrics/'.

Any idea on how I can fix this??? Weird part is, an individual app will work fully if I put it in the root / location in nginx by itself, like so:

location / {
proxy_pass http://localhost:4012/;
}

any idea on how I can get this to work with the /metrics/ location so I can have all my apps proxied??