Repository: vbenjs/vue-vben-admin
Pull request #6250: feat: enhances compatibility with APIs returning large numeric values
Author: login: mynetfan
Created: 2025-05-21T02:29:11Z | Merged: 2025-05-23T07:22:18Z

支持后端接口返回长整型的数据

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Added a demonstration page for handling JSON data with large integer (BigInt) values, accessible under the features demos section.
  - Introduced a new API endpoint that returns user data with very large numeric IDs to showcase proper handling of BigInt in JSON responses.

- **Improvements**
  - Enhanced JSON response parsing to support large integers by converting them to strings, ensuring precision is maintained when displaying or processing BigInt values in the UI.

- **Chores**
  - Added dependencies for BigInt JSON parsing and their type definitions.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/apps/backend-mock/api/demo/bigint.ts b/apps/backend-mock/api/demo/bigint.ts
new file mode 100644
index 00000000000..880cc5ea820
--- /dev/null
+++ b/apps/backend-mock/api/demo/bigint.ts
@@ -0,0 +1,28 @@
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  const data = `
+  {
+    "code": 0,
+    "message": "success",
+    "data": [
+              {
+                "id": 123456789012345678901234567890123456789012345678901234567890,
+                "name": "John Doe",
+                "age": 30,
+                "email": "john-doe@demo.com"
+                },
+                {
+                "id": 987654321098765432109876543210987654321098765432109876543210,
+                "name": "Jane Smith",
+                "age": 25,
+                "email": "jane@demo.com"
+                }
+            ]
+  }
+  `;
+  setHeader(event, 'Content-Type', 'application/json');
+  return data;
+});
diff --git a/playground/package.json b/playground/package.json
index 3df57b98d1e..9446f38be66 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -48,8 +48,12 @@
     "@vueuse/core": "catalog:",
     "ant-design-vue": "catalog:",
     "dayjs": "catalog:",
+    "json-bigint": "catalog:",
     "pinia": "catalog:",
     "vue": "catalog:",
     "vue-router": "catalog:"
+  },
+  "devDependencies": {
+    "@types/json-bigint": "catalog:"
   }
 }
diff --git a/playground/src/api/examples/json-bigint.ts b/playground/src/api/examples/json-bigint.ts
new file mode 100644
index 00000000000..19e41e2e9e5
--- /dev/null
+++ b/playground/src/api/examples/json-bigint.ts
@@ -0,0 +1,10 @@
+import { requestClient } from '#/api/request';
+
+/**
+ * 发起请求
+ */
+async function getBigIntData() {
+  return requestClient.get('/demo/bigint');
+}
+
+export { getBigIntData };
diff --git a/playground/src/api/request.ts b/playground/src/api/request.ts
index f674859af09..e1e9e4f4f2d 100644
--- a/playground/src/api/request.ts
+++ b/playground/src/api/request.ts
@@ -1,7 +1,7 @@
 /**
  * 该文件可自行根据业务逻辑进行调整
  */
-import type { RequestClientOptions } from '@vben/request';
+import type { AxiosResponseHeaders, RequestClientOptions } from '@vben/request';
 
 import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
