500 Error when trying to Edit a Image

[ctrl-beep]

Hi! @sambecker

When I tried to edit an image after uploading it, it shows me a 500 error

Checked the console, but all I got was:

Not sure on how to go about solving this 😬

[sambecker]

Is it this particular image that can't be edited, or all images?

Can you share Vercel server logs? Those would have more detail than client/browser logs.

Or, if you can share the image file in question, that would help.

[ctrl-beep]

Is it this particular image that can't be edited, or all images?

Can you share Vercel server logs? Those would have more detail than client/browser logs.

Or, if you can share the image file in question, that would help.

Sure!

The vercel logs: [13:31:41.364] Running build in Washington, D.C., USA (East) – iad1 [13:31:41.512] Cloning github.com/ctrl-beep/jd-blog (Branch: main, Commit: f5d799d) [13:31:41.520] Skipping build cache, deployment was triggered without cache. [13:31:42.043] Cloning completed: 530.795ms [13:31:42.440] Running "vercel build" [13:31:42.868] Vercel CLI 34.2.7 [13:31:43.337] Detected `pnpm-lock.yaml` version 9 generated by pnpm 9 [13:31:43.366] Installing dependencies... [13:31:43.929] Lockfile is up to date, resolution step is skipped [13:31:44.051] Progress: resolved 1, reused 0, downloaded 0, added 0 [13:31:44.242] Packages: +915 [13:31:44.243] ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ [13:31:45.053] Progress: resolved 915, reused 0, downloaded 31, added 15 [13:31:46.054] Progress: resolved 915, reused 0, downloaded 149, added 135 [13:31:47.055] Progress: resolved 915, reused 0, downloaded 292, added 276 [13:31:48.057] Progress: resolved 915, reused 0, downloaded 429, added 420 [13:31:49.058] Progress: resolved 915, reused 0, downloaded 532, added 516 [13:31:50.075] Progress: resolved 915, reused 0, downloaded 591, added 576 [13:31:51.275] Progress: resolved 915, reused 0, downloaded 592, added 576 [13:31:52.276] Progress: resolved 915, reused 0, downloaded 605, added 591 [13:31:53.277] Progress: resolved 915, reused 0, downloaded 606, added 591 [13:31:54.277] Progress: resolved 915, reused 0, downloaded 615, added 605 [13:31:55.279] Progress: resolved 915, reused 0, downloaded 651, added 638 [13:31:56.280] Progress: resolved 915, reused 0, downloaded 669, added 654 [13:31:57.281] Progress: resolved 915, reused 0, downloaded 791, added 776 [13:31:58.280] Progress: resolved 915, reused 0, downloaded 847, added 833 [13:31:59.280] Progress: resolved 915, reused 0, downloaded 914, added 903 [13:31:59.436] Progress: resolved 915, reused 0, downloaded 914, added 915, done [13:31:59.761] .../sharp@0.33.4/node_modules/sharp install$ node install/check [13:31:59.763] .../node_modules/@vercel/speed-insights postinstall$ node scripts/postinstall.mjs [13:31:59.851] .../node_modules/@vercel/speed-insights postinstall: Done [13:31:59.913] .../sharp@0.33.4/node_modules/sharp install: Done [13:32:00.118] [13:32:00.119] dependencies: [13:32:00.119] + @ai-sdk/openai 0.0.29 [13:32:00.120] + @aws-sdk/client-s3 3.598.0 [13:32:00.120] + @aws-sdk/s3-request-presigner 3.598.0 [13:32:00.120] + @next/bundle-analyzer 14.2.4 [13:32:00.120] + @radix-ui/react-dropdown-menu 2.0.6 [13:32:00.121] + @tailwindcss/container-queries 0.1.1 [13:32:00.122] + @tailwindcss/forms 0.5.7 [13:32:00.122] + @testing-library/jest-dom 6.4.6 [13:32:00.122] + @testing-library/react 16.0.0 [13:32:00.123] + @types/jest 29.5.12 [13:32:00.123] + @types/node 20.14.2 [13:32:00.123] + @types/pg 8.11.6 [13:32:00.123] + @types/react 18.3.3 [13:32:00.123] + @types/react-dom 18.3.0 [13:32:00.124] + @typescript-eslint/eslint-plugin 7.13.0 [13:32:00.124] + @typescript-eslint/parser 7.13.0 [13:32:00.124] + @upstash/ratelimit 1.2.1 [13:32:00.124] + @vercel/analytics 1.3.1 [13:32:00.124] + @vercel/blob 0.23.3 [13:32:00.124] + @vercel/kv 2.0.0 [13:32:00.125] + @vercel/speed-insights 1.0.12 [13:32:00.125] + ai 3.1.36 [13:32:00.125] + autoprefixer 10.4.19 [13:32:00.125] + camelcase-keys 9.1.3 [13:32:00.125] + clsx 2.1.1 [13:32:00.126] + cmdk 1.0.0 [13:32:00.126] + date-fns 3.6.0 [13:32:00.126] + eslint 8.57.0 [13:32:00.126] + eslint-config-next 14.2.4 [13:32:00.126] + exifr 7.1.3 [13:32:00.126] + framer-motion 11.2.10 [13:32:00.127] + jest 29.7.0 [13:32:00.127] + jest-environment-jsdom 29.7.0 [13:32:00.127] + nanoid 5.0.7 [13:32:00.127] + next 14.2.4 [13:32:00.128] + next-auth 5.0.0-beta.18 [13:32:00.128] + next-themes 0.3.0 [13:32:00.128] + pg 8.12.0 [13:32:00.129] + postcss 8.4.38 [13:32:00.129] + react 18.3.1 [13:32:00.129] + react-dom 18.3.1 [13:32:00.129] + react-icons 5.2.1 [13:32:00.129] + sharp 0.33.4 [13:32:00.129] + sonner 1.5.0 [13:32:00.130] + swr 2.2.5 [13:32:00.130] + tailwindcss 3.4.4 [13:32:00.130] + ts-exif-parser 0.2.2 [13:32:00.130] + typescript 5.4.5 [13:32:00.130] + undici 6.19.0 [13:32:00.132] + use-debounce 10.0.1 [13:32:00.132] [13:32:00.151] Done in 16.7s [13:32:00.191] Detected Next.js version: 14.2.4 [13:32:00.251] Running "pnpm run build" [13:32:00.723] [13:32:00.724] > exif-photo-blog@ build /vercel/path0 [13:32:00.724] > next build [13:32:00.724] [13:32:01.383] Attention: Next.js now collects completely anonymous telemetry regarding usage. [13:32:01.383] This information is used to shape Next.js' roadmap and prioritize features. [13:32:01.384] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL: [13:32:01.384] https://nextjs.org/telemetry [13:32:01.384] [13:32:01.443] ▲ Next.js 14.2.4 [13:32:01.443] [13:32:01.519] Creating an optimized production build ... [13:33:24.915] ✓ Compiled successfully [13:33:24.916] Linting and checking validity of types ... [13:33:39.449] Collecting page data ... [13:33:45.021] Generating static pages (0/22) ... [13:33:47.459] Generating static pages (5/22) [13:33:49.874] Generating static pages (10/22) [13:33:51.691] Generating static pages (16/22) [13:33:53.104] ✓ Generating static pages (22/22) [13:33:53.994] Finalizing page optimization ... [13:33:53.994] Collecting build traces ... [13:33:56.635] [13:33:56.648] Route (app) Size First Load JS [13:33:56.648] ┌ ○ / 9.39 kB 276 kB [13:33:56.649] ├ ○ /_not-found 161 B 87.3 kB [13:33:56.649] ├ ƒ /admin/baseline 4.93 kB 113 kB [13:33:56.649] ├ ƒ /admin/configuration 2.49 kB 152 kB [13:33:56.649] ├ ƒ /admin/outdated 7.58 kB 182 kB [13:33:56.649] ├ ƒ /admin/photos 5.99 kB 196 kB [13:33:56.649] ├ ƒ /admin/photos/[photoId]/edit 1.31 kB 155 kB [13:33:56.650] ├ ƒ /admin/tags 2.15 kB 115 kB [13:33:56.650] ├ ƒ /admin/tags/[tag]/edit 6.44 kB 174 kB [13:33:56.650] ├ ƒ /admin/uploads 4.37 kB 165 kB [13:33:56.650] ├ ƒ /admin/uploads/[uploadPath] 677 B 154 kB [13:33:56.650] ├ ƒ /api 0 B 0 B [13:33:56.650] ├ ƒ /api/auth/[...nextauth] 0 B 0 B [13:33:56.650] ├ ƒ /api/storage/presigned-url/[key] 0 B 0 B [13:33:56.650] ├ ƒ /api/storage/vercel-blob 0 B 0 B [13:33:56.650] ├ ○ /film-demo 180 B 94.1 kB [13:33:56.650] ├ ○ /film-demo/animate 905 B 130 kB [13:33:56.650] ├ ƒ /film/[simulation] 2.13 kB 169 kB [13:33:56.650] ├ ƒ /film/[simulation]/[photoId] 161 B 87.3 kB [13:33:56.650] ├ ƒ /film/[simulation]/[photoId]/share 224 B 171 kB [13:33:56.650] ├ ƒ /film/[simulation]/image 0 B 0 B [13:33:56.650] ├ ƒ /film/[simulation]/share 927 B 187 kB [13:33:56.650] ├ ƒ /focal/[focal] 2.13 kB 169 kB [13:33:56.650] ├ ƒ /focal/[focal]/[photoId] 161 B 87.3 kB [13:33:56.650] ├ ƒ /focal/[focal]/[photoId]/share 224 B 171 kB [13:33:56.651] ├ ƒ /focal/[focal]/image 0 B 0 B [13:33:56.651] ├ ƒ /focal/[focal]/share 927 B 187 kB [13:33:56.651] ├ ○ /grid 4.93 kB 250 kB [13:33:56.651] ├ ○ /home-image 0 B 0 B [13:33:56.651] ├ ○ /og/all 4.6 kB 132 kB [13:33:56.651] ├ ○ /og/sample 2.48 kB 99.3 kB [13:33:56.651] ├ ● /p/[photoId] 161 B 87.3 kB [13:33:56.651] ├ ● /p/[photoId]/image 0 B 0 B [13:33:56.651] ├ ● /p/[photoId]/share 224 B 171 kB [13:33:56.651] ├ ƒ /shot-on/[make]/[model] 2.12 kB 169 kB [13:33:56.651] ├ ƒ /shot-on/[make]/[model]/[photoId] 161 B 87.3 kB [13:33:56.651] ├ ƒ /shot-on/[make]/[model]/[photoId]/share 224 B 171 kB [13:33:56.651] ├ ƒ /shot-on/[make]/[model]/image 0 B 0 B [13:33:56.651] ├ ƒ /shot-on/[make]/[model]/share 927 B 187 kB [13:33:56.651] ├ ƒ /sign-in 62.4 kB 194 kB [13:33:56.651] ├ ƒ /tag/[tag] 2.12 kB 169 kB [13:33:56.651] ├ ƒ /tag/[tag]/[photoId] 161 B 87.3 kB [13:33:56.651] ├ ƒ /tag/[tag]/[photoId]/share 224 B 171 kB [13:33:56.651] ├ ƒ /tag/[tag]/image 0 B 0 B [13:33:56.651] ├ ƒ /tag/[tag]/share 927 B 187 kB [13:33:56.651] ├ ƒ /tag/hidden 3.13 kB 161 kB [13:33:56.651] ├ ƒ /tag/hidden/[photoId] 186 B 209 kB [13:33:56.652] ├ ○ /template-image 0 B 0 B [13:33:56.652] ├ ○ /template-image-tight 0 B 0 B [13:33:56.652] └ ○ /template-url 0 B 0 B [13:33:56.652] + First Load JS shared by all 87.1 kB [13:33:56.652] ├ chunks/5654-21969dc449604ec7.js 31.5 kB [13:33:56.652] ├ chunks/5ebd2a04-9f9e22fe5fdb46f6.js 53.6 kB [13:33:56.652] └ other shared chunks (total) 1.96 kB [13:33:56.652] [13:33:56.652] [13:33:56.652] ƒ Middleware 83.2 kB [13:33:56.652] [13:33:56.652] ○ (Static) prerendered as static content [13:33:56.652] ● (SSG) prerendered as static HTML (uses getStaticProps) [13:33:56.652] ƒ (Dynamic) server-rendered on demand [13:33:56.652] [13:33:56.811] Traced Next.js server files in: 42.803ms [13:34:03.516] Created all serverless functions in: 6.704s [13:34:03.607] Collected static files (public/, static/, .next/static): 11.922ms [13:34:03.680] Build Completed in /vercel/output [2m] [13:34:03.875] Deploying outputs... [13:34:13.798] Injected preview comments middleware, you can disable this in your project settings. [13:34:27.751] [13:34:28.026] Deployment completed [13:34:40.565] Uploading build cache [170.26 MB]... [13:34:42.829] Build cache uploaded: 2.264s I tried with multiple images and all of them are having the same problem when clicking the edit button :(

