Skip to content

Commit a0cdce2

Browse files
hcientisthcientist
authored
Merge pull request #44 from Lab-Lab-Lab/main
add sentry
2 parents d480521 + bef682f commit a0cdce2

File tree

11 files changed

+3046
-235
lines changed

11 files changed

+3046
-235
lines changed

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,6 @@ yarn-error.log*
3232

3333
# vercel
3434
.vercel
35+
36+
# Sentry Config File
37+
.env.sentry-build-plugin

‎components/loginout.js

+7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
11
import { useSession } from 'next-auth/react';
22
import Link from 'next/link';
3+
import { useEffect } from 'react';
34
import Nav from 'react-bootstrap/Nav';
45
import { useSelector } from 'react-redux';
6+
import * as Sentry from "@sentry/nextjs";
57

68
function LoginOut() {
79
const { data: session } = useSession();
810
const currentUserInfo = useSelector((state) => state.currentUser);
11+
useEffect(() => {
12+
if (currentUserInfo.loaded) {
13+
Sentry.setUser({ id: currentUserInfo.id, username: currentUserInfo.username });
14+
}
15+
}, [session, currentUserInfo.loaded]);
916
// const loginStatus = useSelector((state) => state.loginStatus);
1017
return session ? (
1118
<Link href="/api/auth/signout" passHref legacyBehavior>

‎components/recorder.js

+58-57
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
FaVolumeDown,
1515
FaVolumeUp,
1616
FaRegTrashAlt,
17-
FaDownload
17+
FaDownload,
1818
} from 'react-icons/fa';
1919
import { useDispatch, useSelector } from 'react-redux';
2020
import ListGroup from 'react-bootstrap/ListGroup';
@@ -89,7 +89,7 @@ function AudioViewer({ src }) {
8989
height: '1.05em',
9090
cursor: 'pointer',
9191
color: 'red',
92-
paddingLeft: '2px'
92+
paddingLeft: '2px',
9393
}}
9494
onClick={toggleVolume}
9595
/>
@@ -112,7 +112,7 @@ function AudioViewer({ src }) {
112112
width: '1.23em',
113113
height: '1.23em',
114114
cursor: 'pointer',
115-
paddingLeft: '3px'
115+
paddingLeft: '3px',
116116
}}
117117
onClick={toggleVolume}
118118
/>
@@ -131,7 +131,7 @@ function AudioViewer({ src }) {
131131
cursorWidth: 3,
132132
height: 200,
133133
barGap: 3,
134-
dragToSeek: true
134+
dragToSeek: true,
135135
// plugins:[
136136
// WaveSurferRegions.create({maxLength: 60}),
137137
// WaveSurferTimeLinePlugin.create({container: containerT.current})
@@ -161,7 +161,7 @@ function AudioViewer({ src }) {
161161
flexDirection: 'column',
162162
justifyContent: 'center',
163163
alignItems: 'center',
164-
margin: '0 1rem 0 1rem'
164+
margin: '0 1rem 0 1rem',
165165
}}
166166
>
167167
<div
@@ -173,7 +173,7 @@ function AudioViewer({ src }) {
173173
style={{
174174
display: 'flex',
175175
justifyContent: 'center',
176-
alignItems: 'center'
176+
alignItems: 'center',
177177
}}
178178
>
179179
<Button
@@ -185,7 +185,7 @@ function AudioViewer({ src }) {
185185
width: '40px',
186186
height: '40px',
187187
borderRadius: '50%',
188-
padding: '0'
188+
padding: '0',
189189
}}
190190
onClick={playPause}
191191
>
@@ -220,13 +220,13 @@ export default function Recorder({ submit, accompaniment }) {
220220

221221
const getSupportedMimeType = () => {
222222
const types = [
223+
'audio/ogg;codecs=opus',
223224
'audio/webm',
224225
'audio/webm;codecs=opus',
225-
'audio/ogg;codecs=opus',
226226
'audio/mp4',
227-
'audio/mpeg'
227+
'audio/mpeg',
228228
];
229-
return types.find(type => MediaRecorder.isTypeSupported(type)) || null;
229+
return types.find((type) => MediaRecorder.isTypeSupported(type)) || null;
230230
};
231231
const [min, setMinute] = useState(0);
232232
const [sec, setSecond] = useState(0);
@@ -236,14 +236,11 @@ export default function Recorder({ submit, accompaniment }) {
236236
const router = useRouter();
237237
const { slug, piece, actCategory, partType } = router.query;
238238

239-
useEffect(
240-
() => {
241-
setBlobInfo([]);
242-
setBlobURL('');
243-
setBlobData();
244-
},
245-
[partType]
246-
);
239+
useEffect(() => {
240+
setBlobInfo([]);
241+
setBlobURL('');
242+
setBlobData();
243+
}, [partType]);
247244

248245
const startRecording = () => {
249246
if (isBlocked) {
@@ -263,7 +260,7 @@ export default function Recorder({ submit, accompaniment }) {
263260
mediaRecorder.stop();
264261
};
265262

266-
const downloadRecording = i => {
263+
const downloadRecording = (i) => {
267264
const url = window.URL.createObjectURL(blobInfo[i].data);
268265
const a = document.createElement('a');
269266
a.style.display = 'none';
@@ -283,12 +280,19 @@ export default function Recorder({ submit, accompaniment }) {
283280
};
284281

285282
const submitRecording = (i, submissionId) => {
283+
const extension = mimeType.includes('webm')
284+
? 'webm'
285+
: mimeType.includes('ogg')
286+
? 'ogg'
287+
: mimeType.includes('mp4')
288+
? 'm4a'
289+
: 'wav';
286290
const formData = new FormData(); // TODO: make filename reflect assignment
287291
formData.append(
288292
'file',
289-
new File([blobInfo[i].data], 'student-recording', {
290-
type: mimeType
291-
})
293+
new File([blobInfo[i].data], `student-recording-${i}.${extension}`, {
294+
type: mimeType,
295+
}),
292296
);
293297
// dispatch(submit({ audio: formData }));
294298
submit({ audio: formData, submissionId });
@@ -314,10 +318,10 @@ export default function Recorder({ submit, accompaniment }) {
314318
autoGainControl: false,
315319
channelCount: 1,
316320
sampleRate: 48000,
317-
latency: 0
318-
}
321+
latency: 0,
322+
},
319323
})
320-
.then(stream => {
324+
.then((stream) => {
321325
const supportedType = getSupportedMimeType();
322326
if (!supportedType) {
323327
console.error('No supported audio MIME type found');
@@ -327,10 +331,10 @@ export default function Recorder({ submit, accompaniment }) {
327331
setMimeType(supportedType);
328332

329333
const recorder = new MediaRecorder(stream, {
330-
mimeType: supportedType
334+
mimeType: supportedType,
331335
});
332336

333-
recorder.ondataavailable = e => {
337+
recorder.ondataavailable = (e) => {
334338
if (e.data.size > 0) {
335339
chunksRef.current.push(e.data);
336340
}
@@ -341,12 +345,12 @@ export default function Recorder({ submit, accompaniment }) {
341345
setBlobData(blob);
342346
const url = URL.createObjectURL(blob);
343347
setBlobURL(url);
344-
setBlobInfo(prevInfo => [
348+
setBlobInfo((prevInfo) => [
345349
...prevInfo,
346350
{
347351
url,
348-
data: blob
349-
}
352+
data: blob,
353+
},
350354
]);
351355
setIsRecording(false);
352356
chunksRef.current = [];
@@ -355,39 +359,36 @@ export default function Recorder({ submit, accompaniment }) {
355359
setMediaRecorder(recorder);
356360
setIsBlocked(false);
357361
})
358-
.catch(err => {
362+
.catch((err) => {
359363
console.log('Permission Denied');
360364
setIsBlocked(true);
361365
});
362366
}
363367
}, []);
364368

365-
useEffect(
366-
() => {
367-
let interval = null;
368-
if (isRecording) {
369-
interval = setInterval(() => {
370-
setSecond(sec + 1);
371-
if (sec === 59) {
372-
setMinute(min + 1);
373-
setSecond(0);
374-
}
375-
if (min === 99) {
376-
setMinute(0);
377-
setSecond(0);
378-
}
379-
}, 1000);
380-
} else if (!isRecording && sec !== 0) {
381-
setMinute(0);
382-
setSecond(0);
383-
clearInterval(interval);
384-
}
385-
return () => {
386-
clearInterval(interval);
387-
};
388-
},
389-
[isRecording, sec]
390-
);
369+
useEffect(() => {
370+
let interval = null;
371+
if (isRecording) {
372+
interval = setInterval(() => {
373+
setSecond(sec + 1);
374+
if (sec === 59) {
375+
setMinute(min + 1);
376+
setSecond(0);
377+
}
378+
if (min === 99) {
379+
setMinute(0);
380+
setSecond(0);
381+
}
382+
}, 1000);
383+
} else if (!isRecording && sec !== 0) {
384+
setMinute(0);
385+
setSecond(0);
386+
clearInterval(interval);
387+
}
388+
return () => {
389+
clearInterval(interval);
390+
};
391+
}, [isRecording, sec]);
391392

392393
return (
393394
<>

‎instrumentation.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import * as Sentry from '@sentry/nextjs';
2+
3+
export async function register() {
4+
if (process.env.NEXT_RUNTIME === 'edge') {
5+
await import('./sentry.edge.config');
6+
}
7+
}
8+
9+
export const onRequestError = Sentry.captureRequestError;

‎next.config.js

+44
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,47 @@ module.exports = {
1717
defaultLocale: 'en',
1818
},
1919
};
20+
21+
// Injected content via Sentry wizard below
22+
23+
const { withSentryConfig } = require('@sentry/nextjs');
24+
25+
module.exports = withSentryConfig(module.exports, {
26+
// For all available options, see:
27+
// https://github.com/getsentry/sentry-webpack-plugin#options
28+
29+
org: 'lab-lab-lab',
30+
project: 'music-cpr-prod',
31+
32+
// Only print logs for uploading source maps in CI
33+
silent: !process.env.CI,
34+
35+
// For all available options, see:
36+
// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
37+
38+
// Upload a larger set of source maps for prettier stack traces (increases build time)
39+
widenClientFileUpload: true,
40+
41+
// Automatically annotate React components to show their full name in breadcrumbs and session replay
42+
reactComponentAnnotation: {
43+
enabled: true,
44+
},
45+
46+
// Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
47+
// This can increase your server load as well as your hosting bill.
48+
// Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
49+
// side errors will fail.
50+
// tunnelRoute: "/monitoring",
51+
52+
// Hides source maps from generated client bundles
53+
hideSourceMaps: true,
54+
55+
// Automatically tree-shake Sentry logger statements to reduce bundle size
56+
disableLogger: true,
57+
58+
// Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
59+
// See the following for more information:
60+
// https://docs.sentry.io/product/crons/
61+
// https://vercel.com/docs/cron-jobs
62+
automaticVercelMonitors: true,
63+
});

0 commit comments

Comments
 (0)