feat: add error message

canyon-project · Feb 2, 2024 · 895ea83 · 895ea83
1 parent 8546b69
commit 895ea83
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 2 deletions.
diff --git a/packages/canyon-backend/package.json b/packages/canyon-backend/package.json
@@ -39,6 +39,7 @@
     "body-parser": "^1.20.2",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.1",
+    "cookie-parser": "^1.4.6",
     "dayjs": "^1.11.10",
     "diff": "^5.1.0",
     "express": "^4.18.2",

diff --git a/packages/canyon-backend/src/app.controller.ts b/packages/canyon-backend/src/app.controller.ts
@@ -1,4 +1,4 @@
-import { Body, Controller, Get, Post, Request } from '@nestjs/common';
+import { Body, Controller, Get, Post, Req, Request } from '@nestjs/common';
 
 @Controller()
 export class AppController {
@@ -15,4 +15,11 @@ export class AppController {
       GITLAB_CLIENT_ID: process.env.GITLAB_CLIENT_ID,
     };
   }
+
+  @Post('/api/echo')
+  echo(@Body() body: any, @Req() request: any): any {
+    console.log(body);
+    console.log(request.cookies); // or "request.cookies['cookieKey']"
+    return body;
+  }
 }
diff --git a/packages/canyon-backend/src/main.ts b/packages/canyon-backend/src/main.ts
@@ -2,9 +2,11 @@ import { NestFactory } from '@nestjs/core';
 import { AppModule } from './app.module';
 import { json } from 'express';
 import { ValidationPipe } from '@nestjs/common';
+import * as cookieParser from 'cookie-parser';
 
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
+  app.use(cookieParser());
   app.useGlobalPipes(new ValidationPipe());
   app.use(
     json({

diff --git a/packages/canyon-platform/src/main.tsx b/packages/canyon-platform/src/main.tsx
@@ -3,22 +3,48 @@ import 'antd/dist/reset.css';
 import './index.css';
 
 import { ApolloClient, ApolloProvider, createHttpLink, InMemoryCache } from '@apollo/client';
+import { onError } from '@apollo/client/link/error';
+import { message } from 'antd';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 
 import App from './App.tsx';
 
+// 创建一个error link来处理错误
+const errorLink = onError(({ graphQLErrors, networkError }) => {
+  if (graphQLErrors) {
+    graphQLErrors.forEach(({ message: msg, locations, path }) => {
+      console.error(`[GraphQL error]: msg: ${msg}, Location: ${locations}, Path: ${path}`);
+      message.error(`[GraphQL error]: msg: ${msg}, Path: ${path}`);
+      if (
+        msg === 'Unauthorized' &&
+        window.location.pathname !== '/welcome' &&
+        window.location.pathname !== '/login'
+      ) {
+        localStorage.clear();
+        window.location.href = '/welcome';
+      }
+      // 在这里你可以执行自定义的操作，比如显示错误提示
+    });
+  }
+  if (networkError) {
+    console.error(`[Network error]: ${networkError}`);
+    // 在这里你可以执行自定义的操作，比如显示网络错误提示
+  }
+});
+
 // 创建一个http link来发送GraphQL请求
 const httpLink = createHttpLink({
   uri: '/graphql', // 你的GraphQL API的URL
+
   headers: {
     Authorization: `Bearer ` + (localStorage.getItem('token') || ''),
   },
 });
 
 // 创建Apollo Client实例
 const client = new ApolloClient({
-  link: httpLink, // 将error link和http link组合起来
+  link: errorLink.concat(httpLink), // 将error link和http link组合起来
   cache: new InMemoryCache(),
 });