Merge pull request #299 from CaritasDeutschland/hotfix-activeSessionS…

…ession fix: fixed errors from error logs
Onlineberatung · Dec 17, 2021 · 2a998b5 · 2a998b5
2 parents d1c204b + 1e5b853
commit 2a998b5
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -87,6 +87,7 @@
 		"sass-loader": "^10.1.1",
 		"semver": "7.3.5",
 		"sockjs-client": "1.5.1",
+		"stacktrace-js": "^2.0.2",
 		"style-loader": "2.0.0",
 		"terser-webpack-plugin": "4.2.3",
 		"ts-pnp": "1.2.0",

diff --git a/src/components/app/ErrorBoundary.tsx b/src/components/app/ErrorBoundary.tsx
@@ -1,4 +1,5 @@
 import React, { ReactNode, Component } from 'react';
+import StackTrace from 'stacktrace-js';
 import { apiPostError } from '../../api/apiPostError';
 import { redirectToErrorPage } from '../error/errorHandling';
 import { Loading } from './Loading';
@@ -21,6 +22,7 @@ export type ErrorBoundaryError = {
 		'Referer'?: string;
 	};
 	stack: string;
+	parsedStack?: string;
 };
 
 class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
@@ -29,6 +31,8 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
 		window: null
 	};
 
