wrangler 0.0.13 → 0.0.17

package/src/reporting.ts

@@ -0,0 +1,115 @@
+import { appendFile, readFile } from "fs/promises";
+import * as fs from "node:fs";
+import os from "node:os";
+import path from "path/posix";
+import TOML from "@iarna/toml";
+import { RewriteFrames } from "@sentry/integrations";
+import {
+  captureException,
+  getCurrentHub,
+  startTransaction,
+  init,
+  Integrations,
+  setContext,
+} from "@sentry/node";
+import { execaSync } from "execa";
+import prompts from "prompts";
+import * as pkj from "../package.json";
+
+export function initReporting() {
+  init({
+    release: `${pkj.name}@${pkj.version}`,
+    initialScope: {
+      tags: { [pkj.name]: pkj.version },
+    },
+    dsn: "https://5089b76bf8a64a9c949bf5c2b5e8003c@o51786.ingest.sentry.io/6190959",
+    tracesSampleRate: 1.0,
+    integrations: [
+      new RewriteFrames({
+        root: "",
+        prefix: "/",
+      }),
+      new Integrations.Http({ tracing: true }),
+    ],
+  });
+
+  setContext("System Information", {
+    OS: process.platform,
+    node: process.version,
+    npm: execaSync("npm", ["--version"]).stdout,
+    wrangler: pkj.version,
+  });
+}
+
+async function appendReportingDecision(userInput: "true" | "false") {
+  const homePath = path.join(os.homedir(), ".wrangler/config/");
+  fs.mkdirSync(homePath, { recursive: true });
+  await appendFile(
+    path.join(homePath, "reporting.toml"),
+    `error_tracking_opt = ${userInput} # Sentry \nerror_tracking_opt_date = ${new Date().toISOString()} # Sentry Date Decision \n`,
+    { encoding: "utf-8" }
+  );
+}
+
+function exceptionTransaction(error: Error, origin = "") {
+  const transaction = startTransaction({
+    op: origin,
+    name: error.name,
+  });
+  captureException(error);
+  transaction.finish();
+}
+
+export async function reportError(err: Error, origin = "") {
+  if (!process.stdout.isTTY) return await appendReportingDecision("false");
+
+  const errorTrackingOpt = await reportingPermission();
+
+  if (errorTrackingOpt === undefined) {
+    const userInput = await prompts.prompt({
+      type: "select",
+      name: "sentryDecision",
+      message: "Would you like to submit a report when an error occurs?",
+      choices: [
+        { title: "Always", value: true },
+        { title: "Yes", value: "once" },
+        { title: "No", value: false },
+      ],
+      initial: 2,
+    });
+
+    if (userInput.sentryDecision === "once") {
+      exceptionTransaction(err, origin);
+      return;
+    }
+
+    userInput.sentryDecision
+      ? await appendReportingDecision("true")
+      : await appendReportingDecision("false");
+  }
+
+  if (!errorTrackingOpt) {
+    const sentryClient = getCurrentHub().getClient();
+    if (sentryClient !== undefined) sentryClient.getOptions().enabled = false;
+  }
+
+  exceptionTransaction(err, origin);
+}
+
+async function reportingPermission() {
+  if (
+    !fs.existsSync(path.join(os.homedir(), ".wrangler/config/reporting.toml"))
+  )
+    return undefined;
+
+  const reportingTOML = TOML.parse(
+    await readFile(path.join(os.homedir(), ".wrangler/config/reporting.toml"), {
+      encoding: "utf-8",
+    })
+  );
+  const { error_tracking_opt } = reportingTOML as {
+    error_tracking_opt: string | undefined;
+  };
+
+  return error_tracking_opt;
+}

package/src/sites.tsx

@@ -1,10 +1,15 @@
-import * as path from "node:path";
 import { readdir, readFile, stat } from "node:fs/promises";
+import * as path from "node:path";
 import ignore from "ignore";
-import { XXHash64 } from "xxhash-addon";
-import { fetchResult } from "./cfetch";
+import xxhash from "xxhash-wasm";
+import {
+  createNamespace,
+  listNamespaceKeys,
+  listNamespaces,
+  putBulkKeyValue,
+} from "./kv";
 import type { Config } from "./config";
-import { listNamespaceKeys, listNamespaces, putBulkKeyValue } from "./kv";
+import type { XXHashAPI } from "xxhash-wasm";
 
 /** Paths to always ignore. */
 const ALWAYS_IGNORE = ["node_modules"];
