Merge pull request #56 from sensebox/feat/add-sentry

Feat/add sentry

package-lock.json

@@ -1502,6 +1502,88 @@
       "resolved": "https://registry.npmjs.org/@rooks/use-mutation-observer/-/use-mutation-observer-3.4.0.tgz",
       "integrity": "sha512-q10+v3WbvSt5fj55VMikTPaUZ9Yl+IYDsymodWr2+cKx0PD97VBeWYjk3xHJPqJgejBHwnrwiNkJKGFY5iW+WQ=="
     },
+    "@sentry/browser": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-6.0.0.tgz",
+      "integrity": "sha512-R4+MHb5FyVZCz3EVnaquvT1mwOM2MWP4gBqjYEADY5m0XWoHiJf0skFkWt8iEKJanzGbhl4PMb9gHuJj6YfVLw==",
+      "requires": {
+        "@sentry/core": "6.0.0",
+        "@sentry/types": "6.0.0",
+        "@sentry/utils": "6.0.0",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@sentry/core": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-6.0.0.tgz",
+      "integrity": "sha512-afAiOachs/WfGWc9LsJBFnJMhqQVENyzfSMnf7sLRvxPAw8n7IrXY0R09MKmG0SlAnTKN2pWoQFzFF+J3NuHBA==",
+      "requires": {
+        "@sentry/hub": "6.0.0",
+        "@sentry/minimal": "6.0.0",
+        "@sentry/types": "6.0.0",
+        "@sentry/utils": "6.0.0",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@sentry/hub": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-6.0.0.tgz",
+      "integrity": "sha512-s8IsW6LvEH7ACnniQcxxb/9uEyjmoQ/TAoryTJN2qyPzzrHTw8NCyMuJvK+8ivUvRViz5AvtuOFf8AJlh9lzeA==",
+      "requires": {
+        "@sentry/types": "6.0.0",
+        "@sentry/utils": "6.0.0",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@sentry/minimal": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-6.0.0.tgz",
+      "integrity": "sha512-daYdEzTr+ERMwViu6RpWHOfk0oZrSNqdx+7bejTqmFHqO4pt+9ZrMiw3vinL+MWQcKXwD95uXBz6O/ryrVdPtg==",
+      "requires": {
+        "@sentry/hub": "6.0.0",
+        "@sentry/types": "6.0.0",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@sentry/react": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@sentry/react/-/react-6.0.0.tgz",
+      "integrity": "sha512-GYX110NSodd8wGUbnyxemndTijM+U7dI/WjFSPOyJdLB2hzzPjJ9kUqtuobT/JlGzbWE2278WysAuySne6bUGw==",
+      "requires": {
+        "@sentry/browser": "6.0.0",
+        "@sentry/minimal": "6.0.0",
+        "@sentry/types": "6.0.0",
+        "@sentry/utils": "6.0.0",
+        "hoist-non-react-statics": "^3.3.2",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@sentry/tracing": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@sentry/tracing/-/tracing-6.0.0.tgz",
+      "integrity": "sha512-7Qes5godGCuvcEBxynFuRT5iiFR5aOfBdvdPmWnx29XbZKQvhjvBsDtdoVSQUmv/nCLtpH6UWeLwddFvXh3A2w==",
+      "requires": {
+        "@sentry/hub": "6.0.0",
+        "@sentry/minimal": "6.0.0",
+        "@sentry/types": "6.0.0",
+        "@sentry/utils": "6.0.0",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@sentry/types": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-6.0.0.tgz",
+      "integrity": "sha512-yueRSRGPCahuju/UMdtOt8LIIncbpwLINQd9Q8E4OXtoPpMHR6Oun8sMKCPd+Wq3piI5yRDzKkGCl+sH7mHVrA=="
+    },
+    "@sentry/utils": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-6.0.0.tgz",
+      "integrity": "sha512-dMMWOT69bQ4CF1R33dOnXIOyiHRWsUAON3nFVljV1JNNTDA69YwaF9f5FIT0DKpO4qhgTlElsm8WgHI9prAVEQ==",
+      "requires": {
+        "@sentry/types": "6.0.0",
+        "tslib": "^1.9.3"
+      }
+    },
     "@sheerun/mutationobserver-shim": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz",

package.json

@@ -10,6 +10,8 @@
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@fortawesome/react-fontawesome": "^0.1.11",
     "@material-ui/core": "^4.11.0",
+    "@sentry/react": "^6.0.0",
+    "@sentry/tracing": "^6.0.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",

src/components/Home.js

@@ -125,7 +125,6 @@ class Home extends Component {
             </Grid>
             : null}
         </Grid>
-
         <HintTutorialExists />
         <Snackbar
           open={this.state.snackbar}

src/components/User/Account.js

@@ -16,15 +16,15 @@ import Link from '@material-ui/core/Link';
 import Typography from '@material-ui/core/Typography';
 import Tooltip from '@material-ui/core/Tooltip';
 
-import { faUser, faAt, faMapMarkerAlt, faCloudSunRain, faBox } from "@fortawesome/free-solid-svg-icons";
+import { faUser, faAt, faMapMarkerAlt, faCloudSunRain, faBox, faUserTag } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 
 export class Account extends Component {
 
-  render(){
+  render() {
-    const {user} = this.props;
+    const { user } = this.props;
-    return(
+    return (
       <div>
         <Breadcrumbs content={[{ link: '/user', title: 'Account' }]} />
 
@@ -32,7 +32,7 @@ export class Account extends Component {
         <Alert>
           Alle Angaben stammen von <Link color='primary' rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link> und können dort verwaltet werden.
         </Alert>
-        <Paper style={{width: 'max-content', maxWidth: '100%'}}>
+        <Paper style={{ width: 'max-content', maxWidth: '100%' }}>
           <List>
             <ListItem>
               <Tooltip title='Nutzername'>
@@ -40,7 +40,7 @@ export class Account extends Component {
                   <FontAwesomeIcon icon={faUser} />
                 </ListItemIcon>
               </Tooltip>
-              <ListItemText primary={user.name} />
+              <ListItemText primary={`Name: ${user.name}`} />
             </ListItem>
             <ListItem>
               <Tooltip title='Email'>
@@ -48,30 +48,36 @@ export class Account extends Component {
                   <FontAwesomeIcon icon={faAt} />
                 </ListItemIcon>
               </Tooltip>
-              <ListItemText primary={user.email} />
+              <ListItemText primary={`Email: ${user.email}`} />
+            </ListItem>
+            <ListItem>
+              <ListItemIcon>
+                <FontAwesomeIcon icon={faUserTag} />
+              </ListItemIcon>
+              <ListItemText primary={`Userrolle: ${user.blocklyRole}`} />
             </ListItem>
           </List>
         </Paper>
-        <Divider style={{marginBottom: '16px', marginTop: '16px'}}/>
+        <Divider style={{ marginBottom: '16px', marginTop: '16px' }} />
-        <div style={{marginBottom: '8px'}}>
+        <div style={{ marginBottom: '8px' }}>
           {this.props.user.boxes.length < 1 ?
             <Typography>
               Du hast noch keine senseBox registriert. Besuche <Link color='primary' rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link> um eine senseBox zu registrieren.
             </Typography>
-          : <Typography style={{fontWeight: 'bold', fontSize: '1.1rem'}}>
+            : <Typography style={{ fontWeight: 'bold', fontSize: '1.1rem' }}>
-            Du hast {this.props.user.boxes.length} {this.props.user.boxes.length === 1 ? 'senseBox' : 'senseBoxen'} registriert:
+              Du hast {this.props.user.boxes.length} {this.props.user.boxes.length === 1 ? 'senseBox' : 'senseBoxen'} registriert:
           </Typography>}
         </div>
         <Grid container spacing={2}>
           {this.props.user.boxes.map((box, i) => {
-            var sensors = box.sensors.map(sensor => sensor.title );
+            var sensors = box.sensors.map(sensor => sensor.title);
             return (
               <Grid item xs={12} sm={6} md={4} xl={3} key={i}>
                 <Link rel="noreferrer" target="_blank" href={`https://opensensemap.org/explore/${box._id}`} color="primary" style={{ textDecoration: 'none', color: 'inherit' }}>
                   <Paper>
                     <List>
                       <ListItem>
-                        <Typography style={{fontWeight: 'bold', fontSize: '1.6rem'}}>{box.name}</Typography>
+                        <Typography style={{ fontWeight: 'bold', fontSize: '1.6rem' }}>{box.name}</Typography>
                       </ListItem>
                       <ListItem>
                         <Tooltip title='Modell'>
@@ -80,7 +86,7 @@ export class Account extends Component {
                           </ListItemIcon>
                         </Tooltip>
                         <div>
-                          <Typography style={{fontWeight: 'bold', marginRight: '4px'}}>Modell: </Typography>
+                          <Typography style={{ fontWeight: 'bold', marginRight: '4px' }}>Modell: </Typography>
                           <Typography>{box.model}</Typography>
                         </div>
                       </ListItem>
@@ -91,7 +97,7 @@ export class Account extends Component {
                           </ListItemIcon>
                         </Tooltip>
                         <div>
-                          <Typography style={{fontWeight: 'bold', marginRight: '4px'}}>Standort: </Typography>
+                          <Typography style={{ fontWeight: 'bold', marginRight: '4px' }}>Standort: </Typography>
                           <Typography>{`${box.exposure} (lon: ${box.currentLocation.coordinates[0]}, lat: ${box.currentLocation.coordinates[1]})`}</Typography>
                         </div>
                       </ListItem>
@@ -102,7 +108,7 @@ export class Account extends Component {
                           </ListItemIcon>
                         </Tooltip>
                         <div>
-                          <Typography style={{fontWeight: 'bold', marginRight: '4px'}}>Sensoren: </Typography>
+                          <Typography style={{ fontWeight: 'bold', marginRight: '4px' }}>Sensoren: </Typography>
                           <Typography>{sensors.join(', ')}</Typography>
                         </div>
                       </ListItem>

src/index.js

@@ -3,6 +3,22 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import * as Sentry from "@sentry/react";
+import { Integrations } from "@sentry/tracing";
+
+
+Sentry.init({
+  dsn: "https://ffe5d54461f64c46b4bed5d77c130d6f@o507523.ingest.sentry.io/5598758",
+  autoSessionTracking: true,
+  integrations: [
+    new Integrations.BrowserTracing(),
+  ],
+
+  // We recommend adjusting this value in production, or using tracesSampler
+  // for finer control
+  tracesSampleRate: 1.0,
+});
+
 
 ReactDOM.render(
   <React.StrictMode>