From dfaa5033d24aad9c023cc269da1d36bcc7fef543 Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Tue, 26 Jul 2022 14:08:00 -0400 Subject: [PATCH] feat(js): Update JS troubleshooting for new v7 client Update instructions for client constructor in docs. --- .../javascript/common/troubleshooting/index.mdx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/platforms/javascript/common/troubleshooting/index.mdx b/src/platforms/javascript/common/troubleshooting/index.mdx index a83fbd03adab5..805e7c49c17a5 100644 --- a/src/platforms/javascript/common/troubleshooting/index.mdx +++ b/src/platforms/javascript/common/troubleshooting/index.mdx @@ -266,10 +266,13 @@ This also helps to prevent tracking of any parent application errors in case you inside of it. In this example we use `@sentry/browser` but it's also applicable to `@sentry/node`. ```javascript -import { BrowserClient } from "@sentry/browser"; +import { BrowserClient, defaultStackParser, defaultIntegrations, makeFetchTransport } from "@sentry/browser"; const client = new BrowserClient({ dsn: "___PUBLIC_DSN___", + transport: makeFetchTransport, + stackParser: defaultStackParser, + integrations: defaultIntegrations, }); client.captureException(new Error("example")); @@ -278,10 +281,13 @@ 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, Hub } from "@sentry/browser"; +import { BrowserClient, defaultStackParser, defaultIntegrations, makeFetchTransport } from "@sentry/browser"; const client = new BrowserClient({ dsn: "___PUBLIC_DSN___", + transport: makeFetchTransport, + stackParser: defaultStackParser, + integrations: defaultIntegrations, }); const hub = new Hub(client); @@ -335,6 +341,8 @@ HappyIntegration.id = "HappyIntegration"; const client1 = new Sentry.BrowserClient({ dsn: "___PUBLIC_DSN___", + transport: Sentry.makeFetchTransport, + stackParser: Sentry.defaultStackParser, integrations: [...Sentry.defaultIntegrations, new HappyIntegration()], beforeSend(event) { console.log("client 1", event); @@ -345,6 +353,8 @@ const hub1 = new Sentry.Hub(client1); const client2 = new Sentry.BrowserClient({ dsn: "___PUBLIC_DSN___", // Can be a different DSN + transport: Sentry.makeFetchTransport, + stackParser: Sentry.defaultStackParser, integrations: [...Sentry.defaultIntegrations, new HappyIntegration()], beforeSend(event) { console.log("client 2", event);