Merge pull request #251 from blockscout/debug-ci

debug CI

configs/app/config.ts

@@ -7,10 +7,6 @@ const baseUrl = [
   process.env.NEXT_PUBLIC_VERCEL_URL || process.env.NEXT_PUBLIC_APP_HOST,
   process.env.NEXT_PUBLIC_APP_PORT ? ':' + process.env.NEXT_PUBLIC_APP_PORT : '',
 ].join('');
-const apiUrl = [
-  process.env.NEXT_PUBLIC_API_ENDPOINT || 'https://blockscout.com',
-  process.env.NEXT_PUBLIC_API_BASE_PATH,
-].filter(Boolean).join('');
 
 const config = Object.freeze({
   env,
@@ -41,7 +37,10 @@ const config = Object.freeze({
   host: process.env.NEXT_PUBLIC_APP_HOST,
   port: process.env.NEXT_PUBLIC_APP_PORT,
   baseUrl,
-  apiUrl,
+  api: {
+    endpoint: process.env.NEXT_PUBLIC_API_ENDPOINT || 'https://blockscout.com',
+    basePath: process.env.NEXT_PUBLIC_API_BASE_PATH || '',
+  },
 });
 
 export default config;

lib/api/fetch.ts

@@ -3,6 +3,7 @@ import type { NextApiRequest } from 'next';
 import type { RequestInit, Response } from 'node-fetch';
 import nodeFetch from 'node-fetch';
 
+import { httpLogger } from 'lib/api/logger';
 import * as cookies from 'lib/cookies';
 
 // first arg can be only a string
@@ -14,7 +15,13 @@ export default function fetchFactory(_req: NextApiRequest) {
       'content-type': 'application/json',
       cookie: `${ cookies.NAMES.API_TOKEN }=${ _req.cookies[cookies.NAMES.API_TOKEN] }`,
     };
-    const url = new URL(path, appConfig.apiUrl);
+    const url = new URL(path, appConfig.api.endpoint);
+
+    httpLogger.logger.info({
+      message: 'Trying to call API',
+      url,
+      req: _req,
+    });
 
     return nodeFetch(url.toString(), {
       headers,

lib/api/getUrlWithNetwork.ts

 // import * as Sentry from '@sentry/nextjs';
+import appConfig from 'configs/app/config';
 import type { NextApiRequest } from 'next';
 
-import * as cookies from 'lib/cookies';
-
 export default function getUrlWithNetwork(_req: NextApiRequest, path: string) {
-  const networkType = _req.cookies[cookies.NAMES.NETWORK_TYPE];
-  const networkSubType = _req.cookies[cookies.NAMES.NETWORK_SUB_TYPE];
-
-  // if (!networkType) {
-  // TODO setup sentry for NodeJS
-  // we probably do not need to if we will do api request from client directly
-  //   Sentry.captureException(new Error('Incorrect network'), { extra: { networkType, networkSubType } });
-  // }
-
-  return `/${ networkType }${ networkSubType ? '/' + networkSubType : '' }/${ path }`;
+  return [
+    appConfig.api.basePath,
+    path,
+  ]
+    .filter((segment) => segment !== '' && segment !== '/')
+    .join('');
 }

lib/api/handler.ts

@@ -2,11 +2,14 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 
 import fetchFactory from 'lib/api/fetch';
 import getUrlWithNetwork from 'lib/api/getUrlWithNetwork';
+import { httpLogger } from 'lib/api/logger';
 
 type Methods = 'GET' | 'POST' | 'PUT' | 'DELETE';
 
 export default function createHandler(getUrl: (_req: NextApiRequest) => string, allowedMethods: Array<Methods>) {
   const handler = async(_req: NextApiRequest, res: NextApiResponse) => {
+    httpLogger(_req, res);
+
     if (!_req.method || !allowedMethods.includes(_req.method as Methods)) {
       res.setHeader('Allow', allowedMethods);
       res.status(405).end(`Method ${ _req.method } Not Allowed`);
@@ -15,7 +18,7 @@ export default function createHandler(getUrl: (_req: NextApiRequest) => string,
 
     const isBodyDisallowed = _req.method === 'GET' || _req.method === 'HEAD';
 
-    const url = getUrlWithNetwork(_req, `api${ getUrl(_req) }`);
+    const url = getUrlWithNetwork(_req, `/api${ getUrl(_req) }`);
     const fetch = fetchFactory(_req);
     const response = await fetch(url, {
       method: _req.method,
@@ -38,6 +41,8 @@ export default function createHandler(getUrl: (_req: NextApiRequest) => string,
       responseError = defaultError;
     }
 
+    httpLogger.logger.error({ err: responseError, url: _req.url });
+
     res.status(500).json(responseError);
   };
 

lib/api/logger.ts

+import pino from 'pino-http';
+
+export const httpLogger = pino();

lib/cookies.ts

@@ -5,8 +5,6 @@ import isBrowser from './isBrowser';
 
 export enum NAMES {
   NAV_BAR_COLLAPSED='nav_bar_collapsed',
-  NETWORK_TYPE='network_type',
-  NETWORK_SUB_TYPE='network_sub_type',
   API_TOKEN='_explorer_key',
 }
 

package.json

@@ -9,7 +9,7 @@
   },
   "scripts": {
     "dev": "next dev",
-    "dev:poa_core": "./node_modules/.bin/dotenv -e ./configs/envs/.env.poa_core -e ./configs/envs/.env.common -e ./configs/envs/.env.secrets next dev",
+    "dev:poa_core": "./node_modules/.bin/dotenv -e ./configs/envs/.env.poa_core -e ./configs/envs/.env.common -e ./configs/envs/.env.secrets next dev | ./node_modules/.bin/pino-pretty",
     "build": "next build",
     "build:vercel": "./node_modules/.bin/dotenv -e ./configs/envs/.env.poa_core -e ./configs/envs/.env.common next build",
     "build:docker": "docker build --build-arg GIT_COMMIT_SHA=$(git rev-parse HEAD) -t blockscout ./",
@@ -41,6 +41,8 @@
     "next": "12.2.5",
     "next-react-svg": "1.1.3",
     "node-fetch": "^3.2.9",
+    "pino-http": "^8.2.1",
+    "pino-pretty": "^9.1.1",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-hook-form": "^7.33.1",

pages/api/account/csrf/index.ts

@@ -2,9 +2,12 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 
 import fetchFactory from 'lib/api/fetch';
 import getUrlWithNetwork from 'lib/api/getUrlWithNetwork';
+import { httpLogger } from 'lib/api/logger';
 
 export default async function csrfHandler(_req: NextApiRequest, res: NextApiResponse) {
-  const url = getUrlWithNetwork(_req, `api/account/v1/get_csrf`);
+  httpLogger(_req, res);
+
+  const url = getUrlWithNetwork(_req, `/api/account/v1/get_csrf`);
   const fetch = fetchFactory(_req);
   const response = await fetch(url);
 
@@ -14,5 +17,8 @@ export default async function csrfHandler(_req: NextApiRequest, res: NextApiResp
     return;
   }
 
-  res.status(500).json({ statusText: response.statusText, status: response.status });
+  const responseError = { statusText: response.statusText, status: response.status };
+  httpLogger.logger.error({ err: responseError, url: _req.url });
+
+  res.status(500).json(responseError);
 }

pages/api/account/watchlist/get-with-tokens.ts

@@ -6,15 +6,19 @@ import type { TWatchlistItem } from 'types/client/account';
 
 import fetchFactory from 'lib/api/fetch';
 import getUrlWithNetwork from 'lib/api/getUrlWithNetwork';
+import { httpLogger } from 'lib/api/logger';
 
 const watchlistWithTokensHandler = async(_req: NextApiRequest, res: NextApiResponse<Array<TWatchlistItem>>) => {
+  httpLogger(_req, res);
+
   const fetch = fetchFactory(_req);
-  const url = getUrlWithNetwork(_req, 'api/account/v1/user/watchlist');
+  const url = getUrlWithNetwork(_req, '/api/account/v1/user/watchlist');
   const watchlistResponse = await fetch(url, { method: 'GET' });
 
   const watchlistData = await watchlistResponse.json() as WatchlistAddresses;
 
   if (watchlistResponse.status !== 200) {
+    httpLogger.logger.error({ err: { statusText: 'Watchlist token error', status: 500 }, url: _req.url });
     res.status(500).end(watchlistData || 'Unknown error');
     return;
   }

ui/shared/Page/Page.tsx

 import { Flex } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
-import { useRouter } from 'next/router';
 import React from 'react';
 
-import * as cookies from 'lib/cookies';
 import useFetch from 'lib/hooks/useFetch';
 import PageContent from 'ui/shared/Page/PageContent';
 import Header from 'ui/snippets/header/Header';
@@ -15,23 +13,10 @@ interface Props {
 }
 
 const Page = ({ children, wrapChildren = true }: Props) => {
-  const router = useRouter();
   const fetch = useFetch();
 
-  const networkType = router.query.network_type;
-  const networkSubType = router.query.network_sub_type;
-
   useQuery<unknown, unknown, unknown>([ 'csrf' ], async() => await fetch('/api/account/csrf'));
 
-  React.useEffect(() => {
-    if (typeof networkType === 'string') {
-      cookies.set(cookies.NAMES.NETWORK_TYPE, networkType);
-    }
-    if (typeof networkSubType === 'string') {
-      cookies.set(cookies.NAMES.NETWORK_SUB_TYPE, networkSubType);
-    }
-  }, [ networkType, networkSubType ]);
-
   const renderedChildren = wrapChildren ? (
     <PageContent>{ children }</PageContent>
   ) : children;