feat: add client-side sentry

SocialGouv · Oct 3, 2018 · 12e8965 · 12e8965
1 parent 4e0c748
commit 12e8965
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 6 deletions.
diff --git a/.env.sample b/.env.sample
@@ -1,3 +1,4 @@
 NODE_ENV=development
 API_URL=http://127.0.0.1:1337/api/v1
 PORT=3000
+SENTRY_PUBLIC_DSN=https://[email protected]/5
diff --git a/Dockerfile b/Dockerfile
@@ -10,10 +10,12 @@ RUN npm install
 COPY . /app
 
 ARG API_URL
+ARG SENTRY_PUBLIC_DSN
 ARG NODE_ENV
 
 # for javascript browser build
 ENV API_URL=$API_URL
+ENV SENTRY_PUBLIC_DSN=$SENTRY_PUBLIC_DSN
 ENV NODE_ENV=$NODE_ENV
 
 RUN npm run build

diff --git a/README.md b/README.md
@@ -13,6 +13,7 @@ Créez un fichier `.env` :
 ```shell
 NODE_ENV=development
 API_URL=https://127.0.0.1:1337
+SENTRY_PUBLIC_DSN=https://path/to/sentry
 PORT=3000
 ```
 

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -12,6 +12,7 @@ services:
       args:
         NODE_ENV: $NODE_ENV
         API_URL: $API_URL
+        SENTRY_PUBLIC_DSN: $SENTRY_PUBLIC_DSN
     ports:
       - $PORT:$PORT
     restart: always
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
   "keywords": [],
   "main": "src/index.js",
   "dependencies": {
+    "@sentry/browser": "^4.0.6",
     "@socialgouv/code-du-travail-ui": "^1.2.3",
     "@zeit/next-css": "^1.0.0",
     "dotenv": "^6.0.0",

diff --git a/pages/_error.js b/pages/_error.js
@@ -1,18 +1,46 @@
 import React from "react";
 import Link from "next/link";
 
+let Sentry = require("@sentry/browser");
+
+const SENTRY_PUBLIC_DSN = process.env.SENTRY_PUBLIC_DSN;
+
+if (typeof window !== "undefined") {
+  Sentry.init({ dsn: SENTRY_PUBLIC_DSN, debug: true });
+}
+
+const BrowserException = args => new Error(args);
+
+const notifySentry = err => {
+  if (typeof window === "undefined") {
+    return;
+  }
+  Sentry.configureScope(scope => {
+    scope.setTag(`ssr`, false);
+  });
+
+  Sentry.captureException(err);
+};
+
 export default class Error extends React.Component {
-  static getInitialProps({ res, err }) {
-    const statusCode = res ? res.statusCode : err ? err.statusCode : null;
-    return { statusCode };
+  static async getInitialProps({ req, res, err }) {
+    return { statusCode: res.statusCode };
+  }
+
+  componentDidMount() {
+    let { statusCode } = this.props;
+    if (statusCode && statusCode > 200) {
+      notifySentry(new BrowserException(statusCode));
+    }
   }
 
   render() {
+    const { statusCode } = this.props;
     return (
       <div>
         <p className="center" style={{ padding: "20% 0", fontSize: "2em" }}>
           {this.props.statusCode
-            ? `Une erreur ${this.props.statusCode} est apparue sur le serveur`
+            ? `Une erreur ${statusCode} est apparue sur le serveur`
             : "Une erreur est apparue sur le client"}
           <br />
           <br />

diff --git a/pages/fiche-ministere-travail.js b/pages/fiche-ministere-travail.js
@@ -12,7 +12,7 @@ import Html from "../src/common/Html";
 import Search from "../src/search/Search";
 
 const BigError = ({ children }) => (
-  <Container style={{ fontSize: "2em", textAlign: "center", margin: "20%" }}>
+  <Container style={{ fontSize: "1.5em", textAlign: "center", margin: "20%" }}>
     <Alert warning>{children}</Alert>
   </Container>
 );
@@ -58,7 +58,9 @@ class Fiche extends React.Component {
     return (
       <React.Fragment>
         <Head>
-          <title>Fiche ministère du travail : {data._source.title}</title>
+          {data && (
+            <title>Fiche ministère du travail : {data._source.title}</title>
+          )}
         </Head>
         <Search />
         {!data && <BigError>Cette fiche n'a pas été trouvée</BigError>}

diff --git a/server.js b/server.js
@@ -12,6 +12,7 @@ const handler = routes.getRequestHandler(app);
 const PORT = process.env.PORT || 3000;
 const NODE_ENV = process.env.NODE_ENV || "development";
 const API_URL = process.env.API_URL || "http://127.0.0.1:1337/api/v1";
+const SENTRY_PUBLIC_DSN = process.env.SENTRY_PUBLIC_DSN;
 
 app.prepare().then(() => {
   express()
@@ -26,6 +27,7 @@ app.prepare().then(() => {
 
     - process.env.NODE_ENV : ${NODE_ENV}
     - process.env.API_URL : ${API_URL}
+    - process.env.SENTRY_PUBLIC_DSN : ${SENTRY_PUBLIC_DSN}
 
 `);
     });