Tests

.codesandbox/tasks.json

@@ -0,0 +1,47 @@
+{
+  // These tasks will run in order when initializing your CodeSandbox project.
+  "setupTasks": [
+    {
+      "name": "Install node 18",
+      "command": "nvm install 18"
+    },
+    {
+      "name": "Install Dependencies",
+      "command": "yarn install"
+    }
+  ],
+
+  // These tasks can be run from CodeSandbox. Running one will open a log in the app.
+  "tasks": {
+    "d": {
+      "name": "d",
+      "command": "yarn d",
+      "runAtStart": false
+    },
+    "start": {
+      "name": "start",
+      "command": "yarn start",
+      "runAtStart": true
+    },
+    "build": {
+      "name": "build",
+      "command": "yarn build",
+      "runAtStart": false
+    },
+    "preview": {
+      "name": "preview",
+      "command": "yarn preview",
+      "runAtStart": false
+    },
+    "test": {
+      "name": "test",
+      "command": "yarn test",
+      "runAtStart": false
+    },
+    "coverage": {
+      "name": "coverage",
+      "command": "yarn coverage",
+      "runAtStart": false
+    }
+  }
+}

.eslintrc

@@ -12,6 +12,9 @@
         "import/resolver": {
             "typescript": true,
             "node": true
+        },
+        "jest": {
+            "version": 27
         }
     },
     "rules": {

api/__tests__/__snapshots__/image2data.test.ts.snap

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1
+
+exports[`api/image2data > should generate correct string 1`] = `
+{
+  "dataUrl": "data:text/html; charset=UTF-8;base64,PCFET0NUWVBFIGh0bWw+CjwhLS1baWYgbHQgSUUgN10+IDxodG1sIGNsYXNzPSJuby1qcyBpZTYgb2xkaWUiIGxhbmc9ImVuLVVTIj4gPCFbZW5kaWZdLS0+CjwhLS1baWYgSUUgN10+ICAgIDxodG1sIGNsYXNzPSJuby1qcyBpZTcgb2xkaWUiIGxhbmc9ImVuLVVTIj4gPCFbZW5kaWZdLS0+CjwhLS1baWYgSUUgOF0+ICAgIDxodG1sIGNsYXNzPSJuby1qcyBpZTggb2xkaWUiIGxhbmc9ImVuLVVTIj4gPCFbZW5kaWZdLS0+CjwhLS1baWYgZ3QgSUUgOF0+PCEtLT4gPGh0bWwgY2xhc3M9Im5vLWpzIiBsYW5nPSJlbi1VUyI+IDwhLS08IVtlbmRpZl0tLT4KPGhlYWQ+Cjx0aXRsZT5BdHRlbnRpb24gUmVxdWlyZWQhIHwgQ2xvdWRmbGFyZTwvdGl0bGU+CjxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgo8bWV0YSBodHRwLWVxdWl2PSJDb250ZW50LVR5cGUiIGNvbnRlbnQ9InRleHQvaHRtbDsgY2hhcnNldD1VVEYtOCIgLz4KPG1ldGEgaHR0cC1lcXVpdj0iWC1VQS1Db21wYXRpYmxlIiBjb250ZW50PSJJRT1FZGdlIiAvPgo8bWV0YSBuYW1lPSJyb2JvdHMiIGNvbnRlbnQ9Im5vaW5kZXgsIG5vZm9sbG93IiAvPgo8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLGluaXRpYWwtc2NhbGU9MSIgLz4KPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBpZD0iY2Zfc3R5bGVzLWNzcyIgaHJlZj0iL2Nkbi1jZ2kvc3R5bGVzL2NmLmVycm9ycy5jc3MiIC8+CjwhLS1baWYgbHQgSUUgOV0+PGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBpZD0nY2Zfc3R5bGVzLWllLWNzcycgaHJlZj0iL2Nkbi1jZ2kvc3R5bGVzL2NmLmVycm9ycy5pZS5jc3MiIC8+PCFbZW5kaWZdLS0+CjxzdHlsZT5ib2R5e21hcmdpbjowO3BhZGRpbmc6MH08L3N0eWxlPgoKCjwhLS1baWYgZ3RlIElFIDEwXT48IS0tPgo8c2NyaXB0PgogIGlmICghbmF2aWdhdG9yLmNvb2tpZUVuYWJsZWQpIHsKICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdET01Db250ZW50TG9hZGVkJywgZnVuY3Rpb24gKCkgewogICAgICB2YXIgY29va2llRWwgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnY29va2llLWFsZXJ0Jyk7CiAgICAgIGNvb2tpZUVsLnN0eWxlLmRpc3BsYXkgPSAnYmxvY2snOwogICAgfSkKICB9Cjwvc2NyaXB0Pgo8IS0tPCFbZW5kaWZdLS0+CgoKPC9oZWFkPgo8Ym9keT4KICA8ZGl2IGlkPSJjZi13cmFwcGVyIj4KICAgIDxkaXYgY2xhc3M9ImNmLWFsZXJ0IGNmLWFsZXJ0LWVycm9yIGNmLWNvb2tpZS1lcnJvciIgaWQ9ImNvb2tpZS1hbGVydCIgZGF0YS10cmFuc2xhdGU9ImVuYWJsZV9jb29raWVzIj5QbGVhc2UgZW5hYmxlIGNvb2tpZXMuPC9kaXY+CiAgICA8ZGl2IGlkPSJjZi1lcnJvci1kZXRhaWxzIiBjbGFzcz0iY2YtZXJyb3ItZGV0YWlscy13cmFwcGVyIj4KICAgICAgPGRpdiBjbGFzcz0iY2Ytd3JhcHBlciBjZi1oZWFkZXIgY2YtZXJyb3Itb3ZlcnZpZXciPgogICAgICAgIDxoMSBkYXRhLXRyYW5zbGF0ZT0iYmxvY2tfaGVhZGxpbmUiPlNvcnJ5LCB5b3UgaGF2ZSBiZWVuIGJsb2NrZWQ8L2gxPgogICAgICAgIDxoMiBjbGFzcz0iY2Ytc3ViaGVhZGxpbmUiPjxzcGFuIGRhdGEtdHJhbnNsYXRlPSJ1bmFibGVfdG9fYWNjZXNzIj5Zb3UgYXJlIHVuYWJsZSB0byBhY2Nlc3M8L3NwYW4+IHBsYWNlaG9sZGVyLmNvbTwvaDI+CiAgICAgIDwvZGl2PjwhLS0gLy5oZWFkZXIgLS0+CgogICAgICA8ZGl2IGNsYXNzPSJjZi1zZWN0aW9uIGNmLWhpZ2hsaWdodCI+CiAgICAgICAgPGRpdiBjbGFzcz0iY2Ytd3JhcHBlciI+CiAgICAgICAgICA8ZGl2IGNsYXNzPSJjZi1zY3JlZW5zaG90LWNvbnRhaW5lciBjZi1zY3JlZW5zaG90LWZ1bGwiPgogICAgICAgICAgICAKICAgICAgICAgICAgICA8c3BhbiBjbGFzcz0iY2Ytbm8tc2NyZWVuc2hvdCBlcnJvciI+PC9zcGFuPgogICAgICAgICAgICAKICAgICAgICAgIDwvZGl2PgogICAgICAgIDwvZGl2PgogICAgICA8L2Rpdj48IS0tIC8uY2FwdGNoYS1jb250YWluZXIgLS0+CgogICAgICA8ZGl2IGNsYXNzPSJjZi1zZWN0aW9uIGNmLXdyYXBwZXIiPgogICAgICAgIDxkaXYgY2xhc3M9ImNmLWNvbHVtbnMgdHdvIj4KICAgICAgICAgIDxkaXYgY2xhc3M9ImNmLWNvbHVtbiI+CiAgICAgICAgICAgIDxoMiBkYXRhLXRyYW5zbGF0ZT0iYmxvY2tlZF93aHlfaGVhZGxpbmUiPldoeSBoYXZlIEkgYmVlbiBibG9ja2VkPzwvaDI+CgogICAgICAgICAgICA8cCBkYXRhLXRyYW5zbGF0ZT0iYmxvY2tlZF93aHlfZGV0YWlsIj5UaGlzIHdlYnNpdGUgaXMgdXNpbmcgYSBzZWN1cml0eSBzZXJ2aWNlIHRvIHByb3RlY3QgaXRzZWxmIGZyb20gb25saW5lIGF0dGFja3MuIFRoZSBhY3Rpb24geW91IGp1c3QgcGVyZm9ybWVkIHRyaWdnZXJlZCB0aGUgc2VjdXJpdHkgc29sdXRpb24uIFRoZXJlIGFyZSBzZXZlcmFsIGFjdGlvbnMgdGhhdCBjb3VsZCB0cmlnZ2VyIHRoaXMgYmxvY2sgaW5jbHVkaW5nIHN1Ym1pdHRpbmcgYSBjZXJ0YWluIHdvcmQgb3IgcGhyYXNlLCBhIFNRTCBjb21tYW5kIG9yIG1hbGZvcm1lZCBkYXRhLjwvcD4KICAgICAgICAgIDwvZGl2PgoKICAgICAgICAgIDxkaXYgY2xhc3M9ImNmLWNvbHVtbiI+CiAgICAgICAgICAgIDxoMiBkYXRhLXRyYW5zbGF0ZT0iYmxvY2tlZF9yZXNvbHZlX2hlYWRsaW5lIj5XaGF0IGNhbiBJIGRvIHRvIHJlc29sdmUgdGhpcz88L2gyPgoKICAgICAgICAgICAgPHAgZGF0YS10cmFuc2xhdGU9ImJsb2NrZWRfcmVzb2x2ZV9kZXRhaWwiPllvdSBjYW4gZW1haWwgdGhlIHNpdGUgb3duZXIgdG8gbGV0IHRoZW0ga25vdyB5b3Ugd2VyZSBibG9ja2VkLiBQbGVhc2UgaW5jbHVkZSB3aGF0IHlvdSB3ZXJlIGRvaW5nIHdoZW4gdGhpcyBwYWdlIGNhbWUgdXAgYW5kIHRoZSBDbG91ZGZsYXJlIFJheSBJRCBmb3VuZCBhdCB0aGUgYm90dG9tIG9mIHRoaXMgcGFnZS48L3A+CiAgICAgICAgICA8L2Rpdj4KICAgICAgICA8L2Rpdj4KICAgICAgPC9kaXY+PCEtLSAvLnNlY3Rpb24gLS0+CgogICAgICA8ZGl2IGNsYXNzPSJjZi1lcnJvci1mb290ZXIgY2Ytd3JhcHBlciB3LTI0MCBsZzp3LWZ1bGwgcHktMTAgc206cHktNCBzbTpweC04IG14LWF1dG8gdGV4dC1jZW50ZXIgc206dGV4dC1sZWZ0IGJvcmRlci1zb2xpZCBib3JkZXItMCBib3JkZXItdCBib3JkZXItZ3JheS0zMDAiPgogIDxwIGNsYXNzPSJ0ZXh0LTEzIj4KICAgIDxzcGFuIGNsYXNzPSJjZi1mb290ZXItaXRlbSBzbTpibG9jayBzbTptYi0xIj5DbG91ZGZsYXJlIFJheSBJRDogPHN0cm9uZyBjbGFzcz0iZm9udC1zZW1pYm9sZCI+NzhiN2M1MjMzOGNhNzgxYzwvc3Ryb25nPjwvc3Bhbj4KICAgIDxzcGFuIGNsYXNzPSJjZi1mb290ZXItc2VwYXJhdG9yIHNtOmhpZGRlbiI+JmJ1bGw7PC9zcGFuPgogICAgPHNwYW4gaWQ9ImNmLWZvb3Rlci1pdGVtLWlwIiBjbGFzcz0iY2YtZm9vdGVyLWl0ZW0gaGlkZGVuIHNtOmJsb2NrIHNtOm1iLTEiPgogICAgICBZb3VyIElQOgogICAgICA8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgaWQ9ImNmLWZvb3Rlci1pcC1yZXZlYWwiIGNsYXNzPSJjZi1mb290ZXItaXAtcmV2ZWFsLWJ0biI+Q2xpY2sgdG8gcmV2ZWFsPC9idXR0b24+CiAgICAgIDxzcGFuIGNsYXNzPSJoaWRkZW4iIGlkPSJjZi1mb290ZXItaXAiPjE2Ny4yMzUuOC4yNTE8L3NwYW4+CiAgICAgIDxzcGFuIGNsYXNzPSJjZi1mb290ZXItc2VwYXJhdG9yIHNtOmhpZGRlbiI+JmJ1bGw7PC9zcGFuPgogICAgPC9zcGFuPgogICAgPHNwYW4gY2xhc3M9ImNmLWZvb3Rlci1pdGVtIHNtOmJsb2NrIHNtOm1iLTEiPjxzcGFuPlBlcmZvcm1hbmNlICZhbXA7IHNlY3VyaXR5IGJ5PC9zcGFuPiA8YSByZWw9Im5vb3BlbmVyIG5vcmVmZXJyZXIiIGhyZWY9Imh0dHBzOi8vd3d3LmNsb3VkZmxhcmUuY29tLzV4eC1lcnJvci1sYW5kaW5nIiBpZD0iYnJhbmRfbGluayIgdGFyZ2V0PSJfYmxhbmsiPkNsb3VkZmxhcmU8L2E+PC9zcGFuPgogICAgCiAgPC9wPgogIDxzY3JpcHQ+KGZ1bmN0aW9uKCl7ZnVuY3Rpb24gZCgpe3ZhciBiPWEuZ2V0RWxlbWVudEJ5SWQoImNmLWZvb3Rlci1pdGVtLWlwIiksYz1hLmdldEVsZW1lbnRCeUlkKCJjZi1mb290ZXItaXAtcmV2ZWFsIik7YiYmImNsYXNzTGlzdCJpbiBiJiYoYi5jbGFzc0xpc3QucmVtb3ZlKCJoaWRkZW4iKSxjLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIixmdW5jdGlvbigpe2MuY2xhc3NMaXN0LmFkZCgiaGlkZGVuIik7YS5nZXRFbGVtZW50QnlJZCgiY2YtZm9vdGVyLWlwIikuY2xhc3NMaXN0LnJlbW92ZSgiaGlkZGVuIil9KSl9dmFyIGE9ZG9jdW1lbnQ7ZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lciYmYS5hZGRFdmVudExpc3RlbmVyKCJET01Db250ZW50TG9hZGVkIixkKX0pKCk7PC9zY3JpcHQ+CjwvZGl2PjwhLS0gLy5lcnJvci1mb290ZXIgLS0+CgoKICAgIDwvZGl2PjwhLS0gLyNjZi1lcnJvci1kZXRhaWxzIC0tPgogIDwvZGl2PjwhLS0gLyNjZi13cmFwcGVyIC0tPgoKICA8c2NyaXB0PgogIHdpbmRvdy5fY2ZfdHJhbnNsYXRpb24gPSB7fTsKICAKICAKPC9zY3JpcHQ+Cgo8L2JvZHk+CjwvaHRtbD4K",
+}
+`;

api/__tests__/image2data.test.ts

@@ -0,0 +1,34 @@
+import { kill as killChild } from "node:process";
+import { join } from "node:path";
+
+// @ts-ignore
+import { startDevServer } from "@vercel/node";
+
+describe("api/image2data", () => {
+  let pid: number;
+  let port: number;
+
+  beforeAll(async () => {
+    const devServer: { pid: number; port: number } = await startDevServer({
+      entrypoint: "image2data.ts",
+      workPath: join(__dirname, ".."),
+      config: {},
+    });
+
+    console.log(__dirname, devServer);
+
+    ({ pid, port } = devServer);
+  });
+
+  afterAll(() => {
+    killChild(pid);
+  });
+
+  it("should generate correct string", async () => {
+    const data = await fetch(
+      `http://localhost:${port}/api/image2data?url=https://via.placeholder.com/150`
+    );
+
+    await expect(data.json()).resolves.toMatchSnapshot();
+  });
+});

api/image2data.ts

@@ -1,6 +1,7 @@
 import type { ServerResponse } from 'node:http';
 
 import type { VercelRequest } from '@vercel/node';
+import { fileTypeFromBuffer } from 'file-type'
 
 interface RequestData {
     url?: string;
@@ -21,8 +22,14 @@ export const enum Image2DataError {
 export type ImageResponseData = { dataUrl: string } | { error: string };
 
 export async function downloadAndEncode(url: URL) {
-    const imageResp = await fetch(url);
-    const image = Buffer.from(await imageResp.arrayBuffer()).toString('base64');
+    const imageResp = await fetch(url, { headers: { 'accept': 'image/*' } });
+    const imageBuffer = Buffer.from(await imageResp.arrayBuffer());
+    const imageType = await fileTypeFromBuffer(imageBuffer)
+    const image = imageBuffer.toString('base64');
+
+    console.log(imageType, imageResp.type, imageResp.headers.get('content-type'));
+
+    // TODO: get file type - https://via.placeholder.com/150 has no content-type header
     return `data:${imageResp.headers.get('content-type')};base64,${image}`;
 }
 

api/tunnel.ts

@@ -12,7 +12,8 @@ export default async function handler(req: Request) {
         const { host, pathname } = new URL(header.dsn);
         const projectId = pathname.substring(1);
 
-        if (!host.endsWith(sentryHost)) {
+        // todo: tool
+        if (host !== sentryHost && !host.endsWith(`.${sentryHost}`)) {
             throw new Error(`invalid host: ${host}`);
         }
 

package.json

@@ -13,8 +13,9 @@
     "@reduxjs/toolkit": "^1.9.1",
     "@sentry/react": "^7.30.0",
     "@sentry/tracing": "^7.30.0",
-    "@vercel/node": "^2.8.6",
+    "@vercel/node": "^2.8.13",
     "cheerio": "1.0.0-rc.12",
+    "file-type": "^18.2.0",
     "i18next": "^22.4.9",
     "i18next-browser-languagedetector": "^7.0.1",
     "i18next-http-backend": "^2.1.1",
@@ -41,6 +42,8 @@
     "eslint": "^8.31.0",
     "jest-extended": "^3.2.3",
     "jsdom": "^21.0.0",
+    "nock": "^13.3.0",
+    "path-to-regexp": "^6.2.1",
     "typescript": "^4.9.4",
     "vite": "^4.0.4",
     "vite-plugin-pwa": "^0.14.1",
@@ -53,6 +56,7 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "test": "vitest",
-    "coverage": "vitest run --coverage"
+    "coverage": "vitest run --coverage",
+    "lint": "eslint \"src/**\" \"api/**\""
   }
 }