fix: docker, build changes, export, explorer errors and logging

.github/workflows/pr.yml

@@ -43,7 +43,14 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NOTION_TOKEN: ${{ secrets.NOTION_TOKEN }}
           ASSETS: ${{ github.workspace }}/assets
+      - name: Containers
+        shell: bash
+        run: npx nx affected --target=container --configuration=production --parallel=5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NOTION_TOKEN: ${{ secrets.NOTION_TOKEN }}
+          ASSETS: ${{ github.workspace }}/assets
       - name: Export
         shell: bash
         # issue with parallelism
-        run: npx nx affected --target=export --configuration=ci --parallel=1
+        run: npx nx affected --target=build --configuration=export --parallel=5

apps/explorer/Dockerfile

@@ -0,0 +1,22 @@
+FROM node:18-alpine as runner
+
+RUN npm i -g sharp
+
+WORKDIR /app
+
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --chown=nextjs:nodejs ./dist/apps/explorer/.next/standalone ./
+COPY --chown=nextjs:nodejs ./dist/apps/explorer/.next/static ./dist/apps/explorer/.next/static
+COPY --chown=nextjs:nodejs ./dist/apps/explorer/public ./apps/explorer/public
+
+USER nextjs
+EXPOSE 3000
+
+CMD node apps/explorer/server.js

apps/explorer/Dockerfile.zen

@@ -0,0 +1,22 @@
+FROM node:18-alpine as runner
+
+RUN npm i -g sharp
+
+WORKDIR /app
+
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --chown=nextjs:nodejs ./dist/apps/explorer-testnet-zen/.next/standalone ./
+COPY --chown=nextjs:nodejs ./dist/apps/explorer-testnet-zen/.next/static ./dist/apps/explorer-testnet-zen/.next/static
+COPY --chown=nextjs:nodejs ./dist/apps/explorer-testnet-zen/public ./apps/explorer/public
+
+USER nextjs
+EXPOSE 3000
+
+CMD node apps/explorer/server.js

apps/explorer/app/address/[id]/error.tsx

@@ -2,7 +2,8 @@
 
 import { StateError } from '../../../components/StateError'
 
