[VO-329] feat: Update Sentry

package.json

@@ -40,7 +40,6 @@
   },
   "homepage": "https://github.com/cozy/cozy-photos#readme",
   "devDependencies": {
-    "@sentry/cli": "1.72.1",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "11.2.7",
     "@testing-library/react-hooks": "8.0.1",
@@ -74,6 +73,7 @@
   },
   "dependencies": {
     "@cozy/minilog": "1.0.0",
+    "@sentry/react": "7.118.0",
     "classnames": "2.3.1",
     "cozy-authentication": "2.10.10",
     "cozy-bar": "^12.2.4",
@@ -102,7 +102,6 @@
     "log-prefix": "0.1.1",
     "node-fetch": "2.6.7",
     "prop-types": "15.8.1",
-    "raven-js": "3.27.2",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-hot-loader": "^4.13.1",

src/lib/sentry.js

@@ -0,0 +1,39 @@
+import * as Sentry from '@sentry/react'
+import { useEffect } from 'react'
+import {
+  Routes,
+  useLocation,
+  useNavigationType,
+  createRoutesFromChildren,
+  createHashRouter,
+  matchRoutes
+} from 'react-router-dom'
+
+import appMetadata from 'photos/appMetadata'
+
+Sentry.init({
+  dsn: 'https://[email protected]/81',
+  environment: process.env.NODE_ENV,
+  release: appMetadata.version,
+  integrations: [
+    // We also want to capture the `console.error` to, among other things,
+    // report the logs present in the `try/catch
+    Sentry.captureConsoleIntegration({ levels: ['error'] }),
+    Sentry.reactRouterV6BrowserTracingIntegration({
+      useEffect,
+      useLocation,
+      useNavigationType,
+      createRoutesFromChildren,
+      matchRoutes
+    })
+  ],
+  tracesSampleRate: 0.1,
+  // React log these warnings(bad Proptypes), in a console.error,
+  // it is not relevant to report this type of information to Sentry
+  ignoreErrors: [/^Warning: /]
+})
+
+export const sentryCreateBrowserRouter =
+  Sentry.wrapCreateBrowserRouter(createHashRouter)
+
+export const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes)

src/photos/components/AppRouter.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { createHashRouter, Navigate, RouterProvider } from 'react-router-dom'
+import { Navigate, RouterProvider } from 'react-router-dom'
 import { isFlagshipApp } from 'cozy-device-helper'
 import flag from 'cozy-flags'
 
@@ -11,6 +11,8 @@ import Backup from '../ducks/backup'
 import { AlbumsView, AlbumPhotos, PhotosPicker } from '../ducks/albums'
 import { TimelinePhotosViewer, AlbumPhotosViewer } from './PhotosViewer'
 
+import { sentryCreateBrowserRouter } from 'lib/sentry'
+
 function ErrorBoundary() {
   // If there is error uncaugth we redirect to homepage
   return <Navigate to="photos" replace />
@@ -20,7 +22,7 @@ const getRouter = () => {
   const DEFAULT_ROUTE =
     flag('flagship.backup.enabled') && isFlagshipApp() ? 'backup' : 'photos'
 
-  return createHashRouter([
+  return sentryCreateBrowserRouter([
     {
       element: <Layout />,
       children: [

src/photos/targets/browser/index.jsx

@@ -31,7 +31,6 @@ import appReducers from 'photos/reducers'
 import AppRouter from 'photos/components/AppRouter'
 import memoize from 'lodash/memoize'
 
-import { configureReporter, setCozyUrl } from 'lib/reporter'
 import appMetadata from 'photos/appMetadata'
 import doctypes from './doctypes'
 
@@ -63,8 +62,6 @@ const setupAppContext = memoize(() => {
     token: data.token
   })
 
-  configureReporter()
-  setCozyUrl(cozyUrl)
   let middlewares = [thunkMiddleware, loggerMiddleware]
 
   // Enable Redux dev tools

src/photos/targets/public/index.jsx

@@ -10,11 +10,12 @@ import { Provider } from 'react-redux'
 import { createStore, applyMiddleware, combineReducers } from 'redux'
 import thunkMiddleware from 'redux-thunk'
 import { createLogger } from 'redux-logger'
-import { HashRouter, Routes, Route, Navigate } from 'react-router-dom'
+import { HashRouter, Route, Navigate } from 'react-router-dom'
 import CozyClient, { CozyProvider, RealTimeQueries } from 'cozy-client'
 import { RealtimePlugin } from 'cozy-realtime'
 import flag from 'cozy-flags'
 import AlertProvider from 'cozy-ui/transpiled/react/providers/Alert'
+import { SentryRoutes } from 'lib/sentry'
 
 import { BarProvider } from 'cozy-bar'
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
@@ -32,7 +33,6 @@ import doctypes from '../browser/doctypes'
 import App from './App'
 import { AlbumPhotosViewer } from 'photos/components/PhotosViewer'
 
-import { configureReporter, setCozyUrl } from 'lib/reporter'
 import { WebviewIntentProvider } from 'cozy-intent'
 
 document.addEventListener('DOMContentLoaded', init)
@@ -55,8 +55,6 @@ async function init() {
   client.registerPlugin(RealtimePlugin)
   client.registerPlugin(flag.plugin)
 
-  configureReporter()
-  setCozyUrl(cozyUrl)
   const store = createStore(
     combineReducers({
       cozy: client.reducer()
@@ -78,7 +76,7 @@ async function init() {
                 <AlertProvider>
                   <RealTimeQueries doctype="io.cozy.settings" />
                   <HashRouter>
-                    <Routes>
+                    <SentryRoutes>
                       <Route path="shared/:albumId" element={<App />}>
                         <Route
                           path=":photoId"
@@ -89,7 +87,7 @@ async function init() {
                         path="*"
                         element={<Navigate to={`shared/${id}`} />}
                       />
-                    </Routes>
+                    </SentryRoutes>
                   </HashRouter>
                 </AlertProvider>
               </BreakpointsProvider>