[sambecker]

So these are build logs, but I'd like to see runtime logs (located at [team]/[project]/logs), specifically the 500 error messages posted at the time the Edit button is clicked.

Also, what blob storage service are you using? And have you modified the template code in any way?

[ctrl-beep]

So these are build logs, but I'd like to see runtime logs (located at [team]/[project]/logs), specifically the 500 error messages posted at the time the Edit button is clicked.

Also, what blob storage service are you using? And have you modified the template code in any way?

Ah! I wasn't aware - sorry!

Here's the runtime logs:

I am using the blob storage provided by vercel itself, no changes to that or the template code.

[sambecker]

Interesting that fetch failed. Can you check your blob storage (located at [team]/[project]/stores) and make sure you haven't met any plan limits?

[ctrl-beep]

Interesting that fetch failed. Can you check your blob storage (located at [team]/[project]/stores) and make sure you haven't met any plan limits?

Just checked, didn't hit any limits 🤔

Curious, but the domain jeremydaniel.co which is used in the header isn't the site's actual production domain, more of a test as of now - should I type the actual production domain for it to work? (I know this may sound dumb but am not so sure on what to do 😭)

[vhogberg]

Encountering the same issue. "500 Something went wrong" each time I try to edit a photo.

[sambecker]

@ctrl-beep @vhogberg just pushed a quick update that improves photo editing error handling.