-export default function Page() {
+export default function Page({ error }: { error: Error }) {
+  console.error(error)
   return (
     <StateError
       code={500}

apps/explorer/app/address/[id]/opengraph-image.tsx

@@ -16,7 +16,7 @@ export const contentType = 'image/png'
 
 export default async function Image({ params }) {
   const id = params?.id as string
-  const address = await getSiaCentralAddress({
+  const { data: a } = await getSiaCentralAddress({
     params: {
       id,
     },
@@ -25,17 +25,29 @@ export default async function Image({ params }) {
     },
   })
 
+  if (!a) {
+    return getOGImage(
+      {
+        id,
+        title: truncate(id, 30),
+        subtitle: 'address',
+        initials: 'A',
+      },
+      size
+    )
+  }
+
   const values = [
     {
       label: 'siacoin balance',
-      value: humanSiacoin(address?.unspent_siacoins || 0),
+      value: humanSiacoin(a?.unspent_siacoins || 0),
     },
   ]
 
-  if (address?.unspent_siafunds !== '0') {
+  if (a.unspent_siafunds !== '0') {
     values.push({
       label: 'siafund balance',
-      value: humanSiafund(Number(address?.unspent_siafunds) || 0),
+      value: humanSiafund(Number(a?.unspent_siafunds) || 0),
     })
   }
 

apps/explorer/app/address/[id]/page.tsx

@@ -23,7 +23,7 @@ export const revalidate = 60
 
 export default async function Page({ params }) {
   const id = params?.id as string
-  const a = await getSiaCentralAddress({
+  const { data: a, error } = await getSiaCentralAddress({
     params: {
       id,
     },
@@ -32,7 +32,11 @@ export default async function Page({ params }) {
     },
   })
 
-  if (a.unspent_siacoins == undefined) {
+  if (error) {
+    throw Error(error)
+  }
+
+  if (a?.unspent_siacoins == undefined) {
     return notFound()
   }
 

apps/explorer/app/block/[id]/error.tsx

@@ -2,7 +2,8 @@
 
 import { StateError } from '../../../components/StateError'
 
-export default function Page() {
+export default function Page({ error }: { error: Error }) {
+  console.error(error)
   return (
     <StateError
       code={500}

apps/explorer/app/block/[id]/opengraph-image.tsx

@@ -2,6 +2,7 @@ import { getSiaCentralBlock } from '@siafoundation/sia-central'
 import { humanDate } from '@siafoundation/sia-js'
 import { getOGImage } from '../../../components/OGImageEntity'
 import { siaCentralApi } from '../../../config'
+import { truncate } from '@siafoundation/design-system'
 
 export const revalidate = 60
 
@@ -15,7 +16,7 @@ export const contentType = 'image/png'
 
 export default async function Image({ params }) {
   const id = params?.id as string
-  const b = await getSiaCentralBlock({
+  const { data: b } = await getSiaCentralBlock({
     params: {
       id,
     },
@@ -24,6 +25,18 @@ export default async function Image({ params }) {
     },
   })
 
+  if (!b || !b.block) {
+    return getOGImage(
+      {
+        id,
+        title: truncate(id, 30),
+        subtitle: 'block',
+        initials: 'B',
+      },
+      size
+    )
+  }
+
   const values = [
     {
       label: 'transactions',

apps/explorer/app/block/[id]/page.tsx

@@ -34,7 +34,7 @@ export const revalidate = 60
 
 export default async function Page({ params }) {
   const id = params?.id as string
-  const b = await getSiaCentralBlock({
+  const { data: b, error } = await getSiaCentralBlock({
     params: {
       id,
     },
@@ -43,7 +43,11 @@ export default async function Page({ params }) {
     },
   })
 
-  if (!b.block) {
+  if (error) {
+    throw Error(error)
+  }
+
+  if (!b?.block) {
     return notFound()
   }
 

apps/explorer/app/contract/[id]/error.tsx

@@ -2,7 +2,8 @@
 
 import { StateError } from '../../../components/StateError'
 
-export default function Page() {
+export default function Page({ error }: { error: Error }) {
+  console.error(error)
   return (
     <StateError
       code={500}

apps/explorer/app/contract/[id]/opengraph-image.tsx

@@ -25,7 +25,7 @@ const currency = currencyOptions.find((c) => c.id === 'usd') as CurrencyOption
 export default async function Image({ params }) {
   const id = params?.id as string
 
-  const [c, r] = await Promise.all([
+  const [{ data: c }, { data: r }] = await Promise.all([
     getSiaCentralContract({
       params: {
         id,
@@ -41,6 +41,18 @@ export default async function Image({ params }) {
     }),
   ])
 
+  if (!c || !c.contract) {
+    return getOGImage(
+      {
+        id,
+        title: truncate(id, 30),
+        subtitle: 'contract',
+        initials: 'C',
+      },
+      size
+    )
+  }
+
   const values = [
     {
       label: 'data size',
@@ -55,7 +67,7 @@ export default async function Image({ params }) {
     },
     {
       label: 'payout',
-      value: siacoinToFiat(c.contract.payout, {
+      value: siacoinToFiat(c.contract.payout, r && {
         currency,
         rate: r.rates.sc.usd,
       }),
@@ -72,8 +84,8 @@ export default async function Image({ params }) {
         c.contract.status === 'obligationSucceeded'
           ? 'green'
           : c.contract.status === 'obligationFailed'
-          ? 'red'
-          : 'amber',
+            ? 'red'
+            : 'amber',
       initials: 'C',
       values,
     },

apps/explorer/app/contract/[id]/page.tsx

@@ -28,7 +28,7 @@ export const revalidate = 60
 
 export default async function Page({ params }) {
   const id = params?.id as string
-  const [c, r] = await Promise.all([
+  const [{ data: c, error }, { data: r }] = await Promise.all([
     getSiaCentralContract({
       params: {
         id,
@@ -44,11 +44,19 @@ export default async function Page({ params }) {
     }),
   ])
 
-  const contract = c?.contract
+  if (error) {
+    throw Error(error)
+  }
+
+  if (!c?.contract) {
+    return notFound()
+  }
+
+  const contract = c.contract
   const formationTxnId = getFormationTxnId(contract)
   const finalRevisionTxnId = contract?.transaction_id || ''
 
-  const [ft, rt] = await Promise.all([
+  const [{ data: ft }, { data: rt }] = await Promise.all([
     getSiaCentralTransaction({
       params: {
         id: formationTxnId,
@@ -72,14 +80,10 @@ export default async function Page({ params }) {
   const renewalTransaction = rt?.transaction
   const renewedTo = renewalTransaction?.storage_contracts?.[0]
 
-  if (!c.contract) {
-    return notFound()
-  }
-
   return (
     <ContractView
       contract={contract}
-      rates={r.rates}
+      rates={r?.rates}
       renewedFrom={renewedFrom}
       renewedTo={renewedTo}
       formationTransaction={formationTransaction}

apps/explorer/app/error.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { StateError } from '../components/StateError'
+
+export default function Page({ error }: { error: Error }) {
+  console.error(error)
+  return (
+    <StateError
+      code={500}
+      message="Error, the explorer is having issues loading data."
+    />
+  )
+}

apps/explorer/app/faucet/error.tsx

@@ -2,7 +2,8 @@
 
 import { StateError } from '../../components/StateError'
 
-export default function Page() {
+export default function Page({ error }: { error: Error }) {
+  console.error(error)
   return (
     <StateError
       code={500}

apps/explorer/app/host/[id]/error.tsx

@@ -2,7 +2,8 @@
 
 import { StateError } from '../../../components/StateError'
 
-export default function Page() {
+export default function Page({ error }: { error: Error }) {
+  console.error(error)
   return (
     <StateError
       code={500}