problem with migration from 7 to 8 sentry

[waridesu]

after attempt to migrate from 7 to 8 version of sentry i get this error

import { createErrorHandler, init, routingInstrumentation, setTag, TraceService } from '@sentry/angular';
import { APP_INITIALIZER, ErrorHandler, NgModule } from '@angular/core';
import { Router, RouterModule } from '@angular/router';
import { BrowserTracing } from '@sentry/tracing';
import { RewriteFrames } from '@sentry/integrations';
import { withoutGraphQLFetch } from 'apollo-link-sentry';
import { Event } from '@sentry/browser';
import SentryRRWeb from '@sentry/rrweb';
import { GRAPHQL_PORTAL_ENDPOINT, RRWEB_CONFIG, RrwebConfig, SENTRY_RELEASE } from '@shared/tokens';
import { LoggerService } from '@shared/services';
import { Integration } from '@sentry/types/types/integration';

const withRrweb = (loggerService: LoggerService, rrwebConfig: RrwebConfig, integrations: Integration[]) => {
const rrwebActive = Math.random() < rrwebConfig.sampleRate;
if (rrwebActive) {
loggerService.log('debug', '[sentry] Instrumenting session with rrweb');
integrations.push(new SentryRRWeb());
}
setTag('rrweb.active', rrwebActive ? 'yes' : 'no');
return integrations;
};

// https://gist.github.com/impressiver/5092952
const ignoreExtensiveErrors = [
];
const denyExtensiveUrls = [
];

@NgModule({
imports: [RouterModule],
providers: [
{
provide: RRWEB_CONFIG,
useValue: {
sampleRate: 0,
} as RrwebConfig,
},
{
provide: ErrorHandler,
useFactory: (loggerService: LoggerService) =>
createErrorHandler({
logErrors: loggerService.can('error'),
}),
deps: [LoggerService],
},
{
provide: TraceService,
deps: [Router],
},
{
provide: APP_INITIALIZER,
useFactory:
(release: string, loggerService: LoggerService, rrwebConfig: RrwebConfig, graphqlPortalEndpoint: string) =>
() =>
init({
environment: process.env.ENV,
dsn: '',
release,
normalizeDepth: 7,
debug: loggerService.can('debug'),
ignoreErrors: [...ignoreExtensiveErrors],
denyUrls: [...denyExtensiveUrls],
autoSessionTracking: false,
integrations: withRrweb(loggerService, rrwebConfig, [
new BrowserTracing({
tracePropagationTargets: ['localhost', graphqlPortalEndpoint],
routingInstrumentation,
}),
new RewriteFrames(),
]),
beforeSend: (event: Event) => (process.env.ENV === 'dev' ? null : event),
beforeBreadcrumb: withoutGraphQLFetch((breadcrumb) => breadcrumb),
}),
deps: [SENTRY_RELEASE, LoggerService, RRWEB_CONFIG, GRAPHQL_PORTAL_ENDPOINT],
multi: true,
},
],
})
export class SentryConfigModule {}

import { Injectable } from '@angular/core';
import { Apollo, gql } from 'apollo-angular';
import { ReplaySubject } from 'rxjs';
import { SystemSettings } from '@app/graphql';
import { RxState } from '@rx-angular/state';

const GQL_QUERY = gqlquery loadSettings { systemSettings { info_phone local_country_code phone_verification local_currency_code phone_verification_limit two_factor_auth_mask gtm_id social_network { facebook_url twitter_url youtube_url instagram_url } recaptcha_key technical_works } };

export interface SocialNetwork {
facebook_url?: string;
twitter_url?: string;
youtube_url?: string;
instagram_url?: string;
}

@Injectable({ providedIn: 'root' })
export class SettingsService extends RxState<{
phone_verification: SystemSettings['phone_verification'];
recaptcha_key: SystemSettings['recaptcha_key'];
}> {
public info_phone: string;
public local_country_code: string;
public local_currency_code: string;
public phone_verification: boolean;
public two_factor_auth_mask = '9999Aa';
private loaded = false;
public gtm_id = new ReplaySubject(1);
public socialNetwork = new ReplaySubject(1);
technical_works$ = new ReplaySubject(1);

constructor(private apollo: Apollo) {
super();
}

load() {
this.apollo
.query({
query: GQL_QUERY,
})
.subscribe(({ data }) => {
const settings = data['systemSettings'];
this.info_phone = settings['info_phone'];
this.local_country_code = settings['local_country_code'];
this.local_currency_code = settings['local_currency_code'];
this.phone_verification = settings['phone_verification'];
this.two_factor_auth_mask = settings['two_factor_auth_mask'];
this.gtm_id.next(settings['gtm_id']);
this.socialNetwork.next(settings['social_network'] as SocialNetwork);
this.technical_works$.next(settings['technical_works']);
this.set({
recaptcha_key: settings['recaptcha_key'],
phone_verification: settings['phone_verification'],
});
this.loaded = true;
});
}
}
setting service
i tried everything but errors still there

[lforst]

Please check that you don't have any dependencies on Sentry SDK version 7 left over anywhere.

[waridesu]

Does that error go away when you disable Sentry?

when i remove browserTracingIntegration from integrations error go away

[lforst]

You defined your graphql endpoint as tracePropagationTargets. If you do that, the endpoint mus allow baggage and sentry-trace headers via cors.

[waridesu]

You defined your graphql endpoint as tracePropagationTargets. If you do that, the endpoint mus allow baggage and sentry-trace headers via cors.

@NgModule({
imports: [RouterModule],
providers: [
{
provide: RRWEB_CONFIG,
useValue: {
sampleRate: 0,
} as RrwebConfig,
},
{
provide: ErrorHandler,
useFactory: (loggerService: LoggerService) =>
createErrorHandler({
logErrors: loggerService.can('error'),
}),
deps: [LoggerService],
},
{
provide: TraceService,
deps: [Router],
},
{
provide: APP_INITIALIZER,
useFactory:
(release: string, loggerService: LoggerService, rrwebConfig: RrwebConfig, graphqlPortalEndpoint: string) =>
() =>
init({
environment: process.env.ENV,
dsn: 'xxx',
release,
normalizeDepth: 7,
debug: loggerService.can('debug'),
ignoreErrors: [...ignoreExtensiveErrors],
denyUrls: [...denyExtensiveUrls],
autoSessionTracking: false,
integrations: withRrweb(loggerService, rrwebConfig, [
new BrowserTracing({
tracePropagationTargets: ['localhost', graphqlPortalEndpoint],
routingInstrumentation,
}),
new RewriteFrames(),
]),
beforeSend: (event: Event) => (process.env.ENV === 'dev' ? null : event),
beforeBreadcrumb: withoutGraphQLFetch((breadcrumb) => breadcrumb),
}),
deps: [SENTRY_RELEASE, LoggerService, RRWEB_CONFIG, GRAPHQL_PORTAL_ENDPOINT],
multi: true,
},
],
})
but this works 7.29.0 and also work on 7.144.0
and it worked
maybe i miss some config options?

[lforst]

You need to allow the baggage header via CORS headers from your graphql backend. This is not an SDK config.

[waridesu]

You need to allow the baggage header via CORS headers from your graphql backend. This is not an SDK config.

Thank you, yes problem was with not added baggage on back-end

if possible last question
how i need to add unminifyed error from angular in sentry
https://docs.sentry.io/platforms/javascript/sourcemaps/
i've tryed by this docs but error still same