@@ -14,6 +14,7 @@ import {
 import { useAccessStore } from '@vben/stores';
 
 import { message } from 'ant-design-vue';
+import JSONBigInt from 'json-bigint';
 
 import { useAuthStore } from '#/store';
 
@@ -25,6 +26,12 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) {
   const client = new RequestClient({
     ...options,
     baseURL,
+    transformResponse: (data: any, header: AxiosResponseHeaders) => {
+      // storeAsString指示将BigInt存储为字符串，设为false则会存储为内置的BigInt类型
+      return header.getContentType()?.toString().includes('application/json')
+        ? JSONBigInt({ storeAsString: true }).parse(data)
+        : data;
+    },
   });
 
   /**
diff --git a/playground/src/router/routes/modules/demos.ts b/playground/src/router/routes/modules/demos.ts
index 7b9273737dd..3df4f0ad6e1 100644
--- a/playground/src/router/routes/modules/demos.ts
+++ b/playground/src/router/routes/modules/demos.ts
@@ -255,6 +255,16 @@ const routes: RouteRecordRaw[] = [
               title: $t('demos.features.requestParamsSerializer'),
             },
           },
+          {
+            name: 'BigIntDemo',
+            path: '/demos/features/json-bigint',
+            component: () =>
+              import('#/views/demos/features/json-bigint/index.vue'),
+            meta: {
+              icon: 'lucide:grape',
+              title: 'JSON BigInt',
+            },
+          },
         ],
       },
       // 面包屑导航
diff --git a/playground/src/views/demos/features/json-bigint/index.vue b/playground/src/views/demos/features/json-bigint/index.vue
new file mode 100644
index 00000000000..d1f58145cbd
--- /dev/null
+++ b/playground/src/views/demos/features/json-bigint/index.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { Alert, Button, Card } from 'ant-design-vue';
+
+import { getBigIntData } from '#/api/examples/json-bigint';
+
+const response = ref('');
+function fetchData() {
+  getBigIntData().then((res) => {
+    response.value = res;
+  });
+}
+</script>
+<template>
+  <Page
+    title="JSON BigInt Support"
+    description="解析后端返回的长整数（long/bigInt）。代码位置：playground/src/api/request.ts中的transformResponse"
+  >
+    <Card>
+      <Alert>
+        <template #message>
+          有些后端接口返回的ID是长整数，但javascript原生的JSON解析是不支持超过2^53-1的长整数的。
+          这种情况可以建议后端返回数据前将长整数转换为字符串类型。如果后端不接受我们的建议😡……
+          <br />
+          下面的按钮点击后会发起请求，接口返回的JSON数据中的id字段是超出整数范围的数字，已自动将其解析为字符串
+        </template>
+      </Alert>
+      <Button class="mt-4" type="primary" @click="fetchData">发起请求</Button>
+      <div>
+        <pre>
+        {{ response }}
+        </pre>
+      </div>
+    </Card>
+  </Page>
+</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fa50ca938c2..57789eb42d2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -84,6 +84,9 @@ catalogs:
     '@types/html-minifier-terser':
       specifier: ^7.0.2
       version: 7.0.2
+    '@types/json-bigint':
+      specifier: ^1.0.4
+      version: 1.0.4
     '@types/jsonwebtoken':
       specifier: ^9.0.9
       version: 9.0.9
@@ -291,6 +294,9 @@ catalogs:
     is-ci:
       specifier: ^4.1.0
       version: 4.1.0
+    json-bigint:
+      specifier: ^1.0.0
+      version: 1.0.0
     jsonc-eslint-parser:
       specifier: ^2.4.0
       version: 2.4.0
@@ -1877,6 +1883,9 @@ importers:
       dayjs:
         specifier: 'catalog:'
         version: 1.11.13
+      json-bigint:
+        specifier: 'catalog:'
+        version: 1.0.0
       pinia:
         specifier: ^3.0.2
         version: 3.0.2(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3))
@@ -1886,6 +1895,10 @@ importers:
       vue-router:
         specifier: 'catalog:'
         version: 4.5.1(vue@3.5.13(typescript@5.8.3))
+    devDependencies:
+      '@types/json-bigint':
+        specifier: 'catalog:'
+        version: 1.0.4
 
   scripts/turbo-run:
     dependencies:
@@ -4341,6 +4354,9 @@ packages:
   '@types/html-minifier-terser@7.0.2':
     resolution: {integrity: sha512-mm2HqV22l8lFQh4r2oSsOEVea+m0qqxEmwpc9kC1p/XzmjLWrReR9D/GRs8Pex2NX/imyEH9c5IU/7tMBQCHOA==}
 
+  '@types/json-bigint@1.0.4':
+    resolution: {integrity: sha512-ydHooXLbOmxBbubnA7Eh+RpBzuaIiQjh8WGJYQB50JFGFrdxW7JzVlyEV7fAXw0T2sqJ1ysTneJbiyNLqZRAag==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -5253,6 +5269,9 @@ packages:
     resolution: {integrity: sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==}
     engines: {node: '>=4'}
 
+  bignumber.js@9.3.0:
+    resolution: {integrity: sha512-EM7aMFTXbptt/wZdMlBv2t8IViwQL+h6SLHosp8Yf0dqJMTnY6iL32opnAB6kAdL0SZPuvcAzFr31o0c/R3/RA==}
+
   binary-extensions@2.3.0:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
@@ -7643,6 +7662,9 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  json-bigint@1.0.0:
+    resolution: {integrity: sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==}
+
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
@@ -14045,6 +14067,8 @@ snapshots:
 
   '@types/html-minifier-terser@7.0.2': {}
 
+  '@types/json-bigint@1.0.4': {}
+
   '@types/json-schema@7.0.15': {}
 
   '@types/jsonwebtoken@9.0.9':
@@ -15115,6 +15139,8 @@ snapshots:
     dependencies:
       is-windows: 1.0.2
 
+  bignumber.js@9.3.0: {}
+
   binary-extensions@2.3.0: {}
 
   bindings@1.5.0:
@@ -17775,6 +17801,10 @@ snapshots:
 
   jsesc@3.1.0: {}
 
+  json-bigint@1.0.0:
+    dependencies:
+      bignumber.js: 9.3.0
+
   json-buffer@3.0.1: {}
 
   json-parse-even-better-errors@2.3.1: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 00c384ef64e..98cd5e464f9 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -41,6 +41,7 @@ catalog:
   '@types/archiver': ^6.0.3
   '@types/eslint': ^9.6.1
   '@types/html-minifier-terser': ^7.0.2
+  '@types/json-bigint': ^1.0.4
   '@types/jsonwebtoken': ^9.0.9
   '@types/lodash.clonedeep': ^4.5.9
   '@types/lodash.get': ^4.4.9
@@ -112,6 +113,7 @@ catalog:
   happy-dom: ^17.4.6
   html-minifier-terser: ^7.2.0
   is-ci: ^4.1.0
+  json-bigint: ^1.0.0
   jsonc-eslint-parser: ^2.4.0
   jsonwebtoken: ^9.0.2
   lefthook: ^1.11.12


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 7**

<details>
<summary>🧹 Nitpick comments (1)</summary><blockquote>

<details>
<summary>playground/src/views/demos/features/json-bigint/index.vue (1)</summary><blockquote>

`32-36`: **Consider a more structured display of the response data**

The current implementation displays the raw response in a pre-formatted block, which works but isn't optimally user-friendly for complex data structures.


Consider using a more structured approach to display the data, such as:

```diff
-      <div>
-        <pre>
-        {{ response }}
-        </pre>
-      </div>
+      <div class="mt-4">
+        <h3>Response:</h3>
+        <a-spin :spinning="loading">
+          <div v-if="error" class="text-red-500">{{ error }}</div>
+          <div v-else-if="response">
+            <a-descriptions bordered>
+              <a-descriptions-item v-for="(value, key) in JSON.parse(response)" :key="key" :label="key">
+                <span :class="{ 'text-green-500': typeof value === 'string' && !isNaN(Number(value)) && Number(value) > Number.MAX_SAFE_INTEGER }">
+                  {{ value }}
+                </span>
+              </a-descriptions-item>
+            </a-descriptions>
+            <div class="mt-4">
+              <h4>Raw Response:</h4>
+              <pre>{{ response }}</pre>
+            </div>
+          </div>
+          <div v-else>No data yet. Click the button to fetch data.</div>
+        </a-spin>
+      </div>
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**
**Cache: Disabled due to data retention organization setting**
**Knowledge Base: Disabled due to data retention organization setting**


<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 8ac97688dad5acdc6cbd846c5993204932314f51 and 856495417763c406a6b6a38b71f2cf68274a9414.

</details>

<details>
<summary>⛔ Files ignored due to path filters (1)</summary>

* `pnpm-lock.yaml` is excluded by `!**/pnpm-lock.yaml`

</details>

<details>
<summary>📒 Files selected for processing (7)</summary>

* `apps/backend-mock/api/demo/bigint.ts` (1 hunks)
* `playground/package.json` (1 hunks)
* `playground/src/api/examples/json-bigint.ts` (1 hunks)
* `playground/src/api/request.ts` (3 hunks)
* `playground/src/router/routes/modules/demos.ts` (1 hunks)
* `playground/src/views/demos/features/json-bigint/index.vue` (1 hunks)
* `pnpm-workspace.yaml` (2 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (2)</summary>

<details>
<summary>playground/src/api/examples/json-bigint.ts (1)</summary><blockquote>

<details>
<summary>playground/src/api/request.ts (1)</summary>

* `requestClient` (116-118)

</details>

</blockquote></details>
<details>
<summary>apps/backend-mock/api/demo/bigint.ts (2)</summary><blockquote>

<details>
<summary>apps/backend-mock/utils/jwt-utils.ts (1)</summary>

* `verifyAccessToken` (26-45)

</details>
<details>
<summary>apps/backend-mock/utils/response.ts (1)</summary>

* `unAuthorizedResponse` (50-53)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (4)</summary>

* GitHub Check: Lint (windows-latest)
* GitHub Check: Check (windows-latest)
* GitHub Check: post-update (ubuntu-latest)
* GitHub Check: post-update (windows-latest)

</details>

<details>
<summary>🔇 Additional comments (14)</summary><blockquote>

<details>
<summary>playground/package.json (2)</summary>

`51-51`: **Appropriate dependency addition for BigInt handling.**

Adding `json-bigint` as a dependency is correct for supporting large numeric values in JSON responses from APIs. This aligns well with the PR objective to enhance compatibility with backend APIs returning large integer values.

---

`56-57`: **Good practice adding TypeScript type definitions.**

Including the corresponding `@types/json-bigint` type definitions for TypeScript support is good practice. This ensures proper type checking and IDE support when working with the `json-bigint` library.

</details>
<details>
<summary>pnpm-workspace.yaml (2)</summary>

`44-44`: **Correctly added type definitions to catalog.**

Adding `@types/json-bigint` with version ^1.0.4 to the catalog ensures consistent dependency versioning across the project.

---

`116-116`: **Appropriate version selection for json-bigint.**

Using version ^1.0.0 for `json-bigint` is appropriate as it's a stable release. This library will help parse JSON with large integer values that exceed JavaScript's Number.MAX_SAFE_INTEGER limits.

</details>
<details>
<summary>playground/src/api/examples/json-bigint.ts (3)</summary>

`1-2`: **Clean import of requestClient.**

Good use of the barrel import pattern to access the configured requestClient from the app's request module.

---

`3-8`: **Well-structured API function with appropriate documentation.**

The `getBigIntData` function is simple, focused, and properly documented. It follows the project's API calling patterns as seen in the provided context.

---

`10-10`: **Clean named export of API function.**

Using a named export for `getBigIntData` is consistent with modular design principles and makes importing specific functions clearer.

</details>
<details>
<summary>playground/src/router/routes/modules/demos.ts (1)</summary>

`258-267`: **Well-integrated route configuration for the new BigInt demo.**

The route is correctly added to the features demo section with appropriate naming, path, component import, and metadata. The icon choice and title are descriptive of the feature's purpose.

</details>
<details>
<summary>playground/src/api/request.ts (3)</summary>

`4-4`: **Appropriate imports for handling large integers in JSON responses**

The addition of `AxiosResponseHeaders` and `JSONBigInt` imports sets up the foundation for safely handling large integers returned from backend APIs.



Also applies to: 17-17

---

`30-30`: **Good documentation for the storeAsString option**

The comment clearly explains the purpose of the `storeAsString` option, which aids future developers in understanding the implementation.

---

`31-33`: <details>
<summary>❓ Verification inconclusive</summary>

**Verify content type checking is robust**

The content type check uses `includes('application/json')` which should work for common JSON content types, but confirm it handles all variations your APIs might return.


Run this script to check all content types returned by your demo endpoints:

---

🏁 Script executed:

```shell
#!/bin/bash
# Check content types returned by API endpoints

# List all API endpoints in the backend mock
echo "Checking content types from mock endpoints:"
fd "\.ts$" apps/backend-mock/api -x grep -l "createResponse" {} \; | xargs cat | grep -o "Content-Type: [^'\"]*" | sort | uniq

# Additional check for any non-standard JSON content types
echo -e "\nChecking for non-standard JSON content types:"
fd "\.ts$" apps/backend-mock/api -x grep -l "Content-Type.*json" {} \; | xargs cat | grep -o "Content-Type: [^'\"]*" | sort | uniq
```

Length of output: 473

---



</details>

**Confirm JSON media types detection**

I wasn’t able to find any `Content-Type` headers in your mock endpoints, so please:

- Verify that all your APIs (especially in `apps/backend-mock/api`) send an explicit `Content-Type` header.
- Update the logic in `playground/src/api/request.ts` (lines 31–33) to cover both standard and vendor-specific JSON media types. For example:

```ts
const contentType = header.getContentType()?.toString().toLowerCase() ?? '';
const isJson = contentType.includes('/json') || contentType.endsWith('+json');

return isJson
  ? JSONBigInt({ storeAsString: true }).parse(data)
  : data;
```

This will handle `application/json`, `application/json; charset=utf-8`, `application/ld+json`, `application/vnd.api+json`, etc.

</details>
<details>
<summary>playground/src/views/demos/features/json-bigint/index.vue (3)</summary>

`1-9`: **Well-structured component with appropriate imports**

The component correctly imports necessary dependencies and the BigInt data fetching function.

---

`17-31`: **Clear and informative UI with good explanation**

The component template provides a clear interface with helpful explanations about JavaScript's native JSON parsing limitations and the workaround implemented.

---

`1-39`: <details>
<summary>✅ Verification successful</summary>

**Verify the endpoint URL and functionality**

Ensure that the `getBigIntData` function properly calls the backend endpoint and handles the response correctly.


Run this script to check the endpoint exists and returns data with large integers:

---

🏁 Script executed:

```shell
#!/bin/bash
# Verify the BigInt API endpoint exists and returns proper data

# Check if the API function exists
echo "Checking for getBigIntData function:"
fd "json-bigint\.ts$" playground/src/api/examples -x cat {} \;

# Check if the backend mock endpoint exists
echo -e "\nChecking for BigInt mock endpoint:"
fd "bigint\.ts$" apps/backend-mock/api -x cat {} \;

# Check if the endpoint is registered in router
echo -e "\nChecking if the demo route is properly registered:"
fd "demos\.ts$" playground/src/router/routes/modules -x grep -A 5 "json-bigint" {} \;

# Check for json-bigint dependency
echo -e "\nVerifying json-bigint dependency:"
grep -A 3 "json-bigint" playground/package.json
```

Length of output: 2003

---



</details>

**✅ BigInt API Endpoint Verified**

All parts of the JSON BigInt demo are in place and functioning correctly:

- `getBigIntData` is implemented in `playground/src/api/examples/json-bigint.ts` and calls `/demo/bigint`.  
- The mock endpoint in `apps/backend-mock/api/bigint.ts` returns large integer values as expected.  
- The demo route is registered in `playground/src/router/routes/modules/demos.ts` at path `/demos/features/json-bigint`.  
- The `json-bigint` dependency (and its types) is declared in `playground/package.json`.  
- The `transformResponse` logic in `playground/src/api/request.ts` will correctly parse those big integers into strings.

No further action required.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-21T02:33:54Z
user: login: aonoa
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-21T20:06:30Z

Review comments:
diff_hunk: @@ -0,0 +1,28 @@
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  const data = `
+  {
+    "code": 0,
+    "message": "success",
+    "data": [
+              {
+                "id": 123456789012345678901234567890123456789012345678901234567890,
+                "name": "John Doe",
path: apps/backend-mock/api/demo/bigint.ts
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Numeric representation may cause precision issues.**

JavaScript doesn't support numeric literals for integers this large. In the template string, these will be silently converted to their IEEE-754 representation, losing precision.

Use string representation for the large integers to prevent precision loss:

```diff
-                "id": 123456789012345678901234567890123456789012345678901234567890,
+                "id": "123456789012345678901234567890123456789012345678901234567890",
```

This better represents the goal of the feature, which is to handle large integers properly.


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion
                "id": "123456789012345678901234567890123456789012345678901234567890",
                "name": "John Doe",
```

</details>

<!-- suggestion_end -->

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In apps/backend-mock/api/demo/bigint.ts around lines 12 to 13, the large integer
literal assigned to "id" exceeds JavaScript's safe integer limit and will lose
precision. To fix this, change the numeric literal to a string by enclosing the
large number in quotes. This preserves the exact value and aligns with the
intent to handle large integers properly.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-21T02:33:53Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,28 @@
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
path: apps/backend-mock/api/demo/bigint.ts
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Missing imports for backend utilities.**

The implementation uses several functions (`eventHandler`, `verifyAccessToken`, `unAuthorizedResponse`) without importing them first. This may work if these are globally available through some bundling mechanism, but it's not clear from the code.

Add the necessary imports at the top of the file:

```diff
+import { eventHandler, setHeader } from 'h3';
+import { verifyAccessToken } from '../../utils/jwt-utils';
+import { unAuthorizedResponse } from '../../utils/response';

export default eventHandler(async (event) => {
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion
+import { eventHandler, setHeader } from 'h3';
+import { verifyAccessToken } from '../../utils/jwt-utils';
+import { unAuthorizedResponse } from '../../utils/response';

 export default eventHandler(async (event) => {
   const userinfo = verifyAccessToken(event);
   if (!userinfo) {
     return unAuthorizedResponse(event);
   }
   // …rest of handler…
 });
```

</details>

<!-- suggestion_end -->

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In apps/backend-mock/api/demo/bigint.ts at the top of the file before line 1,
add import statements for the functions eventHandler, verifyAccessToken, and
unAuthorizedResponse from their respective backend utility modules. This will
ensure these functions are properly imported and available for use in the file,
preventing potential runtime errors due to missing references.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-21T02:33:53Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,28 @@
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  const data = `
+  {
+    "code": 0,
+    "message": "success",
+    "data": [
+              {
+                "id": 123456789012345678901234567890123456789012345678901234567890,
+                "name": "John Doe",
+                "age": 30,
+                "email": "john-doe@demo.com"
+                },
+                {
+                "id": 987654321098765432109876543210987654321098765432109876543210,
+                "name": "Jane Smith",
path: apps/backend-mock/api/demo/bigint.ts
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Numeric representation may cause precision issues.**

As with the first user ID, this large integer will lose precision when interpreted as a JavaScript number.

Use string representation for this large integer as well:

```diff
-                "id": 987654321098765432109876543210987654321098765432109876543210,
+                "id": "987654321098765432109876543210987654321098765432109876543210",
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion
                "id": "987654321098765432109876543210987654321098765432109876543210",
                "name": "Jane Smith",
```

</details>

<!-- suggestion_end -->

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In apps/backend-mock/api/demo/bigint.ts around lines 18 to 19, the large numeric
ID is represented as a JavaScript number, which causes precision loss. Change
the ID value to a string by enclosing it in quotes to preserve its exact value
without precision issues.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-21T02:33:53Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,28 @@
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  const data = `
+  {
+    "code": 0,
+    "message": "success",
+    "data": [
+              {
+                "id": 123456789012345678901234567890123456789012345678901234567890,
+                "name": "John Doe",
+                "age": 30,
+                "email": "john-doe@demo.com"
+                },
+                {
+                "id": 987654321098765432109876543210987654321098765432109876543210,
+                "name": "Jane Smith",
+                "age": 25,
+                "email": "jane@demo.com"
+                }
+            ]
+  }
+  `;
path: apps/backend-mock/api/demo/bigint.ts
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Inefficient JSON response handling.**

The API returns a large JSON string that's manually formatted instead of using JavaScript objects with proper serialization. This approach is error-prone and difficult to maintain.

Refactor to use a JavaScript object and let the framework handle JSON serialization:

```diff
-  const data = `
-  {
-    "code": 0,
-    "message": "success",
-    "data": [
-              {
-                "id": 123456789012345678901234567890123456789012345678901234567890,
-                "name": "John Doe",
-                "age": 30,
-                "email": "john-doe@demo.com"
-                },
-                {
-                "id": 987654321098765432109876543210987654321098765432109876543210,
-                "name": "Jane Smith",
-                "age": 25,
-                "email": "jane@demo.com"
-                }
-            ]
-  }
-  `;
+  const data = {
+    code: 0,
+    message: "success",
+    data: [
+      {
+        id: "123456789012345678901234567890123456789012345678901234567890",
+        name: "John Doe",
+        age: 30,
+        email: "john-doe@demo.com"
+      },
+      {
+        id: "987654321098765432109876543210987654321098765432109876543210",
+        name: "Jane Smith",
+        age: 25,
+        email: "jane@demo.com"
+      }
+    ]
+  };
```

Note: Large integers are stored as strings to ensure they're properly handled when serialized to JSON.


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion
  const data = {
    code: 0,
    message: "success",
    data: [
      {
        id: "123456789012345678901234567890123456789012345678901234567890",
        name: "John Doe",
        age: 30,
        email: "john-doe@demo.com"
      },
      {
        id: "987654321098765432109876543210987654321098765432109876543210",
        name: "Jane Smith",
        age: 25,
        email: "jane@demo.com"
      }
    ]
  };
```

</details>

<!-- suggestion_end -->

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In apps/backend-mock/api/demo/bigint.ts around lines 6 to 25, the code defines a
large JSON response as a manually formatted string, which is inefficient and
error-prone. Refactor this by replacing the JSON string with a JavaScript object
literal representing the same data structure. Store large integer IDs as strings
within the object to preserve precision, then rely on the framework's JSON
serialization to convert the object to a JSON response automatically.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-21T02:33:53Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,28 @@
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  const data = `
+  {
+    "code": 0,
+    "message": "success",
+    "data": [
+              {
+                "id": 123456789012345678901234567890123456789012345678901234567890,
+                "name": "John Doe",
+                "age": 30,
+                "email": "john-doe@demo.com"
+                },
+                {
+                "id": 987654321098765432109876543210987654321098765432109876543210,
+                "name": "Jane Smith",
+                "age": 25,
+                "email": "jane@demo.com"
+                }
+            ]
+  }
+  `;
+  setHeader(event, 'Content-Type', 'application/json');
+  return data;
path: apps/backend-mock/api/demo/bigint.ts
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Manual Content-Type setting is unnecessary when returning objects.**

Setting the Content-Type header manually is redundant if using the framework's automatic JSON serialization.

If you implement the suggested refactor to use a JavaScript object instead of a string, you can simplify this:

```diff
-  setHeader(event, 'Content-Type', 'application/json');
-  return data;
+  return data;
```

Most modern backend frameworks automatically set the Content-Type header to 'application/json' when returning an object.


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion
  return data;
```

</details>

<!-- suggestion_end -->

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In apps/backend-mock/api/demo/bigint.ts at lines 26 to 27, remove the manual
setting of the 'Content-Type' header since the framework automatically sets it
when returning a JavaScript object. Refactor the code to return a JavaScript
object directly instead of a JSON string, allowing the framework to handle
serialization and header setting.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-21T02:33:53Z
author_association: CONTRIBUTOR
diff_hunk: @@ -25,6 +26,12 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) {
   const client = new RequestClient({
     ...options,
     baseURL,
+    transformResponse: (data: any, header: AxiosResponseHeaders) => {
+      // storeAsString指示将BigInt存储为字符串，设为false则会存储为内置的BigInt类型
+      return header.getContentType()?.toString().includes('application/json')
+        ? JSONBigInt({ storeAsString: true }).parse(data)
+        : data;
+    },
path: playground/src/api/request.ts
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Missing error handling in the JSON parsing logic**

The implementation correctly uses `JSONBigInt` with `storeAsString: true` to handle large integers, but there's no error handling for potential JSON parsing failures.


Consider adding try-catch error handling:

```diff
  transformResponse: (data: any, header: AxiosResponseHeaders) => {
    // storeAsString指示将BigInt存储为字符串，设为false则会存储为内置的BigInt类型
    return header.getContentType()?.toString().includes('application/json')
-      ? JSONBigInt({ storeAsString: true }).parse(data)
+      ? (() => {
+          try {
+            return JSONBigInt({ storeAsString: true }).parse(data);
+          } catch (error) {
+            console.error('Failed to parse response as JSON with BigInt support:', error);
+            // Fall back to original data or attempt standard JSON parse
+            return data;
+          }
+        })()
      : data;
  },
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion
    transformResponse: (data: any, header: AxiosResponseHeaders) => {
      // storeAsString指示将BigInt存储为字符串，设为false则会存储为内置的BigInt类型
      return header.getContentType()?.toString().includes('application/json')
        ? (() => {
            try {
              return JSONBigInt({ storeAsString: true }).parse(data);
            } catch (error) {
              console.error(
                'Failed to parse response as JSON with BigInt support:',
                error
              );
              // Fall back to original data or attempt standard JSON parse
              return data;
            }
          })()
        : data;
    },
```

</details>

<!-- suggestion_end -->

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In playground/src/api/request.ts around lines 29 to 34, the JSON parsing using
JSONBigInt lacks error handling, which can cause unhandled exceptions if parsing
fails. Wrap the JSONBigInt parse call inside a try-catch block to catch any
parsing errors and handle them gracefully, such as logging the error or
returning a fallback value, to prevent the application from crashing.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-21T02:33:53Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { Alert, Button, Card } from 'ant-design-vue';
+
+import { getBigIntData } from '#/api/examples/json-bigint';
+
+const response = ref('');
+function fetchData() {
+  getBigIntData().then((res) => {
+    response.value = res;
+  });
+}
path: playground/src/views/demos/features/json-bigint/index.vue
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Add loading state and error handling**

The current implementation lacks loading state and error handling when fetching data.


Consider adding loading state and error handling:

```diff
 const response = ref('');
+const loading = ref(false);
+const error = ref('');
 function fetchData() {
+  loading.value = true;
+  error.value = '';
   getBigIntData().then((res) => {
     response.value = res;
+    loading.value = false;
+  }).catch((err) => {
+    error.value = err.message || 'Failed to fetch data';
+    loading.value = false;
+    console.error('Error fetching BigInt data:', err);
   });
 }
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

```suggestion
const response = ref('');
const loading = ref(false);
const error = ref('');

function fetchData() {
  loading.value = true;
  error.value = '';
  getBigIntData().then((res) => {
    response.value = res;
    loading.value = false;
  }).catch((err) => {
    error.value = err.message || 'Failed to fetch data';
    loading.value = false;
    console.error('Error fetching BigInt data:', err);
  });
}
```

</details>

<!-- suggestion_end -->

<details>
<summary>🤖 Prompt for AI Agents</summary>

```
In playground/src/views/demos/features/json-bigint/index.vue around lines 10 to
15, the fetchData function lacks loading state and error handling. Add a
reactive loading state variable to indicate when data fetching is in progress,
set it to true before calling getBigIntData and false after completion. Also,
add a try-catch block or use .catch on the promise to handle errors, updating an
error state variable accordingly to reflect any issues during the fetch.
```

</details>

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-21T02:33:53Z
author_association: CONTRIBUTOR

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-05-21T02:29:14Z
body: ###  ⚠️  No Changeset found

Latest commit: 856495417763c406a6b6a38b71f2cf68274a9414

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/mynetfan/vue-vben-admin/new/feat/json-bigint?filename=.changeset/lovely-singers-guess.md&value=---%0A%22%40vben%2Fbackend-mock%22%3A%20patch%0A%22%40vben%2Fplayground%22%3A%20patch%0A---%0A%0Afeat%3A%20enhances%20compatibility%20with%20APIs%20returning%20large%20numeric%20values%0A)


author_association: NONE
user: login: coderabbitai[bot]
created_at: 2025-05-21T02:29:17Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough

A new feature was introduced across backend and frontend to support handling of large integer values (BigInt) in JSON responses. This includes a backend API endpoint returning user data with large numeric IDs, frontend logic to parse such responses safely, UI components to demonstrate the feature, and dependency updates for `json-bigint` parsing support.

## Changes

| File(s)                                                                                  | Change Summary                                                                                                                        |
|------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------|
| apps/backend-mock/api/demo/bigint.ts                                                     | Added a new API endpoint handler returning user data with very large numeric IDs in JSON format, with access token verification.       |
| playground/package.json, pnpm-workspace.yaml                                             | Added `json-bigint` as a dependency and `@types/json-bigint` as a devDependency for BigInt JSON parsing support.                      |
| playground/src/api/request.ts                                                            | Enhanced the request client to parse JSON responses using `json-bigint`, storing large integers as strings to prevent precision loss.  |
| playground/src/api/examples/json-bigint.ts                                               | Introduced an API utility function `getBigIntData` to fetch data from the new BigInt endpoint.                                        |
| playground/src/router/routes/modules/demos.ts                                            | Added a new route entry for the JSON BigInt demo page under the features demos group.                                                 |
| playground/src/views/demos/features/json-bigint/index.vue                                | Created a Vue component demonstrating the safe handling and display of backend JSON responses with BigInt values.                     |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant User
    participant Frontend (Vue Page)
    participant API Utility (getBigIntData)
    participant Request Client (json-bigint)
    participant Backend (bigint.ts)

    User->>Frontend (Vue Page): Click "Fetch Data" button
    Frontend (Vue Page)->>API Utility (getBigIntData): Call getBigIntData()
    API Utility (getBigIntData)->>Request Client (json-bigint): GET /demo/bigint
    Request Client (json-bigint)->>Backend (bigint.ts): HTTP GET /demo/bigint
    Backend (bigint.ts)->>Request Client (json-bigint): JSON response with BigInt IDs
    Request Client (json-bigint)->>API Utility (getBigIntData): Parse JSON (BigInt as string)
    API Utility (getBigIntData)->>Frontend (Vue Page): Return parsed data
    Frontend (Vue Page)->>User: Display response with BigInt IDs as strings
```

## Poem

> In fields of code where numbers grow,
> Some IDs reach heights JavaScript can’t know.
> Now with BigInt, parsed as string,
> Precision lost is no longer a thing!
> Click the button, see with glee,
> Giant numbers, parsed safely!
> 🐇✨

<!-- walkthrough_end -->

<!-- announcements_start -->

> [!NOTE]
> <details>
> <summary>⚡️ AI Code Reviews for VS Code, Cursor, Windsurf</summary>
> 
> CodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback.
> Learn more [here](http://coderabbit.ai/ide).
> 
> </details>

---

> [!NOTE]
> <details>
> <summary>⚡️ Faster reviews with caching</summary>
> 
> CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure `Review - Disable Cache` at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the `Data Retention` setting under your Organization Settings.
> Enjoy the performance boost—your workflow just got faster.
> 
> </details>

<!-- announcements_end -->
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details open="true">
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=vbenjs/vue-vben-admin&utm_content=6250):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Explain this complex logic.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai explain this code block.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and explain its main purpose.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

### Support

Need help? Create a ticket on our [support page](https://www.coderabbit.ai/contact-us/support) for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: CONTRIBUTOR