Can you try syncing your fork and letting me know what your Vercel runtime error logs look like when you edit a photo?

[vhogberg]

Sorry, extremely new to all of this @sambecker, this is my first time using a project like this, unsure if I was able to sync my fork successfully, but I tried! Here are the error logs:

Error: Input buffer contains unsupported image format at Sharp.toBuffer (/var/task/node_modules/.pnpm/sharp@0.33.4/node_modules/sharp/lib/output.js:161:17) at c (/var/task/.next/server/chunks/9422.js:1:8552) at p (/var/task/.next/server/chunks/9422.js:1:8665) at /var/task/.next/server/chunks/9422.js:1:8875 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async m (/var/task/.next/server/app/admin/photos/[photoId]/edit/page.js:1:6664) { digest: '1876635057' }

[sambecker]

unsure if I was able to sync my fork successfully

I believe that's still the older version.

The newer version would have errors that looked like this:

Error blurring image from URL ([URL_LINK])

or

Error resizing image from URL ([URL_LINK])

It's possible you installed the template as a one-off repo that can no longer be synced to the original. If that's the case, you can fork a new copy to your Github account, and then connect THAT to your Vercel project from project settings.This version will be able to be continuously updated from the source.

You would know the fork synced properly if the newest commit on your project page said:

817d4b3 Improve image transform error handling

