diff --git a/src/platforms/javascript/common/troubleshooting/index.mdx b/src/platforms/javascript/common/troubleshooting/index.mdx
index 032eabf5aa96e0..d52e82323ec550 100644
--- a/src/platforms/javascript/common/troubleshooting/index.mdx
+++ b/src/platforms/javascript/common/troubleshooting/index.mdx
@@ -255,6 +255,7 @@ import {
defaultStackParser,
defaultIntegrations,
makeFetchTransport,
+ Hub,
} from "@sentry/browser";
const client = new BrowserClient({
@@ -264,53 +265,30 @@ const client = new BrowserClient({
integrations: defaultIntegrations,
});
-client.captureException(new Error("example"));
-```
-
-While the above sample should work perfectly fine, some methods like `configureScope` and `withScope` are missing on the `Client` because the `Hub` takes care of the state management. That's why it may be easier to create a new `Hub` and bind your `Client` to it. The result is the same but you will also get state management with it.
-
-
-
-```javascript
-import {
- BrowserClient,
- defaultStackParser,
- defaultIntegrations,
- makeFetchTransport,
-} from "@sentry/browser";
-
-const client = new BrowserClient({
- dsn: "___PUBLIC_DSN___",
- transport: makeFetchTransport,
- stackParser: defaultStackParser,
- integrations: defaultIntegrations,
-});
-
+// You have to bind the client to a hub, otherwise integrations will not run!
const hub = new Hub(client);
+// Or, if you already have a hub you want to re-use, you can also do:
+// hub.bindClient(client);
-hub.configureScope(function (scope) {
- scope.setTag("a", "b");
-});
+hub.captureException(new Error("example"));
+```
-hub.addBreadcrumb({ message: "crumb 1" });
-hub.captureMessage("test");
+You can now customize the hub to your liking, without affecting other hubs/clients.
-try {
- a = b;
-} catch (e) {
- hub.captureException(e);
-}
+### Setting up Sentry in shared environments (e.g. Browser Extensions)
-hub.withScope(function (scope) {
- hub.addBreadcrumb({ message: "crumb 2" });
- hub.captureMessage("test2");
-});
-```
+When setting up Sentry in a shared environment where multiple Sentry instances may run, for example, in a browser extension or similar, you should **not use `Sentry.init()`**, as this will pollute the global state. If your browser extension uses `Sentry.init()`, and the website the extension is running on also uses Sentry, the extension may send events to the website's Sentry project, or vice versa.
+
+For such scenarios, you have to set up a client manually as seen in the example above.
+In addition, you should also avoid adding any integrations that use global state, like `Breadcrumbs` or `TryCatch`.
+As a rule of thumb, it's best to avoid using any integrations and to rely on manual capture of errors only in such scenarios.
### Dealing with Integrations
Integrations are setup on the `Client`, if you need to deal with multiple clients and hubs you have to make sure to also do the integration handling correctly.
-Here is a working example of how to use multiple clients with multiple hubs running global integrations.
+
+We do not recommend doing this if you are using Sentry in a browser extension or in similar scenarios.
+If you can't avoid using global integrations (e.g. in a micro frontend application), here is a working example of how to use multiple clients with multiple hubs running global integrations.