aws-observability
[Bug]: Application Stuck
Which web client version did you detect this bug with?
I am using "aws-rum-web": "^1.20.0" with my angular app version 17.0.0 , but when i start using my application in browser and after 2-3 navigation my page got stuck and browser tab goes unresponsive and at then end i need to close my browser tab manually .
Code to initialize rum in my appmodule :
import { SilentRenewComponent } from './silent-renew/silent-renew.component'; import { environment } from '@env/environment';
/** Angular core modules / import { NgModule, APP_INITIALIZER } from "@angular/core"; import { BrowserModule } from "@angular/platform-browser"; import { BrowserAnimationsModule, NoopAnimationsModule, } from "@angular/platform-browser/animations"; /* Routes / import { AppRoutingModule } from "./app-routing.module"; /* Modules */ import { AppComponent } from "./app.component";
import { ComponentsModule } from "@shared/components"; import { ContainersModule } from "@shared/containers"; import { HttpServiceModule } from "@shared/async-services/http"; /** guards */ import { AuthGuard } from "@shared/guards/auth.guard"; import { CanDeactivateGuard } from "@shared/guards/can-deactivate.guard";
/** Services / /* Third party modules */ import { NgbModule } from "@ng-bootstrap/ng-bootstrap"; import { ToastrModule } from "ngx-toastr"; import { LoaderService } from "@shared/utility/loader.service"; import { ToasterService } from "@shared/utility/toaster.service"; import { DataService } from "@shared/async-services/data.service"; import { LoaderComponent } from "@shared/components/spinner/loader.component";
import { SharedModule } from "@shared/shared.module";
import { HeaderComponent } from "@shared/components/header/header.component"; import { ContactComponent } from "./contact/contact.component"; import { FooterComponent } from "@shared/components/footer/footer.component"; import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { ConfirmationDialogComponent } from "@shared/components/confirmation-dialog/confirmation-dialog.component"; import { NavComponent } from "./features-modules/layout/nav/nav.component"; import { ContentLayoutComponent } from "./features-modules/layout/content-layout/content-layout.component"; import { SidebarComponent } from "@shared/components/sidebar/sidebar.component";
import { AllowaccessComponent } from "./auth/allowaccess/allowaccess.component"; import { AutoLoginComponent } from "./auto-login/auto-login.component"; import { ForbiddenComponent } from "./forbidden/forbidden.component"; import { LogoutMainComponent } from './logout-main/logout-main.component';
import { IntermediateComponent } from './auth/intermediate/intermediate.component'; import { AuthService } from './auth/auth.service';
import 'froala-editor/js/plugins.pkgd.min.js'; import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg'; import { NgxFileDropModule } from 'ngx-file-drop'; import { AuthConfigModule } from './auth-config.module'; import { Ng9PasswordStrengthBarModule } from '@shared/strong-password/Ng9PasswordStrengthBarModule'; import { ForgetPasswordComponent } from './auth/forget-password/forget-password.component'; import { GridDataService } from '@shared/services/grid-data-service'; import { AwsRumService } from '@shared/aws-rum.service';
@NgModule({ declarations: [ AppComponent, IntermediateComponent, LoaderComponent, HeaderComponent, ContactComponent, FooterComponent, ConfirmationDialogComponent, ContentLayoutComponent, NavComponent, SidebarComponent, AllowaccessComponent, AutoLoginComponent, ForbiddenComponent, LogoutMainComponent, SilentRenewComponent, ForgetPasswordComponent ],
imports: [ BrowserModule, FormsModule, NoopAnimationsModule, ReactiveFormsModule, SharedModule, AppRoutingModule, BrowserAnimationsModule, ComponentsModule, ContainersModule, HttpServiceModule.forRoot(), SharedModule, NgxFileDropModule,
FroalaEditorModule.forRoot(), FroalaViewModule.forRoot(),
ToastrModule.forRoot({
positionClass: "toast-top-center",
preventDuplicates: true,
maxOpened: 1,
autoDismiss: true,
timeOut: 2000,
// positionClass: 'inline'
}),
/** Third party modules */
NgbModule,
AuthConfigModule,
Ng9PasswordStrengthBarModule
], exports: [SharedModule], providers: [ AuthGuard, LoaderService, DataService, AuthService, ToasterService, CanDeactivateGuard,
], bootstrap: [AppComponent],
}) export class AppModule { constructor(private awsRumService: AwsRumService) {
this.awsRumService.initialize();
}
}
initialize() {
try {
const config: AwsRumConfig = {
sessionSampleRate: 1,
identityPoolId: "00000000000000000000000000",
endpoint: "https://dataplane.rum.eu-west-2.amazonaws.com",
telemetries: ["performance","errors","http"],
allowCookies: true,
enableXRay: false,
cookieAttributes: {
unique: true
}
};
const APPLICATION_ID: string = '00000000000000000000000000';
const APPLICATION_VERSION: string = '1.0.0';
const APPLICATION_REGION: string = 'eu-west-2';
awsRum: new AwsRum(
APPLICATION_ID,
APPLICATION_VERSION,
APPLICATION_REGION,
config
);
} catch (error) {
debugger;
console.log('rum error ' + error);
throw error;
}
}
My component code :
Search Invoice VAT
| {{ item.code }} | {{ item.name }} | {{ item.typeName }} |
| {{ item.code }} | {{ item.name }} | {{ item.typeName }} |
| {{ item.code }} | {{ item.name }} | {{ item.typeName }} |
<!-- <div class="col-md-3">
<label>Brand</label>
<kendo-combobox
[(ngModel)]="searchCriteria.brandId"
[data]="dataBrand"
placeholder="Select an option"
class="w-100"
[textField]="'text'"
[valueField]="'value'"
[valuePrimitive]="true"
(ngModelChange)="changeBrand($event)"
>
</kendo-combobox>
</div> -->
<div class="col-md-3">
<label>Reference #</label>
<input
type="text"
class="form-control"
maxlength="25"
placeholder="Search..."
(keydown.enter)="loadInvoiceData()"
[(ngModel)]="searchCriteria.referenceNo"
/>
</div>
<div class="col-md-3">
<label>Transaction Type</label>
<kendo-combobox
[(ngModel)]="searchCriteria.transactionType"
[data]="datatransactionType"
placeholder="Select an option"
class="w-100"
[textField]="'text'"
[valueField]="'value'"
[valuePrimitive]="true"
>
</kendo-combobox>
</div>
<div class="col-md-3">
<label>Invoice System</label>
<kendo-combobox
placeholder="Select an option"
[(ngModel)]="searchCriteria.invoiceSystemId"
[data]="datainvoiceSystem"
class="w-100"
[textField]="'text'"
[valueField]="'value'"
[valuePrimitive]="true"
>
</kendo-combobox>
</div>
</div>
<div class="form-row align-items-center mt-4 mb-3 pl-2 me-0 ms-0">
<div class="row">
<div class="col-md-auto">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input"
[ngModelOptions]="{ standalone: true }" [(ngModel)]="searchCriteria.isSubmitted" id="isSubmitted" />
<label class="custom-control-label" for="isSubmitted">
Submitted</label>
</div>
</div>
<div class="col-md-auto">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input"
[ngModelOptions]="{ standalone: true }" [(ngModel)]="searchCriteria.isCompleted" id="isCompleted" />
<label class="custom-control-label" for="isCompleted">
Completed</label>
</div>
</div>
<div class="col-md-auto">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input"
[ngModelOptions]="{ standalone: true }" [(ngModel)]="searchCriteria.isInvoiced" id="isInvoiced" />
<label class="custom-control-label" for="isInvoiced">
Invoiced</label>
</div>
</div>
<div class="col-md-auto d-flex">
<label class="d-block pe-2">Show Test Data</label>
<kendo-switch [(ngModel)]="showTestData" [ngModelOptions]="{ standalone: true }"
(valueChange)="filterTestPolicies($event)" onLabel="On" offLabel="Off">
</kendo-switch>
</div>
</div>
</div>
<div class="form-row row">
<div class="col-md-auto">
<button
class="btn btn-primary btn-cs"
(click)="loadInvoiceData()"
>
Search
</button>
</div>
<div class="col-md-auto">
<button
class="btn btn-secondary btn-cs"
(click)="ClrSrchData()"
>
Clear All
</button>
</div>
</div>
<!-- <div class="row form-row">
<div class="col-md-auto if-no-label-28" *ngIf="invoiceData?.length > 0">
<button
class="btn btn-danger btn-sm ml-0 m-w-100"
(click)="bulkUpdate()"
>
Bulk Update
</button>
</div>
</div> -->
<div class="form-row row mt-3">
<div class="col-md-12 invoice-search-grid style-scrollbar">
<kendo-grid
id="my-grid"
[data]="policyData | async" [pageSize]="state.take" [skip]="state.skip"
[sort]="state.sort"
[scrollable]="'scrollable'"
[pageable]="true"
[sortable]="false"
(dataStateChange)="dataStateChange($event)"
[rowClass]="rowCallback"
>
<ng-template kendoGridToolbarTemplate>
<div class="row justify-content-between d-flex w-100">
<div class="col-md ps-0 pe-0">
<input
placeholder="Search..."
class="form-control w-100"
(input)="filterData($event.target.value)"
[(ngModel)]="searchText"
/>
</div>
<div class="col-md-auto pe-0">
<button
kendoGridExcelCommand
type="button"
class="m-w-100 btn k-button-solid-base exporttoExcel-btn"
icon="file-excel"
>
Export to Excel
</button>
</div>
</div>
</ng-template>
<kendo-grid-column title="Action" [width]="130" class="zi-1 sticky-td">
<ng-template kendoGridCellTemplate let-dataItem>
<div class="row m-0">
<div class="col-md-auto m-auto dot-menu p-0 zi-1">
<div class="float-right card-rightside-icon cursor-pointer dropdown-toggle" id="dropdownMenuButton"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="material-symbols-outlined"> . . . </span>
</div>
<div class="dropdown-menu dropdown-menu1 dropdown-menu-right zi-1" aria-labelledby="dropdownMenuButton"
>
<div *permission="'canEditTransactions'">
<a *ngIf="dataItem?.completedDate!==null && !dataItem?.isEdited"
class="dropdown-item" (click)="changeRate(dataItem)">
Change Rate
</a>
</div>
<a class="dropdown-item" (click)="viewLogs(dataItem)">
View Logs
</a>
</div>
</div>
</div>
</ng-template>
</kendo-grid-column>
<kendo-grid-column
field="agentCode"
title="Agent / Group Code"
[width]="200"
>
</kendo-grid-column>
<kendo-grid-column
field="agentName"
title="Agent / Group Name"
[width]="200"
>
</kendo-grid-column>
<kendo-grid-column
field="referenceId"
title="Reference No."
[width]="130"
>
<ng-template kendoGridCellTemplate let-dataItem>
<a
(click)="viewLogs(dataItem)"
href="javascript:void()"
style="color: blue; text-decoration: underline"
>
{{ dataItem.referenceId }}
</a>
</ng-template>
</kendo-grid-column>
<kendo-grid-column
field="product"
title="Product Description"
[width]="200"
>
<ng-template kendoGridCellTemplate let-dataItem>
<div *ngIf="dataItem?.paymentOptionId==2">
<a
(click)="viewDetails(dataItem)"
href="javascript:void()"
style="color: blue; text-decoration: underline"
>
{{ dataItem.product }}
</a>
</div>
<div *ngIf="dataItem?.paymentOptionId==null || dataItem?.paymentOptionId!=2">
{{ dataItem.product }}
</div>
</ng-template>
</kendo-grid-column>
<kendo-grid-column
field="brand"
title="Brand"
[width]="200"
>
</kendo-grid-column>
<kendo-grid-column
field="applicantName"
title="Applicant Name"
[width]="160"
>
</kendo-grid-column>
<kendo-grid-column
field="propertyAddress"
title="Property Address"
[width]="280"
>
</kendo-grid-column>
<kendo-grid-column field="price" title="Net Price" [width]="160">
<ng-template kendoGridCellTemplate let-dataItem>
£{{ dataItem.price | number : "1.2-2" }}
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="vatRate" title="VAT Rate" [width]="160">
<ng-template kendoGridCellTemplate let-dataItem>
{{ dataItem.vatRate | number : "1.2-2" }}%
</ng-template>
</kendo-grid-column>
<kendo-grid-column
field="vatAmount"
title="VAT Amount"
[width]="130"
>
<ng-template kendoGridCellTemplate let-dataItem>
£{{ dataItem.vatAmount | number : "1.2-2" }}
</ng-template>
</kendo-grid-column>
<kendo-grid-column
field="submittedDate"
title="Submitted Date"
[width]="130"
>
<ng-template kendoGridCellTemplate let-dataItem>
{{ dataItem.submittedDate | date : "dd/MM/yyyy HH:mm:ss" }}
</ng-template>
</kendo-grid-column>
<kendo-grid-column
field="completedDate"
title="Completed Date"
[width]="130"
>
<ng-template kendoGridCellTemplate let-dataItem>
{{ dataItem.completedDate | date : "dd/MM/yyyy HH:mm:ss" }}
</ng-template>
</kendo-grid-column>
<kendo-grid-column
field="invoiceDate"
title="Invoiced Date"
[width]="160"
>
<ng-template kendoGridCellTemplate let-dataItem>
{{ dataItem.invoiceDate | date : "dd/MM/yyyy HH:mm:ss" }}
</ng-template>
</kendo-grid-column>
<kendo-grid-column
field="invoiceSystemDesc"
title="Invoice System"
[width]="180"
>
</kendo-grid-column>
<kendo-grid-excel
fileName="Invoice.xlsx"
[fetchData]="allData"
></kendo-grid-excel>
</kendo-grid>
</div>
</div>
</div>
.ts code
import { Component, ElementRef, OnInit, ViewChild, ViewEncapsulation, } from "@angular/core"; import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; import { ExcelExportData } from "@progress/kendo-angular-excel-export"; import { DataBindingDirective, DataStateChangeEvent, GridComponent, RowClassArgs, } from "@progress/kendo-angular-grid"; import { Observable, Subscription, debounceTime, filter, fromEvent, map, } from "rxjs"; import { process, GroupResult, groupBy, SortDescriptor, State, } from "@progress/kendo-data-query"; import { FMSService } from "@app/features-modules/services/fms.service"; import { InvoicelogsComponent } from "../../invoicelogs/invoicelogs/invoicelogs.component"; import { localeDateString } from "@shared/utility"; import { ChangeRateComponent } from "../../changeRate/change-rate/change-rate.component"; import { ToasterService } from "@shared/utility/toaster.service"; import { UlMonthlyScheduleComponent } from "../../ul-monthly-schedule/ul-monthly-schedule/ul-monthly-schedule.component"; import { GridDataService } from "@shared/services/grid-data-service";
@Component({ selector: "app-invoice", templateUrl: "./invoice.component.html", encapsulation: ViewEncapsulation.None,
styleUrl: "./invoice.component.css", }) export class InvoiceComponent implements OnInit { @ViewChild(DataBindingDirective) dataBinding: DataBindingDirective;
@ViewChild("searchCodeInput", { static: true }) public searchCodeInput: ElementRef;
@ViewChild("grouppartnergrid", { static: true }) grouppartnergrid: GridComponent;
public selectedAgentItem: any;
public invoiceData;
public invoiceDataClone;
searchText = "";
public listItems: Array
private subscription = new Subscription();
public view: Observable
public globalSearchResultData = []; public IsAllGlobalSearchResult = false; public displayResult = "none";
codesearch; namesearch; public isLoadMore = false; public searchValueInput: string; pageindex = 1; agentPageSize = 10; agentTotalCount = 0; minDate = new Date();
datainvoiceSystem: any; datainvoiceSystemclone: any;
searchCriteria: any = { fromDate: null, toDate: null, referenceNo: "", productId: null, brandId: null, isInvoiced: false, isCompleted: true, isSubmitted: false, transactionType: null, agentId: null, agentGroupId: null, showTestData: false, invoiceSystemId:null };
pageIndex = 0; pageSize = 15; q: any; totalcount = 0;
dataInvoice = []; dataInvoiceclone: any[]; dataInvoiceClone: any; invoiceTrans = [];
selectedBrand;
showTestData=false;
public dataBrand: Array
public datatransactionType: Array
public policyData: Observable
public state: State = { skip: 0, take: 10, filter: { filters: [], logic: "or" }, };
public addOnFinanceMsBasePath = "financems/InvoiceVat/GetInvoiceVat/Paged"; totalCount: any;
isOuterSearch: boolean; index = 0; constructor( private fmService: FMSService, private modalService: NgbModal, private toastrService: ToasterService, private dataService: GridDataService ) {
}
ngOnInit(): void { this.policyData = this.dataService;
this.dataService.read("", "", this.addOnFinanceMsBasePath);
this.policyData.subscribe((data) => {
this.totalCount = data.total;
});
this.minDate.setDate(this.minDate.getDate() + 1);
this.loadComboVal();
// this.loadData();
fromEvent(this.searchCodeInput.nativeElement, "keyup")
.pipe(
map((event: any) => {
if (event.target.value === "" && event.target.value.length === 0) {
this.displayResult = "none";
}
this.namesearch = "";
return event.target.value;
}),
filter((res) => res.length > 2),
debounceTime(500)
)
.subscribe((searchValue: string) => {
if (searchValue == "" || searchValue.length < 3) {
this.globalSearchResultData = Object.assign({});
return;
}
this.pageindex = 1;
this.isLoadMore = false;
this.IsAllGlobalSearchResult = false;
this.searchValueInput = searchValue;
const queryParams = this.getQueryParam() + "&isCode=true";
this.fmService
.getGlobalSearchResult(queryParams)
.subscribe((response: any): void => {
console.log(response);
if (response.items.length < 10) {
this.IsAllGlobalSearchResult = true;
}
this.globalSearchResultData = response.items;
this.selectedAgentItem = response.items;
this.agentTotalCount = response.totalCount;
this.displayResult = "Block";
});
});
}
loadData() { this.subscription.add( this.fmService.GetAllInvoice().subscribe((data) => { if (data) { this.dataInvoice = data; this.dataInvoiceclone = Object.assign([], data); } }) ); }
getQueryParam(): string { return ( "pageIndex=" + this.pageindex + "&indexFrom=1&pageSize=" + this.agentPageSize + "&searchText=" + this.searchValueInput + "&isPartner=" + false + "&isAgent=" + false + "&isGroup=" + false + "&statuses=" + "" ); }
filterTestPolicies(value: boolean) { this.isOuterSearch=true; this.searchCriteria.showTestData = value; this.dataService.read( "outerSearch", this.searchText, this.addOnFinanceMsBasePath, this.searchCriteria ); }
public searchCode(item: any) { this.pageindex = this.pageindex + 1; const queryParams = "pageIndex=" + this.pageindex + "&indexFrom=1&pageSize=" + this.agentPageSize + "&searchText=" + this.searchValueInput + "&isPartner=" + false + "&isAgent=" + false + "&isGroup=" + false + "&isCode=" + item.isCode; }
listenTRClick(item: any) { console.log(item); this.displayResult = "none"; this.selectedAgentItem = item; this.codesearch = item.code; if(item?.typeName=='Group') { this.searchCriteria.agentGroupId =item?.id; this.searchCriteria.agentId=null; } else { this.searchCriteria.agentId =item?.id; this.searchCriteria.agentGroupId=null; } //this.loadInvoiceData(item, this.pageIndex); }
changeProduct(evt) { if (evt === null || evt === undefined) { this.selectedProductId = ""; return; }
this.selectedProductId = evt;
}
changeBrand(evt) { if (evt > 0) { this.dataProduct = this.dataProductClone.filter((a) => a.brandId == evt); } else { this.dataProduct = this.dataProductClone; } }
loadComboVal() { this.subscription.add( this.fmService.GetProductType(false).subscribe((data) => { if (data && data !== null && data !== undefined) { this.dataProduct = data; this.dataProductClone = Object.assign([], data);
this.lstProduct = data;
this.changeBrand(1);
}
})
);
this.subscription.add(
this.fmService.GetInvoiceSystem().subscribe((data) => {
if (data) {
this.datainvoiceSystem = data;
this.datainvoiceSystemclone = Object.assign([], data);
}
})
);
}
ClrSrchData() { this.codesearch = ""; this.namesearch = ""; this.searchText = "";
this.searchCriteria = {
fromDate: null,
toDate: null,
referenceNo: "",
productId: null,
brandId: null,
isInvoiced: false,
isCompleted: true,
isSubmitted: false,
transactionType: null,
agentId: null,
agentGroupId: null,
invoiceSystemId:null
};
this.invoiceData = [];
this.invoiceDataClone = [];
this.pageIndex = 0;
this.totalcount = 0;
this.selectedAgentItem = "";
this.dataService.read("", "", this.addOnFinanceMsBasePath);
//this.loadInvoiceData(0);
}
public dataStateChange(state: DataStateChangeEvent): void { if (this.searchText.length > 2) { this.dataService.state = state; this.state = state; this.filterData(true); //this.dataBinding.skip = 0; } else { this.dataService.state = state; // this.policySearch.showTestData=this.showTestData; this.state = state; this.dataService.read( this.isOuterSearch ? "outerSearch" : "", "", this.addOnFinanceMsBasePath, this.searchCriteria ); //this.dataBinding.skip = 0; //this.refreshTotalCount(); } }
loadInvoiceData() { this.dataService.read( "outerSearch", this.searchText, this.addOnFinanceMsBasePath, this.searchCriteria );
// this.subscription.add(
// this.fmService.GetInvoiceBySearch(searchQuery).subscribe((data) => {
// if (data && data !== null && data != undefined) {
// if (data.length === 0) {
// this.dataInvoice = [];
// this.dataInvoiceClone = [];
// }
// if (data.length > 0) {
// this.dataInvoice = data;
// this.dataInvoiceClone = Object.assign([], data);
// this.dataBinding.skip = 0;
// }
// }
// })
// );
}
deletetransation(item) {}
searchInvoice() { this.searchCriteria.fromDate; }
filterData(isfromstatechange: Boolean = false) { if (!isfromstatechange) { this.dataService.state.skip = 0; this.dataService.state.take = 10; } if (this.searchText.length > 2) { // this.searchCriteria.showTestData=this.showTestData; //this.dataService.state.sort = []; this.dataService.read( this.isOuterSearch ? "outerSearch" : "search", this.searchText, this.addOnFinanceMsBasePath, this.searchCriteria ); //this.refreshTotalCount(); } else if (this.searchText.length === 0) { this.dataService.state.skip = 0; this.dataService.state.take = 10; this.dataService.read( this.isOuterSearch ? "outerSearch" : "", "", this.addOnFinanceMsBasePath, this.searchCriteria ); //this.refreshTotalCount(); } this.index = this.index + 1; // this.eventbus.emit(new EmitEvent(Events.PolicySelect, this.index)); }
viewLogs(dataItem) { this.subscription.add( this.fmService .GetInvoiceByRecord(dataItem.referenceId) .subscribe((data) => { const modalRef = this.modalService.open(InvoicelogsComponent, { size: "lg", windowClass: "modal-md", centered: true, backdrop: "static", }); modalRef.componentInstance.dataItem = data; }) ); }
changeRate(dataItem) { this.invoiceTrans = []; const modalRef = this.modalService.open(ChangeRateComponent, { size: "md", windowClass: "modal-md w-700", centered: true, backdrop: "static", }); modalRef.componentInstance.dataItem = dataItem; modalRef.result.then( (data) => { if (data != null && data != undefined) { data.forEach((element) => { this.invoiceTrans.push({ price: element.newprice, requestedByName: element.requestedby, reasonId: element.reasonId, reasonText: element.reasonText, invoiceVatId: dataItem?.invoiceVatId, totalPrice: element.totalPrice, }); });
setTimeout(() => {
this.subscription.add(
this.fmService
.SaveManualTrans(this.invoiceTrans)
.subscribe((data) => {
this.toastrService.success("Rate changed !!");
this.loadInvoiceData();
})
);
}, 500);
}
},
() => {}
);
}
sendtransations() {}
bulkUpdate() {}
public onFilter(inputValue: string): void { this.searchText = inputValue; this.filterData(); }
public allData = (): Observable<any[]> => { delete this.state; return this.dataService.queryAll( "exportToExcel", this.searchText, this.addOnFinanceMsBasePath, this.searchCriteria ); };
viewDetails(dataItem: any) { this.subscription.add( this.fmService .GetVatSchedules(dataItem.invoiceVatId) .subscribe((data) => { const modalRef = this.modalService.open(UlMonthlyScheduleComponent, { size: "lg", windowClass: "modal-md", centered: true, backdrop: "static", }); modalRef.componentInstance.dataItem = data; }) ); }
rowCallback = (context: RowClassArgs) => { if (context.dataItem.isEdited || context.dataItem.completedDate === null) { return "refund"; } else { return ""; } }; }
Package.json file
{ "name": "Finance-MSPortal", "version": "0.0.4", "scripts": { "ng": "ng", "start": "set NODE_OPTIONS=--openssl-legacy-provider && ng s --o --ssl true --ssl-key localhost.key --ssl-cert localhost.crt", "build": "set NODE_OPTIONS=--openssl-legacy-provider && ng build --base-href /rg/ --aot", "prebuild": "npm --no-git-tag-version version patch", "lint": "ng lint", "test": "npm run sy-pre-test & ng test", "pree2e": "webdriver-manager update --standalone false --gecko false", "e2e": "ng e2e", "sy-pre-test": "node hooks/pre-test.js", "sy-pre-start": "node hooks/pre-start.js", "sy-pre-build": "node hooks/pre-build.js", "sy-post-build": "node hooks/post-build.js", "sw": "sw-precache --root=./dist --config=sw-precache-config.js", "sy-build": "npm run sy-pre-build & ng build --prod --aot & npm run sy-post-build & npm run sw", "prod-build-dev": "ng build --prod --aot", "analyze": "webpack-bundle-analyzer dist/stats-es2015.json" }, "private": true, "dependencies": { "@angular/animations": "^17.0.0", "@angular/common": "^17.0.0", "@angular/compiler": "^17.0.0", "@angular/core": "^17.0.0", "@angular/forms": "^17.0.0", "@angular/localize": "^16.2.12", "@angular/platform-browser": "^17.0.0", "@angular/platform-browser-dynamic": "^17.0.0", "@angular/router": "^17.0.0", "@kolkov/angular-editor": "^2.1.0", "@ng-bootstrap/ng-bootstrap": "^15.1.2", "@popperjs/core": "^2.11.8", "@progress/kendo-angular-buttons": "^15.5.0", "@progress/kendo-angular-common": "^15.5.0", "@progress/kendo-angular-dateinputs": "^15.5.0", "@progress/kendo-angular-dropdowns": "^15.5.0", "@progress/kendo-angular-excel-export": "^15.5.0", "@progress/kendo-angular-grid": "^15.5.0", "@progress/kendo-angular-inputs": "^15.5.0", "@progress/kendo-angular-intl": "^15.5.0", "@progress/kendo-angular-l10n": "^15.5.0", "@progress/kendo-angular-label": "^15.5.0", "@progress/kendo-angular-layout": "^15.5.0", "@progress/kendo-angular-pdf-export": "^15.5.0", "@progress/kendo-angular-popup": "^15.5.0", "@progress/kendo-angular-progressbar": "^15.5.0", "@progress/kendo-angular-tooltip": "^13.2.1", "@progress/kendo-angular-treeview": "^15.5.0", "@progress/kendo-angular-upload": "^15.5.0", "@progress/kendo-data-query": "^1.6.0", "@progress/kendo-drawing": "^1.19.0", "@progress/kendo-licensing": "^1.1.3", "@progress/kendo-theme-bootstrap": "^8.2.1", "@progress/kendo-theme-default": "^8.2.1", "angular-auth-oidc-client": "^18.0.1", "angular-file-reader": "^1.0.0", "angular-froala-wysiwyg": "^4.0.10", "angular-tooltips": "^1.2.2", "bootstrap": "5.3.3", "bs-stepper": "^1.7.0", "crypto-js": "^4.2.0", "file-saver": "^2.0.2", "font-awesome": "^4.7.0", "google-libphonenumber": "^3.2.38", "typescript-cookie": "^1.0.5", "intl-tel-input": "^23.7.3", "jquery": "^3.4.1", "line-awesome": "^1.3.0", "moment": "^2.29.4", "ng2-tooltip-directive": "^2.10.3", "ngx-bootstrap": "18.0.2", "ngx-file-drop": "^16.0.0", "ngx-intl-tel-input": "^3.2.0", "ngx-toastr": "^16.0.2", "owl.carousel": "^2.3.4", "popper.js": "^1.16.1", "read-excel-file": "^5.5.2", "rxjs": "~7.8.0", "aws-rum-web": "^1.20.0", "ngx-filesaver": "^8.0.0",
"zone.js": "~0.12.0"
}, "devDependencies": { "@angular-devkit/build-angular": "^17.0.7", "@angular/cli": "^17.0.7", "@angular/compiler-cli": "^17.0.0", "@types/jasmine": "~5.1.0", "@types/jquery": "^3.5.30", "jasmine-core": "~5.1.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "tslint": "5.17.0", "typescript": "~5.2.2" } }
What environment (build systems, module system, and framework) did you detect this bug with?
TypeScript v5.0.2, Webpack v4.46.0, ECMAScript modules (ESM) and React v18.2.0
Is your web application a single page application (SPA) or multi page application (MPA)?
None
Please provide your web client configuration
{ allowCookies: true, endpoint: "https://dataplane.rum.us-west-2.amazonaws.com", guestRoleArn: "arn:aws:iam::000000000000:role/RUM-Monitor-us-west-2-000000000000-00xx-Unauth", identityPoolId: "us-west-2:00000000-0000-0000-0000-000000000000", sessionSampleRate: 1, telemetries: ['errors', 'performance', 'http'] }
Please describe the bug/issue
I am using "aws-rum-web": "^1.20.0" with my angular app version 17.0.0 , but when i start using my application in browser and after 2-3 navigation my page got stuck and browser tab goes unresponsive and at then end i need to close my browser tab manually .
Hi @satviktechie1986 - a couple questions
- To confirm, you are still seeing this issue without the RUM client initialized?
- To confirm, the web client configurations are just redacted and not 0 strings, right?
- I noticed in your client initialization code that you're still throwing errors in the catch block. Is there a reason for this? We suggest that you don't do this and just log the error to ensure there is no impact to your application.
- Could you update this issue to wrap the code blocks properly to improve readability of the code?
@satviktechie1986 / @limhjgrace has there been any progress on this issue? We are experiencing a similar issue on our project using aws-rum-web 1.25.0 with angular version 19. When we navigate to a page, navigate away, then back to the page, the application becomes unresponsive. We would like to utilize this client for our production monitoring suite, but this issue has halted that progress completely.
I will answer the questions that @limhjgrace added above about our project to see if we can get any assistance or help debug the issue.
- No, if we do not initialize the RUM client the issue does not appear. It only appears if RUM has been initialized.
- We have the correct values in our client configuration, and confirmed we are receiving data in cloudwatch.
- NA
- NA
We assume that the AWS RUM client is "hanging" at some point when we navigate back to the page. No errors are thrown and all API calls are completed in the application.
@satviktechie1986 / @limhjgrace has there been any progress on this issue? We are experiencing a similar issue on our project using aws-rum-web 1.25.0 with angular version 19. When we navigate to a page, navigate away, then back to the page, the application becomes unresponsive. We would like to utilize this client for our production monitoring suite, but this issue has halted that progress completely.
I will answer the questions that @limhjgrace added above about our project to see if we can get any assistance or help debug the issue.
- No, if we do not initialize the RUM client the issue does not appear. It only appears if RUM has been initialized.
- We have the correct values in our client configuration, and confirmed we are receiving data in cloudwatch.
- NA
- NA
We assume that the AWS RUM client is "hanging" at some point when we navigate back to the page. No errors are thrown and all API calls are completed in the application.
instead of using npm package i have inject javascript in my application startup component .
injectrumScript() { if (!document.getElementById('aws-rum-script')) { (function(n, i, v, r, s, c, x, z) { x = window['AwsRumClient'] = { q: [], n: n, i: i, v: v, r: r, c: c }; window[n] = function(c, p) { x.q.push({ c: c, p: p }); }; z = document.createElement('script'); z.async = true; z.src = s; document.head.insertBefore(z, document.head.getElementsByTagName('script')[0]); })( 'cwr', environment.Rum_appIdLetAlliance, '1.0.0', 'eu-west-2', 'https://client.rum.us-east-1.amazonaws.com/1.19.0/cwr.js', { identityPoolId: environment.Rum_identityPoolId_LetAlliance, endpoint: 'https://dataplane.rum.eu-west-2.amazonaws.com', telemetries: ['performance', 'errors', 'http'], allowCookies: false, enableXRay: false } ); }
}
and it works for me