Internal Server Error with no clue where to debug

[vonkoff]

Getting the following error. I am unsure how to start. My prisma is connected to plantescale, but I don't think this should be the main issue. Running in local dev and going to "/resources/healthcheck" returns an "OK". I tried making a new url for the planetscale DB and that didn't work either.

Anyone have any suggestions?

2024-01-09T01:12:48.807 app[17811104a5e6d8] bos [info] > start

2024-01-09T01:12:48.807 app[17811104a5e6d8] bos [info] > cross-env NODE_ENV=production node .

2024-01-09T01:12:52.233 app[17811104a5e6d8] bos [info] 🚀 We have liftoff!

2024-01-09T01:12:52.234 app[17811104a5e6d8] bos [info] Local: http://localhost:8081

2024-01-09T01:12:52.234 app[17811104a5e6d8] bos [info] On Your Network: http://172.19.144.114:8081

2024-01-09T01:12:52.234 app[17811104a5e6d8] bos [info] Press Ctrl+C to stop

2024-01-09T01:12:55.105 app[17811104a5e6d8] bos [info] prisma:query - 69ms - SELECT COUNT(*) FROM (SELECT `goodunionjobs`.`User`.`id` FROM `goodunionjobs`.`User` WHERE 1=1) AS `sub`

2024-01-09T01:12:55.720 app[17811104a5e6d8] bos [info] HEAD / 500 - - 731.244 ms

2024-01-09T01:12:55.731 app[17811104a5e6d8] bos [info] healthcheck ❌ {

2024-01-09T01:12:55.731 app[17811104a5e6d8] bos [info] error: Response {

2024-01-09T01:12:55.731 app[17811104a5e6d8] bos [info] size: 0,

2024-01-09T01:12:55.731 app[17811104a5e6d8] bos [info] [Symbol(Body internals)]: {

2024-01-09T01:12:55.731 app[17811104a5e6d8] bos [info] body: [ReadableStream],

2024-01-09T01:12:55.731 app[17811104a5e6d8] bos [info] type: null,

2024-01-09T01:12:55.731 app[17811104a5e6d8] bos [info] size: null,

2024-01-09T01:12:55.731 app[17811104a5e6d8] bos [info] boundary: null,

2024-01-09T01:12:55.731 app[17811104a5e6d8] bos [info] disturbed: false,

2024-01-09T01:12:55.731 app[17811104a5e6d8] bos [info] error: null

2024-01-09T01:12:55.731 app[17811104a5e6d8] bos [info] },

2024-01-09T01:12:55.731 app[17811104a5e6d8] bos [info] [Symbol(Response internals)]: {

2024-01-09T01:12:55.731 app[17811104a5e6d8] bos [info] url: 'http://172.19.144.114:8080/',

2024-01-09T01:12:55.731 app[17811104a5e6d8] bos [info] status: 500,

2024-01-09T01:12:55.731 app[17811104a5e6d8] bos [info] statusText: 'Internal Server Error',

2024-01-09T01:12:55.731 app[17811104a5e6d8] bos [info] headers: [Object],

2024-01-09T01:12:55.731 app[17811104a5e6d8] bos [info] counter: 0,

2024-01-09T01:12:55.731 app[17811104a5e6d8] bos [info] highWaterMark: 16384

2024-01-09T01:12:55.731 app[17811104a5e6d8] bos [info] }

2024-01-09T01:12:55.731 app[17811104a5e6d8] bos [info] }

2024-01-09T01:12:55.731 app[17811104a5e6d8] bos [info] }

2024-01-09T01:12:55.737 app[17811104a5e6d8] bos [info] GET /resources/healthcheck 500 - - 788.672 ms

2024-01-09T01:13:05.790 app[17811104a5e6d8] bos [info] prisma:query - 35ms - SELECT COUNT(*) FROM (SELECT `goodunionjobs`.`User`.`id` FROM `goodunionjobs`.`User` WHERE 1=1) AS `sub`

2024-01-09T01:13:06.321 app[17811104a5e6d8] bos [info] HEAD / 500 - - 562.990 ms