@@ -42,11 +47,8 @@ async function* getFilesInFolder(dirPath: string): AsyncIterable<string> {
  * the most important thing here is to detect changes of a single file to invalidate the cache and
  * it's impossible to serve two different files with the same name
  */
-function hashFileContent(content: string): string {
-  const hasher = new XXHash64();
-  hasher.update(Buffer.from(content));
-  const hash = hasher.digest();
-  return hash.toString("hex").substring(0, 10);
+function hashFileContent(hasher: XXHashAPI, content: string): string {
+  return hasher.h64ToString(content).substring(0, 10);
 }
 
 /**
@@ -55,11 +57,15 @@ function hashFileContent(content: string): string {
  * The key will change if the file path or content of the asset changes.
  * The algorithm used here matches that of Wrangler 1.
  */
-function hashAsset(filePath: string, content: string): string {
+function hashAsset(
+  hasher: XXHashAPI,
+  filePath: string,
+  content: string
+): string {
   const extName = path.extname(filePath) || "";
   const baseName = path.basename(filePath, extName);
   const directory = path.dirname(filePath);
-  const hash = hashFileContent(content);
+  const hash = hashFileContent(hasher, content);
   return urlSafe(path.join(directory, `${baseName}.${hash}${extName}`));
 }
 
@@ -76,21 +82,12 @@ async function createKVNamespaceIfNotAlreadyExisting(
   }
 
   // else we make the namespace
-  // TODO: use an export from ./kv
-  const json = await fetchResult<{ id: string }>(
-    `/accounts/${accountId}/storage/kv/namespaces`,
-    {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({ title }),
-    }
-  );
+  const id = await createNamespace(accountId, title);
+  console.log(`🌀 Created namespace for Workers Site "${title}"`);
 
   return {
     created: true,
-    id: json.id,
+    id,
   };
 }
 
@@ -111,7 +108,7 @@ export async function syncAssets(
   scriptName: string,
   siteAssets: AssetPaths | undefined,
   preview: boolean,
-  _env?: string
+  env: string | undefined
 ): Promise<{
   manifest: { [filePath: string]: string } | undefined;
   namespace: string | undefined;
@@ -120,7 +117,9 @@ export async function syncAssets(
     return { manifest: undefined, namespace: undefined };
   }
 
-  const title = `__${scriptName}_sites_assets${preview ? "_preview" : ""}`;
+  const title = `__${scriptName}${env ? `-${env}` : ""}-workers_sites_assets${
+    preview ? "_preview" : ""
+  }`;
   const { id: namespace } = await createKVNamespaceIfNotAlreadyExisting(
     title,
     accountId
@@ -130,7 +129,7 @@ export async function syncAssets(
   const result = await listNamespaceKeys(accountId, namespace);
   const keys = new Set(result.map((x) => x.name));
 
-  const manifest = {};
+  const manifest: Record<string, string> = {};
   const upload: {
     key: string;
     value: string;
@@ -139,6 +138,8 @@ export async function syncAssets(
 
   const include = createPatternMatcher(siteAssets.includePatterns, false);
   const exclude = createPatternMatcher(siteAssets.excludePatterns, true);
+  const hasher = await xxhash();
+
   // TODO: this can be more efficient by parallelising
   for await (const file of getFilesInFolder(siteAssets.baseDirectory)) {
     if (!include(file)) {
@@ -152,7 +153,7 @@ export async function syncAssets(
     console.log(`reading ${file}...`);
     const content = await readFile(file, "base64");
 
-    const assetKey = hashAsset(file, content);
+    const assetKey = await hashAsset(hasher, file, content);
     validateAssetKey(assetKey);
 
     // now put each of the files into kv

package/src/tail.tsx

@@ -8,6 +8,58 @@ export type TailApiResponse = {
   expires_at: Date;
 };
 
+export type TailCLIFilters = {
+  status?: Array<"ok" | "error" | "canceled">;
+  header?: string;
+  method?: string[];
+  search?: string;
+  samplingRate?: number;
+  clientIp?: string[];
+};
+
+// due to the trace worker being built around wrangler 1 and
+// some other stuff, the filters we send to the API are slightly
+// different than the ones we read from the CLI
+type SamplingRateFilter = {
+  sampling_rate: number;
+};
+
+type OutcomeFilter = {
+  outcome: string[];
+};
+
+type MethodFilter = {
+  method: string[];
+};
+
+type HeaderFilter = {
+  header: {
+    key: string;
+    query?: string;
+  };
+};
+
+type ClientIpFilter = {
+  client_ip: string[];
+};
+
+type QueryFilter = {
+  query: string;
+};
+
+type ApiFilter =
+  | SamplingRateFilter
+  | OutcomeFilter
+  | MethodFilter
+  | HeaderFilter
+  | ClientIpFilter
+  | QueryFilter;
+
+type ApiFilterMessage = {
+  filters: ApiFilter[];
+  debug: boolean;
+};
+
 function makeCreateTailUrl(accountId: string, workerName: string): string {
   return `/accounts/${accountId}/workers/scripts/${workerName}/tails`;
 }
@@ -35,7 +87,7 @@ async function createTailButDontConnect(
 export async function createTail(
   accountId: string,
   workerName: string,
-  _filters: Filters
+  filters: ApiFilter[]
 ): Promise<{
   tail: WebSocket;
   expiration: Date;
@@ -60,14 +112,131 @@ export async function createTail(
     },
   });
 
-  // TODO: send filters as well
+  // check if there's any filters to send
+  if (filters.length !== 0) {
+    const message: ApiFilterMessage = {
+      filters,
+      // if debug is set to true, then all logs will be sent through.
+      // logs that _would_ have been blocked will result with a message
+      // telling you what filter would have rejected it
+      debug: false,
+    };
+
+    tail.on("open", function () {
+      tail.send(
+        JSON.stringify(message),
+        { binary: false, compress: false, mask: false, fin: true },
+        (err) => {
+          if (err) {
+            throw err;
+          }
+        }
+      );
+    });
+  }
+
   return { tail, expiration, deleteTail };
 }
 
-export type Filters = {
-  status?: "ok" | "error" | "canceled";
-  header?: string;
-  method?: string;
-  "sampling-rate"?: number;
-  search?: string;
-};
+export function translateCliFiltersToApiFilters(
+  cliFilters: TailCLIFilters
+): ApiFilter[] {
+  const apiFilters: ApiFilter[] = [];
+
+  if (cliFilters.samplingRate) {
+    apiFilters.push(parseSamplingRate(cliFilters.samplingRate));
+  }
+
+  if (cliFilters.status) {
+    apiFilters.push(parseOutcome(cliFilters.status));
+  }
+
+  if (cliFilters.method) {
+    apiFilters.push(parseMethod(cliFilters.method));
+  }
+
+  if (cliFilters.header) {
+    apiFilters.push(parseHeader(cliFilters.header));
+  }
+
+  if (cliFilters.clientIp) {
+    apiFilters.push(parseClientIp(cliFilters.clientIp));
+  }
+
+  if (cliFilters.search) {
+    apiFilters.push(parseQuery(cliFilters.search));
+  }
+
+  return apiFilters;
+}
+
+function parseSamplingRate(sampling_rate: number): SamplingRateFilter {
+  if (sampling_rate <= 0 || sampling_rate >= 1) {
+    throw new Error(
+      "A sampling rate must be between 0 and 1 in order to have any effect.\nFor example, a sampling rate of 0.25 means 25% of events will be logged."
+    );
+  }
+
+  return { sampling_rate };
+}
+
+function parseOutcome(
+  statuses: Array<"ok" | "error" | "canceled">
+): OutcomeFilter {
+  const outcomes = new Set<string>();
+  for (const status of statuses) {
+    switch (status) {
+      case "ok":
+        outcomes.add("ok");
+        break;
+      case "canceled":
+        outcomes.add("canceled");
+        break;
+      // there's more than one way to error
+      case "error":
+        outcomes.add("exception");
+        outcomes.add("exceededCpu");
+        outcomes.add("unknown");
+        break;
+      default:
+        break;
+    }
+  }
+
+  return {
+    outcome: Array.from(outcomes),
+  };
+}
+
+// we actually don't need to do anything here
+function parseMethod(method: string[]): MethodFilter {
+  return { method };
+}
+
+function parseHeader(header: string): HeaderFilter {
+  // headers of the form "HEADER-KEY: VALUE" get split.
+  // the query is optional
+  const [headerKey, headerQuery] = header.split(":", 2);
+  return {
+    header: {
+      key: headerKey.trim(),
+      query: headerQuery?.trim(),
+    },
+  };
+}
+
+function parseClientIp(client_ip: string[]): ClientIpFilter {
+  return { client_ip };
+}
+
+function parseQuery(query: string): QueryFilter {
+  return { query };
+}
+
+export function prettyPrintLogs(_data: WebSocket.RawData): void {
+  throw new Error("TODO!");
+}
+
+export function jsonPrintLogs(data: WebSocket.RawData): void {
+  console.log(JSON.stringify(JSON.parse(data.toString()), null, 2));
+}

package/src/user.tsx

@@ -1,6 +1,6 @@
 /* Based heavily on code from https://github.com/BitySA/oauth2-auth-code-pkce */
 
-/* 
+/*
 
                                  Apache License
                            Version 2.0, January 2004
@@ -205,25 +205,26 @@
    limitations under the License.
   */
 
-import React from "react";
-import { render, Text } from "ink";
-import Table from "ink-table";
-import SelectInput from "ink-select-input";
-import fetch from "node-fetch";
+import assert from "node:assert";
 import { webcrypto as crypto } from "node:crypto";
-import { TextEncoder } from "node:util";
-import open from "open";
-import url from "node:url";
-import http from "node:http";
 import { readFile, writeFile, rm, mkdir } from "node:fs/promises";
+import http from "node:http";
+import os from "node:os";
 import path from "node:path";
 import process from "node:process";
-import os from "node:os";
+import url from "node:url";
+import { TextEncoder } from "node:util";
 import TOML from "@iarna/toml";
-import assert from "node:assert";
-import type { ParsedUrlQuery } from "node:querystring";
+import { render, Text } from "ink";
+import SelectInput from "ink-select-input";
+import Table from "ink-table";
+import React from "react";
+import { fetch } from "undici";
 import { CF_API_BASE_URL } from "./cfetch";
-import type { Response } from "node-fetch";
+import openInBrowser from "./open-in-browser";
+import type { Item as SelectInputItem } from "ink-select-input/build/SelectInput";
+import type { ParsedUrlQuery } from "node:querystring";
+import type { Response } from "undici";
 
 /**
  * An implementation of rfc6749#section-4.1 and rfc7636.
@@ -276,14 +277,14 @@ const Scopes = {
  *
  * "offline_access" is automatically included.
  */
-type Scope = keyof typeof Scopes | "offline_access";
+type Scope = keyof typeof Scopes;
 
 const ScopeKeys = Object.keys(Scopes) as Scope[];
 
 export function validateScopeKeys(
   scopes: string[]
 ): scopes is typeof ScopeKeys {
-  return scopes.every((scope) => Scopes[scope]);
+  return scopes.every((scope) => scope in Scopes);
 }
 
 const CLIENT_ID = "54d11594-84e4-41aa-b438-e81b8fa78ee7";
@@ -561,6 +562,7 @@ export async function getAuthURL(scopes = ScopeKeys): Promise<string> {
     `?response_type=code&` +
     `client_id=${encodeURIComponent(CLIENT_ID)}&` +
     `redirect_uri=${encodeURIComponent(CALLBACK_URL)}&` +
+    // @ts-expect-error we add offline_access manually
     `scope=${encodeURIComponent(scopes.concat("offline_access").join(" "))}&` +
     `state=${stateQueryParam}&` +
     `code_challenge=${encodeURIComponent(codeChallenge)}&` +
@@ -568,6 +570,17 @@ export async function getAuthURL(scopes = ScopeKeys): Promise<string> {
   );
 }
 
+type TokenResponse =
+  | {
+      access_token: string;
+      expires_in: number;
+      refresh_token: string;
+      scope: string;
+    }
+  | {
+      error: string;
+    };
+
 /**
  * Refresh an access token from the remote service.
  */
@@ -592,13 +605,12 @@ async function exchangeRefreshTokenForAccessToken(): Promise<AccessContext> {
     throw await response.json();
   } else {
     try {
-      const json = await response.json();
-      const { access_token, expires_in, refresh_token, scope } = json as {
-        access_token: string;
-        expires_in: number;
-        refresh_token: string;
-        scope: string;
-      };
+      const json = (await response.json()) as TokenResponse;
+      if ("error" in json) {
+        throw json.error;
+      }
+
+      const { access_token, expires_in, refresh_token, scope } = json;
       let scopes: Scope[] = [];
 
       const accessToken: AccessToken = {
@@ -626,20 +638,24 @@ async function exchangeRefreshTokenForAccessToken(): Promise<AccessContext> {
         refreshToken: LocalState.refreshToken,
       };
       return accessContext;
-    } catch (err) {
-      const error = err?.error || "There was a network error.";
+    } catch (error) {
       switch (error) {
         case "invalid_grant":
-          console.log(
+          console.warn(
             "Expired! Auth code or refresh token needs to be renewed."
           );
           // alert("Redirecting to auth server to obtain a new auth grant code.");
           // TODO: return refreshAuthCodeOrRefreshToken();
           break;
         default:
+          console.error(error);
           break;
       }
-      throw toErrorClass(error);
+      if (typeof error === "string") {
+        throw toErrorClass(error);
+      } else {
+        throw error;
+      }
     }
   }
 }
@@ -680,13 +696,11 @@ async function exchangeAuthCodeForAccessToken(): Promise<AccessContext> {
     }
     throw toErrorClass(error);
   }
-  const json = await response.json();
-  const { access_token, expires_in, refresh_token, scope } = json as {
-    access_token: string;
-    expires_in: number;
-    refresh_token: string;
-    scope: string;
-  };
+  const json = (await response.json()) as TokenResponse;
+  if ("error" in json) {
+    throw new Error(json.error);
+  }
+  const { access_token, expires_in, refresh_token, scope } = json;
   let scopes: Scope[] = [];
   LocalState.hasAuthCodeBeenExchangedForAccessToken = true;
 
@@ -804,18 +818,18 @@ export async function loginOrRefreshIfRequired(): Promise<boolean> {
 
 export async function login(props?: LoginProps): Promise<boolean> {
   const urlToOpen = await getAuthURL(props?.scopes);
-  await open(urlToOpen);
-  // TODO: log url only if on system where it's unreliable/unavailable
-  // console.log(`💁 Opened ${urlToOpen}`);
-  let server;
-  let loginTimeoutHandle;
+  await openInBrowser(urlToOpen);
+  let server: http.Server;
+  let loginTimeoutHandle: NodeJS.Timeout;
   const timerPromise = new Promise<boolean>((resolve) => {
     loginTimeoutHandle = setTimeout(() => {
-      console.error("Timed out waiting for authorization code.");
+      console.error(
+        "Timed out waiting for authorization code, please try again."
+      );
       server.close();
       clearTimeout(loginTimeoutHandle);
       resolve(false);
-    }, 60000); // wait for 30 seconds for the user to authorize
+    }, 60000); // wait for 60 seconds for the user to authorize
   });
 
   const loginPromise = new Promise<boolean>((resolve, reject) => {
@@ -847,7 +861,7 @@ export async function login(props?: LoginProps): Promise<boolean> {
               });
               console.log(
                 "Error: Consent denied. You must grant consent to Wrangler in order to login. If you don't want to do this consider passing an API token with CF_API_TOKEN variable"
-              ); // TODO: implement wrangler config lol
+              );
 
               return;
             } else {
@@ -939,7 +953,7 @@ export async function logout(): Promise<void> {
 export function listScopes(): void {
   throwIfNotInitialised();
   console.log("💁 Available scopes:");
-  const data = ScopeKeys.map((scope) => ({
+  const data = ScopeKeys.map((scope: Scope) => ({
     Scope: scope,
     Description: Scopes[scope],
   }));
@@ -1001,7 +1015,7 @@ type ChooseAccountItem = {
 };
 export function ChooseAccount(props: {
   accounts: ChooseAccountItem[];
-  onSelect: (item) => void;
+  onSelect: (item: SelectInputItem<ChooseAccountItem>) => void;
 }) {
   return (
     <>

package/templates/new-worker.js

@@ -0,0 +1,15 @@
+/**
+ * Welcome to Cloudflare Workers! This is your first worker.
+ *
+ * - Run `npx wrangler dev src/index.js` in your terminal to start a development server
+ * - Open a browser tab at http://localhost:8787/ to see your worker in action
+ * - Run `npx wrangler publish src/index.js --name my-worker` to deploy your worker
+ *
+ * Learn more at https://developers.cloudflare.com/workers/
+ */
+
+export default {
+  async fetch(request) {
+    return new Response("Hello World!");
+  },
+};

package/templates/new-worker.ts

@@ -0,0 +1,15 @@
+/**
+ * Welcome to Cloudflare Workers! This is your first worker.
+ *
+ * - Run `wrangler dev src/index.ts` in your terminal to start a development server
+ * - Open a browser tab at http://localhost:8787/ to see your worker in action
+ * - Run `wrangler publish src/index.ts --name my-worker` to deploy your worker
+ *
+ * Learn more at https://developers.cloudflare.com/workers/
+ */
+
+export default {
+  async fetch(request: Request): Promise<Response> {
+    return new Response("Hello World!");
+  },
+};