Skip to content

Commit fb4b3fd

Browse files
egelhausegelhaus
committed
Add Sentry feedback integration to support component
1 parent bb8aa86 commit fb4b3fd

File tree

1 file changed

+75
-18
lines changed

1 file changed

+75
-18
lines changed

‎apps/frontend/src/components/layout/support.tsx‎

Lines changed: 75 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,100 @@
11
'use client';
22

3+
import * as Sentry from '@sentry/nextjs';
34
import { EventEmitter } from 'events';
4-
import { useEffect, useState } from 'react';
5+
import { useEffect, useState, useRef } from 'react';
56
import { useVariables } from '@gitroom/react/helpers/variable.context';
67
import { useT } from '@gitroom/react/translation/get.transation.service.client';
78
export const supportEmitter = new EventEmitter();
8-
export const Support = () => {
9-
const [show, setShow] = useState(true);
10-
const { discordUrl } = useVariables();
9+
function AttachToFeedbackButton() {
10+
const [feedback, setFeedback] = useState<any>();
1111
const t = useT();
12-
12+
// Read `getFeedback` on the client only, to avoid hydration errors during server rendering
1313
useEffect(() => {
14-
supportEmitter.on('change', setShow);
15-
return () => {
16-
supportEmitter.off('state', setShow);
17-
};
14+
// Sentry.getFeedback is only available when Sentry is initialized on the client
15+
try {
16+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
17+
const fb = (Sentry as any).getFeedback?.();
18+
setFeedback(fb);
19+
} catch (e) {
20+
setFeedback(undefined);
21+
}
1822
}, []);
19-
if (!discordUrl || !show) return null;
23+
const buttonRef = useRef<HTMLButtonElement | null>(null);
24+
useEffect(() => {
25+
if (feedback && buttonRef.current) {
26+
const unsubscribe = feedback.attachTo(buttonRef.current);
27+
return unsubscribe;
28+
}
29+
return () => {};
30+
}, [feedback]);
2031
return (
21-
<div
22-
className="bg-customColor39 w-[194px] h-[58px] fixed end-[20px] bottom-[20px] z-[500] text-[16px] text-customColor40 rounded-[30px] !rounded-br-[0] cursor-pointer flex justify-center items-center gap-[10px]"
23-
onClick={() => window.open(discordUrl)}
32+
<button
33+
type="button"
34+
ref={buttonRef}
35+
className="bg-customColor39 w-[194px] h-[58px] text-[16px] text-customColor40 rounded-[30px] !rounded-br-[0] cursor-pointer flex justify-center items-center gap-[10px]"
2436
>
2537
<div>
2638
<svg
27-
width="32"
28-
height="33"
29-
viewBox="0 0 32 33"
39+
width="24"
40+
height="24"
41+
viewBox="0 0 24 24"
3042
fill="none"
3143
xmlns="http://www.w3.org/2000/svg"
3244
className="mb-[4px]"
3345
>
3446
<path
35-
d="M26.1303 11.347C24.3138 9.93899 22.134 9.23502 19.8331 9.11768L19.4697 9.4697C21.5284 9.93899 23.345 10.8776 25.0404 12.1683C22.9817 11.1123 20.6807 10.4084 18.2587 10.1737C17.5321 10.0563 16.9266 10.0563 16.2 10.0563C15.4734 10.0563 14.8679 10.0563 14.1413 10.1737C11.7193 10.4084 9.41833 11.1123 7.35963 12.1683C9.05501 10.8776 10.8716 9.93899 12.9303 9.4697L12.5669 9.11768C10.266 9.23502 8.08621 9.93899 6.26972 11.347C4.21101 15.1017 3.1211 19.3257 3 23.6669C4.81649 25.5443 7.35963 26.7177 10.0239 26.7177C10.0239 26.7177 10.8716 25.779 11.477 24.9576C9.90277 24.6057 8.44954 23.7843 7.48074 22.4937C8.32843 22.963 9.17611 23.4323 10.0239 23.7843C11.1138 24.2537 12.2037 24.4883 13.2936 24.723C14.2624 24.8403 15.2312 24.9576 16.2 24.9576C17.1688 24.9576 18.1376 24.8403 19.1064 24.723C20.1963 24.4883 21.2862 24.2537 22.3761 23.7843C23.2239 23.4323 24.0716 22.963 24.9193 22.4937C23.9505 23.7843 22.4972 24.6057 20.923 24.9576C21.5284 25.779 22.3761 26.7177 22.3761 26.7177C25.0404 26.7177 27.5835 25.5443 29.4 23.6669C29.2789 19.3257 28.189 15.1017 26.1303 11.347ZM12.2037 21.555C10.9927 21.555 9.90278 20.499 9.90278 19.2084C9.90278 17.9177 10.9927 16.8617 12.2037 16.8617C13.4147 16.8617 14.5046 17.9177 14.5046 19.2084C14.5046 20.499 13.4147 21.555 12.2037 21.555ZM20.1963 21.555C18.9853 21.555 17.8954 20.499 17.8954 19.2084C17.8954 17.9177 18.9853 16.8617 20.1963 16.8617C21.4073 16.8617 22.4972 17.9177 22.4972 19.2084C22.4972 20.499 21.4073 21.555 20.1963 21.555Z"
47+
d="M12 2C6.48 2 2 5.58 2 10C2 12.39 3.22 14.57 5.11 15.99C5.04 16.66 4.9 17.55 4.8 18.01C4.68 18.57 5.06 19 5.63 19C8.61 19 9.99 17.17 10.6 16.31C11.36 16.58 12.17 16.73 13 16.73C18.52 16.73 23 13.15 23 8.73C23 4.31 18.52 2 12 2Z"
3648
fill="currentColor"
3749
/>
3850
</svg>
3951
</div>
40-
<div>{t('discord_support', 'Discord Support')}</div>
52+
<div>{t('feedback', 'Send feedback')}</div>
53+
</button>
54+
);
55+
}
56+
57+
export const Support = () => {
58+
const [show, setShow] = useState(true);
59+
const { discordUrl, sentryDsn } = useVariables();
60+
const t = useT();
61+
62+
useEffect(() => {
63+
supportEmitter.on('change', setShow);
64+
return () => {
65+
supportEmitter.off('change', setShow);
66+
};
67+
}, []);
68+
69+
if (!discordUrl || !show) return null;
70+
71+
return (
72+
<div className="flex flex-col items-end gap-2 fixed end-[20px] bottom-[20px] z-[500]">
73+
{sentryDsn ? (
74+
<AttachToFeedbackButton />
75+
) : null}
76+
77+
<div
78+
className="bg-customColor39 w-[194px] h-[58px] text-[16px] text-customColor40 rounded-[30px] !rounded-br-[0] cursor-pointer flex justify-center items-center gap-[10px]"
79+
onClick={() => window.open(discordUrl)}
80+
>
81+
<div>
82+
<svg
83+
width="32"
84+
height="33"
85+
viewBox="0 0 32 33"
86+
fill="none"
87+
xmlns="http://www.w3.org/2000/svg"
88+
className="mb-[4px]"
89+
>
90+
<path
91+
d="M26.1303 11.347C24.3138 9.93899 22.134 9.23502 19.8331 9.11768L19.4697 9.4697C21.5284 9.93899 23.345 10.8776 25.0404 12.1683C22.9817 11.1123 20.6807 10.4084 18.2587 10.1737C17.5321 10.0563 16.9266 10.0563 16.2 10.0563C15.4734 10.0563 14.8679 10.0563 14.1413 10.1737C11.7193 10.4084 9.41833 11.1123 7.35963 12.1683C9.05501 10.8776 10.8716 9.93899 12.9303 9.4697L12.5669 9.11768C10.266 9.23502 8.08621 9.93899 6.26972 11.347C4.21101 15.1017 3.1211 19.3257 3 23.6669C4.81649 25.5443 7.35963 26.7177 10.0239 26.7177C10.0239 26.7177 10.8716 25.779 11.477 24.9576C9.90277 24.6057 8.44954 23.7843 7.48074 22.4937C8.32843 22.963 9.17611 23.4323 10.0239 23.7843C11.1138 24.2537 12.2037 24.4883 13.2936 24.723C14.2624 24.8403 15.2312 24.9576 16.2 24.9576C17.1688 24.9576 18.1376 24.8403 19.1064 24.723C20.1963 24.4883 21.2862 24.2537 22.3761 23.7843C23.2239 23.4323 24.0716 22.963 24.9193 22.4937C23.9505 23.7843 22.4972 24.6057 20.923 24.9576C21.5284 25.779 22.3761 26.7177 22.3761 26.7177C25.0404 26.7177 27.5835 25.5443 29.4 23.6669C29.2789 19.3257 28.189 15.1017 26.1303 11.347ZM12.2037 21.555C10.9927 21.555 9.90278 20.499 9.90278 19.2084C9.90278 17.9177 10.9927 16.8617 12.2037 16.8617C13.4147 16.8617 14.5046 17.9177 14.5046 19.2084C14.5046 20.499 13.4147 21.555 12.2037 21.555ZM20.1963 21.555C18.9853 21.555 17.8954 20.499 17.8954 19.2084C17.8954 17.9177 18.9853 16.8617 20.1963 16.8617C21.4073 16.8617 22.4972 17.9177 22.4972 19.2084C22.4972 20.499 21.4073 21.555 20.1963 21.555Z"
92+
fill="currentColor"
93+
/>
94+
</svg>
95+
</div>
96+
<div>{t('discord_support', 'Discord Support')}</div>
97+
</div>
4198
</div>
4299
);
43100
};

0 commit comments

Comments
 (0)