[sambecker]

@ctrl-beep @vhogberg one other thing worth checking: make sure NEXT_PUBLIC_SITE_DOMAIN is set to your desired production domain. That can mitigate certain classes of errors.

[ctrl-beep]

Sure! I just deployed the repository - will add the ENVs, test image, and will let you know how it goes @sambecker!

Thank you so much! 😁

[ctrl-beep]

Checked it and it works perfectly! @sambecker

This time though, I implemented the production domain and I think that might also have contributed to the working of the project!

Thank you so much for your help! It really means a lot 😁

[ctrl-beep]

@vhogberg maybe you could try the same as what @sambecker suggested with the domain? It worked for me!

[sambecker]

@ctrl-beep out of curiosity, if you've updated your fork and added your production domain, can you check server logs and see if you're getting any silent errors when editing a photo?

[vhogberg]

Hi again @sambecker,

It's possible you installed the template as a one-off repo that can no longer be synced to the original.

Yes that's probably the case. Again very new to this but thanks for the heads up and instructions, I'll try to fork a new copy as you said 🙂

one other thing worth checking: make sure NEXT_PUBLIC_SITE_DOMAIN is set to your desired production domain. That can mitigate certain classes of errors.

I actually don't have a domain yet. I'm just using the quick URL:s that vercel gives on the deployment section at the moment. I've been looking at getting a custom one but don't know what to choose yet (or the best place to get it), but as @ctrl-beep also mentioned this might be what causes me problems I guess?

