Merge pull request #15 from LedgerHQ/feat/add-sentry-to-project

Add sentry to project

instrumentation.ts

@@ -0,0 +1,9 @@
+export async function register() {
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    await import("./sentry.server.config");
+  }
+
+  if (process.env.NEXT_RUNTIME === "edge") {
+    await import("./sentry.edge.config");
+  }
+}

next.config.mjs

@@ -1,3 +1,5 @@
+import { withSentryConfig } from "@sentry/nextjs";
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   compiler: {
@@ -26,4 +28,42 @@ const nextConfig = {
   },
 };
 
-export default nextConfig;
+const mergedConfig = withSentryConfig(
+  nextConfig,
+  {
+    org: "ledger",
+    project: "platform-app-coinify",
+    authToken: process.env.SENTRY_AUTH_TOKEN,
+    silent: false,
+  },
+  {
+    // For all available options, see:
+    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+    // Upload a larger set of source maps for prettier stack traces (increases build time)
+    widenClientFileUpload: true,
+
+    // Transpiles SDK to be compatible with IE11 (increases bundle size)
+    transpileClientSDK: true,
+
+    // Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+    // This can increase your server load as well as your hosting bill.
+    // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+    // side errors will fail.
+    // tunnelRoute: "/monitoring",
+
+    // Hides source maps from generated client bundles
+    hideSourceMaps: true,
+
+    // Automatically tree-shake Sentry logger statements to reduce bundle size
+    disableLogger: true,
+
+    // Enables automatic instrumentation of Vercel Cron Monitors.
+    // See the following for more information:
+    // https://docs.sentry.io/product/crons/
+    // https://vercel.com/docs/cron-jobs
+    // automaticVercelMonitors: true,
+  }
+);
+
+export default mergedConfig;

package.json

@@ -14,10 +14,11 @@
   "dependencies": {
     "@babel/core": "^7.24.5",
     "@emotion/is-prop-valid": "^1.2.2",
-    "@ledgerhq/exchange-sdk": "^0.7.0",
+    "@ledgerhq/exchange-sdk": "^0.7.7",
     "@ledgerhq/react-ui": "^0.14.18",
     "@ledgerhq/wallet-api-client": "^1.5.9",
     "@ledgerhq/wallet-api-exchange-module": "^0.6.0",
+    "@sentry/nextjs": "^8.27.0",
     "@types/react-transition-group": "^4.4.10",
     "bignumber.js": "^9.1.2",
     "color": "^4.2.3",

sentry.client.config.js

@@ -0,0 +1,14 @@
+import * as Sentry from "@sentry/nextjs";
+
+const isDev = process.env.NEXT_PUBLIC_VERCEL_ENV === "development";
+
+Sentry.init({
+  environment: process.env.NEXT_PUBLIC_VERCEL_ENV,
+  debug: isDev,
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  integrations: [Sentry.replayIntegration()],
+  tracesSampleRate: 0.1,
+  autoSessionTracking: false,
+  sendClientReports: false,
+  maxBreadcrumbs: 20,
+});

sentry.edge.config.js

@@ -0,0 +1,13 @@
+import * as Sentry from "@sentry/nextjs";
+
+const isDev = process.env.NEXT_PUBLIC_VERCEL_ENV === "development";
+
+Sentry.init({
+  environment: process.env.NEXT_PUBLIC_VERCEL_ENV,
+  debug: isDev,
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  tracesSampleRate: 0.1,
+  autoSessionTracking: false,
+  sendClientReports: false,
+  maxBreadcrumbs: 20,
+});

sentry.properties

@@ -0,0 +1,3 @@
+defaults.url=https://sentry.io/
+defaults.org=ledger
+defaults.project=platform-app-coinify

sentry.server.config.js

@@ -0,0 +1,13 @@
+import * as Sentry from "@sentry/nextjs";
+
+const isDev = process.env.NEXT_PUBLIC_VERCEL_ENV === "development";
+
+Sentry.init({
+  environment: process.env.NEXT_PUBLIC_VERCEL_ENV,
+  debug: isDev,
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  tracesSampleRate: 0.1,
+  autoSessionTracking: false,
+  sendClientReports: false,
+  maxBreadcrumbs: 20,
+});

src/app/Coinify/Coinify.tsx

@@ -3,6 +3,7 @@
 // @flow
 
 import React, { useState, useCallback, useEffect, useRef } from "react";
+import * as Sentry from "@sentry/nextjs";
 
 import styled from "styled-components";
 
@@ -144,6 +145,7 @@ const Coinify = ({ currencies, accounts }: CoinifyProps) => {
             : SELECTABLE_CURRENCIES_OFFRAMP,
       })
       .catch((error) => {
+        Sentry.captureException(error);
         console.error({ error });
         return undefined;
       });

