Console errors are not captured with custom client and hub

[3zzy]

Package + Version

• @sentry/browser
• @sentry/node
• raven-js
• raven-node (raven for node)
• other:

Version:

5.15.5

Description

<script src="https://browser.sentry-cdn.com/5.15.5/bundle.min.js" integrity="sha384-wF7Jc4ZlWVxe/L8Ji3hOIBeTgo/HwFuaeEfjGmS3EXAG7Y+7Kjjr91gJpJtr+PAT" crossorigin="anonymous"></script>
<script src="https://browser.sentry-cdn.com/5.15.5/reportingobserver.min.js" crossorigin="anonymous"></script>
<script src="https://browser.sentry-cdn.com/5.15.5/captureconsole.min.js" crossorigin="anonymous"></script>
<script src="https://browser.sentry-cdn.com/5.15.5/dedupe.min.js" crossorigin="anonymous"></script>

var SentryClientGlobal = new Sentry.BrowserClient({
        environment: 'development',
        dsn: 'secret',
        integrations: [
            ...Sentry.defaultIntegrations,
            new Sentry.Integrations.ReportingObserver(),
            new Sentry.Integrations.CaptureConsole({
                levels: ['error', 'warn']
            }),
            new Sentry.Integrations.Dedupe()
        ]
    }),
    SentryHubGlobal = new Sentry.Hub(SentryClientGlobal);    

// Capture additional data 
SentryHubGlobal.configureScope(function(scope) {
    scope.setTag("siteid", SITEID);
    scope.setTag('cID', CID);
    if (LOGGED_IN) {
        scope.setUser({ id: "<?= $u->uID ?>" });
    }
});

console.error('Boom!'); // this is not captured in Sentry

Initializing a client and hub manually like this doesn't capture the console errors that are otherwise logged if I just use Sentry.init() and Sentry.configureScope normally as mentioned in the docs.

What am I doing wrong here or is it a bug?

[3zzy]

Whats the best way to get support on this issue? I posted on the community forums but nothing there as well. We are looking to integrate Sentry into our app but this is the only roadblock and its been difficult getting any kind of response.

[kamilogorek]

When you use custom hubs, the ConsoleIntegration has no knowledge which hub it should capture an event with. Because of that, it won't do that at all.

You have to instrument your global hub instance and make it the main one, which will be used by the integration itself.

import { makeMain } from '@sentry/hub';

// ...

const myHub = new Sentry.Hub(myClient);
const oldHub = makeMain(myHub);

console.error('wat');

[3zzy]

@kamilogorek Thanks, would be good to document it though.

I'm using cdn and the bundle (https://browser.sentry-cdn.com/5.15.5/bundle.js) has the makeMain function but its not exported so how would I use it in that case?

[3zzy]

@kamilogorek So I tweaked the bundle.js and exported makeMain (exports.makeMain = makeMain;) to test if it works like so: Sentry.makeMain(SentryHubGlobal);

Although there are not errors, but still doesn't capture the console. Also, I wonder if there was a reason to use const oldHub?

[3zzy]

I even tried creating an "app":

import { BrowserClient, Hub, defaultIntegrations } from "@sentry/browser";
import { CaptureConsole, Dedupe } from "@sentry/integrations";
import { makeMain } from "@sentry/hub";

// Init Sentry
window.SentryClientGlobal = new BrowserClient({
    environment: process.env.NODE_ENV,
    dsn: "secret",
    integrations: [
        ...defaultIntegrations,
        new CaptureConsole({
            levels: ["error", "warn"]
        }),
        new Dedupe()
    ]
});
window.SentryHubGlobal = new Hub(SentryClientGlobal);

// Set hub as main
makeMain(window.SentryHubGlobal);

.. which is then bundled using webpack and loaded via script tag in my application header. Console errors are still not captured. SentryHubGlobal.captureException(new Error("bar")); works fine.

[kamilogorek]

Let's start with a question what's your use-case for the custom BrowserClient and Hub in the first place? Maybe there's some better way to approach it.

[3zzy]

@kamilogorek

• Each "Block" as a Vue SPA - Client + Hub for each block to keep them separate
• PHP CMS (Concrete5) - GlobalClient + GlobalHub to capture everything else including unhandled errors and console etc.

I need separate Client for each Vue SPA because they're completely different and have different stores (one of them has a Vuex store) so setting/unsetting "extra" data and/or tags each time won't make sense.

I still wonder why the example I posted above won't work, is it a bug or am I doing something wrong?

[3zzy]

@kamilogorek Could you please at least confirm whether its a bug or not? I need to decide what step to take, figure out a workaround and move ahead with out integration.

[michal-rumanek]

It looks like a bug. It doesn't work for me either when using BrowserClient / Hub, even if one of the hubs is marked as main by invoking makeMain (in my case there is a couple of Angular microapps, each with its own Sentry Hub).
The same problem is with ApmIntegrations.
However, both CaptureConsole and ApmIntegrations work fine when using Sentry.init instead of BrowserClient / Hub.

[3zzy]

Exactly, it does seem to be a bug. Its been a few weeks now but no response. 🤷‍♂️ I understand its an open source project but my company is a paid customer so we really expect better support. At least for critical issues like these.

[kamilogorek]

In order for integrations to work with custom hubs, you need to explicitly bind the client. Yes, this is a bug, which we track here, but we're not able to fix it right away, as it's breaking change, see: #2541

Changing this part:

window.SentryHubGlobal = new Hub(SentryClientGlobal);

to

window.SentryHubGlobal = new Hub(SentryClientGlobal);
window.SentryHubGlobal.bindClient(window.SentryClientGlobal);

fixes the issue.

I need separate Client for each Vue SPA because they're completely different and have different stores (one of them has a Vuex store) so setting/unsetting "extra" data and/or tags each time won't make sense.

I wonder why do you want to use console.error instead of calling captureException/captureMessage directly on the hub/client instead?

[3zzy]

@kamilogorek Appreciate the response, and thanks for the workaround, I'll give it a try.

I wonder why do you want to use console.error instead of calling captureException/captureMessage directly on the hub/client instead?

Because its a huge legacy CMS with console logs and errors sprinkled around and that's what we want to monitor until we can fully (rely on and) integrate Sentry and start using captureException.

[kamilogorek]

Got it. And excuse me the long response time, I'll try to be more responsive next time.

[3zzy]

@kamilogorek Could you please export makeMain in an upcoming release so this workaround could be used with the CDN bundle as well.