I'll also give my thanks btw, this template is awesome.

[sambecker]

I'll try to fork a new copy as you said

It's possible just doing that will solve the problem—let me know how it goes

I actually don't have a domain yet

As mentioned, that may be fine—curious to see if the fork is enough to get things working (please share any server-side Vercel logs you encounter)

this template is awesome

❤️

[vhogberg]

@sambecker Still having issues unfortunately. I did as you said and forked a new copy, then went into Vercel git settings, removed the old repository and switched to the new one. Then redeployed through the Deployment page in Vercel.

But I get the same error message as earlier:

Do I need to do something else to get the correct version? I know you mentioned seeing commit messages on the project page. Did you mean the project page in github or vercel?

[sambecker]

This is what I meant @vhogberg:

Can you confirm which commit is in Production? i.e., what's below Source, such as "0a316a0 Adjust admin photos vertical spacing"

[vhogberg]

@sambecker Yeah okay it looks like I don't have the latest version then. I thought it'd work when i forked a brand new copy and did a new git connection in vercel. Says "ceb767e initial commit"

[sambecker]

@vhogberg can you try going to the project /deployments page and manually creating a new deployment (as depicted below)?

1. Click •••
2. Click "Create deployment"
3. Click main pill button
4. Click "Create deployment"

[ctrl-beep]

@ctrl-beep out of curiosity, if you've updated your fork and added your production domain, can you check server logs and see if you're getting any silent errors when editing a photo?

Sure!

Server logs:

While everything worked, I wonder why the logs say an error occured, weird 🤔

But overall, seems pretty good to me!

[sambecker]

Thank you @ctrl-beep! That all looks pretty good to me. The error is related to auth, which might be fine, if it was just a wrong email/password submission at sign in, or possibly, an unauthenticated page view.

[vhogberg]

@sambecker Thanks for the help, still feeling a little lost sorry. I don't have that button there. It also doesn't say "Continuously updated from x" for me. Feels like the connection between github and vercel isn't right. But not sure why as the Settings --> Git page looks correct.

Before I have clicked into one of the existing deployments and clicked redeploy.

[ctrl-beep]

@sambecker Thanks for the help, still feeling a little lost sorry. I don't have that button there. It also doesn't say "Continuously updated from x" for me. Feels like the connection between github and vercel isn't right. But not sure why as the Settings --> Git page looks correct.

Before I have clicked into one of the existing deployments and clicked redeploy.

Maybe just re-do the process 🤔 (It might take some time but am sure it will be worth it!)

[ctrl-beep]

Thank you @ctrl-beep! That all looks pretty good to me. The error is related to auth, which might be fine, if it was just a wrong email/password submission at sign in, or possibly, an unauthenticated page view.

Ah! I did input the wrong credentials, make sense!

Thank you! @sambecker

[sambecker]

Feels like the connection between github and vercel isn't right

@vhogberg can you send a screenshot of what your Git project settings look like?

[vhogberg]

@sambecker Sure thing! Here:

[sambecker]

Hmmm—that is quite odd @vhogberg can you try disconnecting/reconnecting it?

[vhogberg]

Hmmm—that is quite odd @vhogberg can you try disconnecting/reconnecting it?

@sambecker Yup did that now, don't see any changes immediately. Is there anything more to it than just clicking disconnect and then connect and choosing the right github repository?

[sambecker]

This might sounds crazy @vhogberg but it might be worth creating a new project based on the forked repo.

Or, if that sounds like a headache, maybe try connecting an arbitrary non-photo-blog repo to your project and THEN connecting the fork?

[vhogberg]

This might sounds crazy @vhogberg but it might he worth creating a new project based on the forked repo.

Okie dokie. Okay yeah this looks better now:

Huh strange, wonder why it didn't work before! Oh well I'll finish the setup again and see if I can get you those logs finally 🙂

[sambecker]

Good luck @vhogberg!

[vhogberg]

@sambecker Got it to work!! No issues with editing title etc. now! Don't see any silent errors either in the logs like you mentioned.

Thanks a lot again for this template and for spending time helping me 🙏 Now comes the fun part adding pictures and stuff!

[sambecker]

Of course @vhogberg! Can't wait to see what you build.