src/app/Coinify/CoinifyWidget.tsx

@@ -3,12 +3,15 @@
 // @flow
 
 import React, { useState, useEffect, useRef, useCallback } from "react";
+import * as Sentry from "@sentry/nextjs";
+
 import styled from "styled-components";
 import querystring from "querystring";
 import type { Account } from "@ledgerhq/wallet-api-client";
 import { ExchangeSDK } from "@ledgerhq/exchange-sdk";
 import BigNumber from "bignumber.js";
 import { useApi } from "../Providers/LedgerLiveSDKProvider";
+import { GetSellPayload } from "@ledgerhq/exchange-sdk/dist/types/sdk";
 
 type CoinifyConfig = {
   host: string;
@@ -287,22 +290,31 @@ const CoinifyWidget = ({
   );
 
   const initSellFlow = useCallback(async () => {
-    const getSellPayload = async (nonce: string) => {
+    const getSellPayload: GetSellPayload = async (nonce: string) => {
       const coinifyContext = await setTransactionId(nonce);
 
       return {
         recipientAddress: (coinifyContext.transferIn as any).details.account,
         amount: new BigNumber(coinifyContext.inAmount),
-        binaryPayload: Buffer.from(coinifyContext.providerSig.payload, "ascii"),
+        binaryPayload: Buffer.from(
+          coinifyContext.providerSig.payload,
+          "ascii"
+        ) as unknown as string,
         signature: Buffer.from(coinifyContext.providerSig.signature, "base64"),
       };
     };
-    await api.sell({
-      accountId: account.id,
-      amount: new BigNumber(0),
-      feeStrategy: "MEDIUM",
-      getSellPayload,
-    });
+
+    try {
+      await api.sell({
+        accountId: account.id,
+        amount: new BigNumber(0),
+        feeStrategy: "MEDIUM",
+        getSellPayload,
+      });
+    } catch (error) {
+      Sentry.captureException(error);
+      console.error(error);
+    }
   }, [account.id, api, setTransactionId]);
 
   useEffect(() => {
@@ -346,7 +358,10 @@ const CoinifyWidget = ({
             api.walletAPI.account
               .receive(account.id)
               .then((verifiedAddress) => handleOnResultBuy(verifiedAddress))
-              .catch((error: unknown) => console.error(error));
+              .catch((error: unknown) => {
+                Sentry.captureException(error);
+                console.error(error);
+              });
 
             if (currency) {
               console.log(

src/app/Providers/LedgerLiveSDKProvider.tsx

@@ -1,4 +1,6 @@
 import React, { createContext, useState, useEffect, useContext } from "react";
+import * as Sentry from "@sentry/nextjs";
+
 import { ExchangeSDK } from "@ledgerhq/exchange-sdk";
 
 type LedgerLiveSDKContextType = {
@@ -44,7 +46,9 @@ export const useApi = (): ExchangeSDK => {
 
   // This should theoretically never happen
   if (!api) {
-    throw new Error("API not initialized");
+    const error = new Error("API not initialized");
+    Sentry.captureException(error);
+    throw error;
   }
 
   return api;

src/app/global-error.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import NextError from "next/error";
+import { useEffect } from "react";
+
+export default function GlobalError({
+  error,
+}: {
+  error: Error & { digest?: string };
+}) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <html>
+      <body>
+        <NextError statusCode={0} />
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
+import * as Sentry from "@sentry/nextjs";
 
 import { Account, Currency } from "@ledgerhq/wallet-api-client";
 import Coinify from "./Coinify/Coinify";
@@ -31,6 +32,7 @@ const Page = () => {
         });
       })
       .catch((error) => {
+        Sentry.captureException(error);
         setState({ error, data: undefined });
       });