api error

[ocean kayak]

Hi @gentle talon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

It looks like you're encountering an issue with API errors in your Next.js application. Based on the knowledge sources provided, here are some common API error scenarios and how to handle them:

Common API Errors in Next.js

1. Throwing ApiError in API Routes Always Returns Status Code 500
   • Issue: When you throw an ApiError in an API route, it always returns a status code 500 instead of the expected status code.
   • Solution: This issue occurs because the ApiError class is being redefined in the inlined code, causing the error to not be recognized as an instance of ApiError. Ensure that the ApiError class is correctly imported and used.
   • Example:

     import { ApiError } from 'next/dist/server/api-utils';
     
     export default function handler(req, res) {
       throw new ApiError(400, 'error');
     }
     

   • Reference: GitHub Issue #49999 (https://github.com/vercel/next.js/issues/49999)

2. Vercel REST API Errors
   • Common Errors:
     • Forbidden: You're not authorized to use the endpoint.

       {
         "error": {
           "code": "forbidden",
           "message": "Not authorized"
         }
       }
       

     • Rate Limited: You exceeded the maximum allotted requests.

       {
         "error": {
           "code": "rate_limited",
           "message": "The rate limit of 6 exceeded for 'api-www-user-update-username'. Try again in 7 days",
           "limit": {
             "remaining": 0,
             "reset": 1571432075,
             "resetMs": 1571432075563,
             "total": 6
           }
         }
       }
       

     • Bad Request: There was an error with the request.

       {
         "error": {
           "code": "bad_request",
           "message": "An english description of the error that just occurred"
         }
       }
       

     • Internal Server Error: An unexpected internal error occurred.

       {
         "error": {
           "code": "internal_server_error",
           "message": "An unexpected internal error occurred"
         }
       }
       

     • Resource Not Found: The requested resource could not be found.

       {
         "error": {
           "code": "not_found",
           "message": "Could not find the RESOURCE: ID"
         }
       }
       

     • Method Unknown: The endpoint does not handle the method you defined.

       {
         "error": {
           "code": "method_unknown",
           "message": "This endpoint only responds to METHOD"
         }
       }
       

   • Reference: Vercel REST API Errors (https://vercel.com/docs/rest-api/errors)

Troubleshooting Deployment Issues

If you encounter deployment issues such as DEPLOYMENT_PAUSED, follow these steps:

1. Check your deployment configuration.
2. Review your spend management settings.
3. Verify your account status.
4. Review email notifications from Vercel.
5. Check for terms of service violations.
6. Check for platform outages.
7. Contact Vercel support if the issue persists.

• Reference: DEPLOYMENT_PAUSED Troubleshoot (https://vercel.com/docs/errors/DEPLOYMENT_PAUSED)

If you need more specific help or have a different issue, please provide

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

[gentle talon]

function ScriptsPage() {
const { data: scripts } = fetch("http://localhost:3000/api/scripts");
if (!scripts) return <div>Loading...</div>;

return (
<div
className="grid grid-cols-10 gap-4 p-24"
style={{
gridTemplateColumns: "repeat(10, 1fr)",
gridGap: "5px",
}}
>
{scripts.map((script) => (
<div
className="card rounded-sm"
style={{
background: "#212121",
padding: "5px",
}}
key={script._id}
>
<div
className="image-container"
style={{
position: "relative",
width: "100%",
height: "150px",
}}
>
<img
src={script.scriptImage}
alt={script.scriptName}
style={{
width: "200px",
height: "100%",
filter: "blur(1px)",
borderRadius: "10px",
}}
/>
<div
className="image-overlay"
style={{
position: "absolute",
bottom: "10px",
right: "10px",
color: "#fff",
fontSize: "14px",
fontWeight: "bold",
textShadow: "1px 1px 2px rgba(0, 0, 0, 0.5)",
}}
>
<span>{script.scriptName}</span>
<br />
<span>by {script.scriptAuthor}</span>
</div>
</div>
</div>
))}
</div>
);
}

export default ScriptsPage;

export async function GET() {
await connect();
let scripts = await Scripts.find();

if (!scripts || scripts.length === 0) {
const newScript = new Scripts({

});

await newScript.save();
return (scripts = [newScript]);

}

return Response.json(scripts);
}