2024-01-09T01:13:06.324 app[17811104a5e6d8] bos [info] healthcheck ❌ {

2024-01-09T01:13:06.324 app[17811104a5e6d8] bos [info] error: Response {

2024-01-09T01:13:06.324 app[17811104a5e6d8] bos [info] size: 0,

2024-01-09T01:13:06.324 app[17811104a5e6d8] bos [info] [Symbol(Body internals)]: {

2024-01-09T01:13:06.324 app[17811104a5e6d8] bos [info] body: [ReadableStream],

2024-01-09T01:13:06.324 app[17811104a5e6d8] bos [info] type: null,

2024-01-09T01:13:06.324 app[17811104a5e6d8] bos [info] size: null,

2024-01-09T01:13:06.324 app[17811104a5e6d8] bos [info] boundary: null,

2024-01-09T01:13:06.324 app[17811104a5e6d8] bos [info] disturbed: false,

2024-01-09T01:13:06.324 app[17811104a5e6d8] bos [info] error: null

2024-01-09T01:13:06.324 app[17811104a5e6d8] bos [info] },

2024-01-09T01:13:06.324 app[17811104a5e6d8] bos [info] [Symbol(Response internals)]: {

2024-01-09T01:13:06.324 app[17811104a5e6d8] bos [info] url: 'http://172.19.144.114:8080/',

2024-01-09T01:13:06.324 app[17811104a5e6d8] bos [info] status: 500,

2024-01-09T01:13:06.324 app[17811104a5e6d8] bos [info] statusText: 'Internal Server Error',

2024-01-09T01:13:06.324 app[17811104a5e6d8] bos [info] headers: [Object],

2024-01-09T01:13:06.324 app[17811104a5e6d8] bos [info] counter: 0,

2024-01-09T01:13:06.324 app[17811104a5e6d8] bos [info] highWaterMark: 16384

2024-01-09T01:13:06.324 app[17811104a5e6d8] bos [info] }

2024-01-09T01:13:06.324 app[17811104a5e6d8] bos [info] }

2024-01-09T01:13:06.324 app[17811104a5e6d8] bos [info] }

[vonkoff]

Ah ok. I removed the usual healthcheck and made it a simple "OK". Anyhow could have done that and kept the app up. It is the main route that doesn't work. Will report back with what I can find the issue being.

[vonkoff]

Okay now I know where the issue is. Using Algolia and trying to implement this ->

Part of component.

type MainLoaderData = {
  serverState?: InstantSearchServerState;
  serverUrl?: string;
}

 export const loader: LoaderFunction = async ({
 	request,
 }: {
 	request: Request
 }) => {
 	const serverUrl = request.url

 	const serverState = await getServerState(<Search serverUrl={serverUrl} />, {
 		renderToString,
 	})

 	if (serverState === null) throw new Error('Server Data did not load in')

 	const data: MainLoaderData = {
 		serverUrl,
 		serverState,
 	}

 	return json(data)
}

export default function Index() {
	const { serverState, serverUrl } = useLoaderData<MainLoaderData>()

	return (
		<>
            <Search serverState={serverState} serverUrl={serverUrl} />;

I'm not gonna past the rest of my actual other file because it is a lot, but I'll paste below the example from the link above:

import { renderToString } from 'react-dom/server';
import algoliasearch from 'algoliasearch/lite';
import type { InstantSearchServerState } from 'react-instantsearch';
import {
  InstantSearch,
  InstantSearchSSRProvider,
  getServerState,
} from 'react-instantsearch';
import { history } from 'instantsearch.js/cjs/lib/routers/index.js';

import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import type { LoaderFunction } from '@remix-run/node';

const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');

export const loader: LoaderFunction = async ({ request }) => {
  const serverUrl = request.url;
  const serverState = await getServerState(
    <Search serverUrl={serverUrl} />,
    { renderToString }
  );

  return json({
    serverState,
    serverUrl,
  });
};

type SearchProps = {
  serverState?: InstantSearchServerState;
  serverUrl?: string;
};

function Search({ serverState, serverUrl }: SearchProps) {
  return (
    <InstantSearchSSRProvider {...serverState}>
      <InstantSearch
        searchClient={searchClient}
        indexName="YourIndexName"
        routing={{
          router: history({
            getLocation() {
              if (typeof window === 'undefined') {
                return new URL(serverUrl!) as unknown as Location;
              }

              return window.location;
            },
          }),
        }}
      >
        {/* Widgets */}
      </InstantSearch>
    </InstantSearchSSRProvider>
  );
}

export default function HomePage() {
  const { serverState, serverUrl } = useLoaderData() as SearchProps;

  return <Search serverState={serverState} serverUrl={serverUrl} />;
}

I wonder if the issue is because import { history } from 'instantsearch.js/cjs/lib/routers/index.js'; is what is in the example and I am trying to use import { history } from 'instantsearch.js/es/lib/routers/index.js';. I am not positive. I'll try to keep this up and put in answer if I am to find it for someone later.

But for now, just taking off the SSR stuff will get this to work

[kentcdodds]

Yeah, I don't think algolia is capable of rendering on the server at all. You may need to do all algolia stuff in a *.client.tsx file and use ClientOnly from remix-utils to only include algolia in the client build.