Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

create trace viewer server backend

Browse source
This commit is contained in:
Simon Knott 2024-11-07 16:39:37 +01:00
parent 5a8b49910a
commit cdcf06e3a8
No known key found for this signature in database
GPG key ID: 8CEDC00028084AEC
2 changed files with 34 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/trace-viewer/src/sw/main.ts
View file

@ -18,7 +18,7 @@ import { splitProgress } from './progress';
import { unwrapPopoutUrl } from './snapshotRenderer';
import { SnapshotServer } from './snapshotServer';
import { TraceModel } from './traceModel';
import { FetchTraceModelBackend, ZipTraceModelBackend } from './traceModelBackends';
import { FetchTraceModelBackend, TraceViewerServerBackend, ZipTraceModelBackend } from './traceModelBackends';
import { TraceVersionError } from './traceModernizer';
// @ts-ignore
@ -38,7 +38,7 @@ const loadedTraces = new Map<string, { traceModel: TraceModel, snapshotServer: S
const clientIdToTraceUrls = new Map<string, { limit: number | undefined, traceUrls: Set<string> }>();
async function loadTrace(traceUrl: string, traceFileName: string | null, clientId: string, limit: number | undefined, progress: (done: number, total: number) => undefined): Promise<TraceModel> {
async function loadTrace(traceUrl: string, traceFileName: string | null, clientId: string, traceViewerServer: TraceViewerServerBackend, limit: number | undefined, progress: (done: number, total: number) => undefined): Promise<TraceModel> {
await gc();
let data = clientIdToTraceUrls.get(clientId);
if (!data) {
@ -51,7 +51,7 @@ async function loadTrace(traceUrl: string, traceFileName: string | null, clientI
try {
// Allow 10% to hop from sw to page.
const [fetchProgress, unzipProgress] = splitProgress(progress, [0.5, 0.4, 0.1]);
const backend = traceUrl.endsWith('json') ? new FetchTraceModelBackend(traceUrl) : new ZipTraceModelBackend(traceUrl, fetchProgress);
const backend = traceUrl.endsWith('json') ? new FetchTraceModelBackend(traceUrl, traceViewerServer) : new ZipTraceModelBackend(traceUrl, traceViewerServer, fetchProgress);
await traceModel.load(backend, unzipProgress);
} catch (error: any) {
// eslint-disable-next-line no-console
@ -98,7 +98,7 @@ async function doFetch(event: FetchEvent): Promise<Response> {
if (relativePath === '/contexts') {
try {
const limit = url.searchParams.has('limit') ? +url.searchParams.get('limit')! : undefined;
const traceModel = await loadTrace(traceUrl!, url.searchParams.get('traceFileName'), event.clientId, limit, (done: number, total: number) => {
const traceModel = await loadTrace(traceUrl!, url.searchParams.get('traceFileName'), event.clientId, traceViewerServer, limit, (done: number, total: number) => {
client.postMessage({ method: 'progress', params: { done, total } });
});
return new Response(JSON.stringify(traceModel!.contextEntries), {

41
packages/trace-viewer/src/sw/traceModelBackends.ts
View file

@ -28,11 +28,11 @@ export class ZipTraceModelBackend implements TraceModelBackend {
private _entriesPromise: Promise<Map<string, zip.Entry>>;
private _traceURL: string;
constructor(traceURL: string, progress: Progress) {
constructor(traceURL: string, server: TraceViewerServerBackend, progress: Progress) {
this._traceURL = traceURL;
zipjs.configure({ baseURL: self.location.href } as any);
this._zipReader = new zipjs.ZipReader(
new zipjs.HttpReader(formatUrl(traceURL), { mode: 'cors', preventHeadRequest: true } as any),
new zipjs.HttpReader(formatUrl(traceURL, server), { mode: 'cors', preventHeadRequest: true } as any),
{ useWebWorkers: false });
this._entriesPromise = this._zipReader.getEntries({ onprogress: progress }).then(entries => {
const map = new Map<string, zip.Entry>();
@ -83,12 +83,16 @@ export class ZipTraceModelBackend implements TraceModelBackend {
export class FetchTraceModelBackend implements TraceModelBackend {
private _entriesPromise: Promise<Map<string, string>>;
private _traceURL: string;
private _path: string;
private _server: TraceViewerServerBackend;
constructor(traceURL: string) {
this._traceURL = traceURL;
this._entriesPromise = fetch('/trace/file?path=' + encodeURIComponent(traceURL)).then(async response => {
const json = JSON.parse(await response.text());
constructor(path: string, server: TraceViewerServerBackend) {
this._path = path;
this._server = server;
this._entriesPromise = server.readFile(path).then(async response => {
if (!response)
throw new Error('File not found');
const json = await response.json();
const entries = new Map<string, string>();
for (const entry of json.entries)
entries.set(entry.name, entry.path);
@ -101,7 +105,7 @@ export class FetchTraceModelBackend implements TraceModelBackend {
}
traceURL(): string {
return this._traceURL;
return this._path;
}
async entryNames(): Promise<string[]> {
@ -129,14 +133,29 @@ export class FetchTraceModelBackend implements TraceModelBackend {
const fileName = entries.get(entryName);
if (!fileName)
return;
return fetch('/trace/file?path=' + encodeURIComponent(fileName));
return this._server.readFile(fileName);
}
}
function formatUrl(trace: string) {
let url = trace.startsWith('http') || trace.startsWith('blob') ? trace : `file?path=${encodeURIComponent(trace)}`;
function formatUrl(trace: string, server: TraceViewerServerBackend) {
let url = trace.startsWith('http') || trace.startsWith('blob') ? trace : server.getFileURL(trace).toString();
// Dropbox does not support cors.
if (url.startsWith('https://www.dropbox.com/'))
url = 'https://dl.dropboxusercontent.com/' + url.substring('https://www.dropbox.com/'.length);
return url;
}
export class TraceViewerServerBackend {
constructor(private readonly baseUrl: string) {}
getFileURL(path: string): URL {
const url = new URL('trace/file', this.baseUrl);
url.searchParams.set('path', path);
return url;
}
async readFile(path: string): Promise<Response | undefined> {
const response = await fetch(this.getFileURL(path));
if (response.status === 404)
return;
return response;
}
}