+	prevError: null | Error = null;
+
 	componentDidMount() {
 		this.setState({
 			window: typeof window !== 'undefined' ? window : null
@@ -38,6 +42,13 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
 	componentDidCatch(error, info) {
 		const { window } = this.state;
 
+		const isNewError =
+			!this.prevError || error.toString() !== this.prevError.toString();
+
+		if (!isNewError) return;
+
+		this.prevError = error;
+
 		const errorBoundaryError: ErrorBoundaryError = {
 			name: error.name,
 			message: error.message,
@@ -58,9 +69,19 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
 			};
 		}
 
-		apiPostError(errorBoundaryError, info).finally(() => {
-			redirectToErrorPage(500);
-		});
+		StackTrace.fromError(error)
+			.then((stackFrames) => {
+				errorBoundaryError.parsedStack = stackFrames
+					.map((sf) => {
+						return sf.toString();
+					})
+					.join('\n');
+			})
+			.finally(() => {
+				apiPostError(errorBoundaryError, info).finally(() => {
+					redirectToErrorPage(500);
+				});
+			});
 	}
 
 	static getDerivedStateFromError() {

diff --git a/src/components/askerInfo/AskerInfo.tsx b/src/components/askerInfo/AskerInfo.tsx
@@ -39,7 +39,7 @@ export const AskerInfo = () => {
 	const isLiveChat = isAnonymousSession(activeSession?.session);
 	const isGroupChat = isGroupChatForSessionItem(activeSession);
 	const sessionListType = getTypeOfLocation();
-	const isPeerChat = activeSession.session?.isPeerChat;
+	const isPeerChat = activeSession?.session?.isPeerChat;
 
 	if (!activeSession) {
 		return <Loading></Loading>;

diff --git a/src/components/askerInfo/AskerInfoData.tsx b/src/components/askerInfo/AskerInfoData.tsx
@@ -27,7 +27,7 @@ export const AskerInfoData = () => {
 	const isLiveChat = isAnonymousSession(activeSession?.session);
 
 	const consultingType = useConsultingType(
-		activeSession.session.consultingType
+		activeSession?.session.consultingType
 	);
 
 	const userSessionData = getContact(activeSession).sessionData;
@@ -48,7 +48,7 @@ export const AskerInfoData = () => {
 					{consultingType.titles.default}
 				</p>
 			</div>
-			{activeSession.session.consultingType === 0 && !isLiveChat && (
+			{activeSession?.session.consultingType === 0 && !isLiveChat && (
 				<div className="profile__data__item">
 					<p className="profile__data__label">
 						{translate('userProfile.data.postcode')}

diff --git a/src/components/askerInfo/AskerInfoMonitoring.tsx b/src/components/askerInfo/AskerInfoMonitoring.tsx
@@ -38,7 +38,7 @@ export const AskerInfoMonitoring = () => {
 	);
 
 	useEffect(() => {
-		apiGetMonitoring(activeSession.session.id)
+		apiGetMonitoring(activeSession?.session.id)
 			.then((monitoringData) => {
 				setMonitoringData(monitoringData);
 			})
@@ -52,12 +52,12 @@ export const AskerInfoMonitoring = () => {
 	cleanMonitoringData = deleteKeyFromObject(cleanMonitoringData, 'meta');
 
 	const resort =
-		activeSession.session.consultingType === 0
+		activeSession?.session.consultingType === 0
 			? 'monitoringAddiction'
 			: 'monitoringU25';
 	const monitoringLink = `${getSessionListPathForLocation()}/${
-		activeSession.session.groupId
-	}/${activeSession.session.id}/userProfile/monitoring${
+		activeSession?.session.groupId
+	}/${activeSession?.session.id}/userProfile/monitoring${
 		sessionListTab ? `?sessionListTab=${sessionListTab}` : ''
 	}`;
 

diff --git a/src/components/message/MessageItemComponent.tsx b/src/components/message/MessageItemComponent.tsx
@@ -177,7 +177,7 @@ export const MessageItemComponent = ({
 	const showForwardMessage = () =>
 		hasRenderedMessage &&
 		activeSession.type !== SESSION_LIST_TYPES.ENQUIRY &&
-		chatItem.feedbackGroupId &&
+		chatItem?.feedbackGroupId &&
 		hasUserAuthority(AUTHORITIES.USE_FEEDBACK, userData) &&
 		!activeSession?.isFeedbackSession;
 

diff --git a/src/components/session/SessionItemComponent.tsx b/src/components/session/SessionItemComponent.tsx
@@ -93,8 +93,10 @@ export const SessionItemComponent = (props: SessionItemProps) => {
 	const getSessionListTab = () =>
 		`${sessionListTab ? `?sessionListTab=${sessionListTab}` : ''}`;
 
+	const { isAnonymousEnquiry } = props;
+
 	const resetUnreadCount = () => {
-		if (!props.isAnonymousEnquiry) {
+		if (!isAnonymousEnquiry) {
 			setNewMessages(0);
 			initMessageCount = messages?.length;
 			scrollContainerRef.current
@@ -104,13 +106,13 @@ export const SessionItemComponent = (props: SessionItemProps) => {
 	};
 
 	useEffect(() => {
-		if (!props.isAnonymousEnquiry) {
+		if (scrollContainerRef.current) {
 			resetUnreadCount();
 		}
-	}, []); // eslint-disable-line
+	}, [scrollContainerRef]); // eslint-disable-line
 
 	useEffect(() => {
-		if (!props.isAnonymousEnquiry && messages) {
+		if (!isAnonymousEnquiry && messages) {
 			if (
 				initialScrollCompleted &&
 				isMyMessage(messages[messages.length - 1]?.userId)
@@ -193,7 +195,7 @@ export const SessionItemComponent = (props: SessionItemProps) => {
 		}
 		setIsRequestInProgress(true);
 
-		apiEnquiryAcceptance(sessionId, props.isAnonymousEnquiry)
+		apiEnquiryAcceptance(sessionId, isAnonymousEnquiry)
 			.then(() => {
 				setOverlayItem(enquirySuccessfullyAcceptedOverlayItem);
 				setCurrentGroupId(sessionGroupId);
@@ -284,7 +286,7 @@ export const SessionItemComponent = (props: SessionItemProps) => {
 	const isOnlyEnquiry = typeIsEnquiry(getTypeOfLocation());
 
 	const buttonItem: ButtonItem = {
-		label: props.isAnonymousEnquiry
+		label: isAnonymousEnquiry
 			? translate('enquiry.acceptButton.anonymous')
 			: translate('enquiry.acceptButton'),
 		type: BUTTON_TYPES.PRIMARY
@@ -351,7 +353,7 @@ export const SessionItemComponent = (props: SessionItemProps) => {
 				legalComponent={props.legalComponent}
 			/>
 
-			{!props.isAnonymousEnquiry && (
+			{!isAnonymousEnquiry && (
 				<div
 					id="session-scroll-container"
 					className="session__content"
@@ -361,9 +363,8 @@ export const SessionItemComponent = (props: SessionItemProps) => {
 					{messages &&
 						resortData &&
 						messages.map((message: MessageItem, index) => (
-							<>
+							<React.Fragment key={index}>
 								<MessageItemComponent
-									key={index}
 									clientName={
 										getContact(activeSession).username
 									}
@@ -376,7 +377,7 @@ export const SessionItemComponent = (props: SessionItemProps) => {
 								/>
 								{index === messages.length - 1 &&
 									enableInitialScroll()}
-							</>
+							</React.Fragment>
 						))}
 					<div
 						className={`session__scrollToBottom ${
@@ -401,7 +402,7 @@ export const SessionItemComponent = (props: SessionItemProps) => {
 				</div>
 			)}
 
-			{props.isAnonymousEnquiry && (
+			{isAnonymousEnquiry && (
 				<div className="session__content session__content--anonymousEnquiry">
 					<Headline
 						semanticLevel="3"
@@ -452,7 +453,7 @@ export const SessionItemComponent = (props: SessionItemProps) => {
 				</div>
 			) : null}
 
-			{!props.isAnonymousEnquiry &&
+			{!isAnonymousEnquiry &&
 				(!typeIsEnquiry(getTypeOfLocation()) ||
 					(typeIsEnquiry(getTypeOfLocation()) &&
 						hasUserAuthority(