2021-10-12 13:42:50 -08:00
|
|
|
/**
|
|
|
|
* Copyright (c) Microsoft Corporation.
|
|
|
|
*
|
|
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
* you may not use this file except in compliance with the License.
|
|
|
|
* You may obtain a copy of the License at
|
|
|
|
*
|
|
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
*
|
|
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
* See the License for the specific language governing permissions and
|
|
|
|
* limitations under the License.
|
|
|
|
*/
|
|
|
|
|
2022-09-20 18:41:51 -07:00
|
|
|
import type * as trace from '@trace/trace';
|
2023-02-27 15:29:20 -08:00
|
|
|
import type * as traceV3 from './versions/traceV3';
|
2023-02-22 21:08:47 -08:00
|
|
|
import { parseClientSideCallMetadata } from '@trace/traceUtils';
|
2021-10-12 13:42:50 -08:00
|
|
|
import type zip from '@zip.js/zip.js';
|
|
|
|
// @ts-ignore
|
2022-03-25 13:12:00 -08:00
|
|
|
import zipImport from '@zip.js/zip.js/dist/zip-no-worker-inflate.min.js';
|
2022-04-06 13:57:14 -08:00
|
|
|
import type { ContextEntry, PageEntry } from './entries';
|
|
|
|
import { createEmptyContext } from './entries';
|
2022-03-25 13:12:00 -08:00
|
|
|
import { BaseSnapshotStorage } from './snapshotStorage';
|
2021-10-12 13:42:50 -08:00
|
|
|
|
2022-03-25 13:12:00 -08:00
|
|
|
const zipjs = zipImport as typeof zip;
|
2021-10-12 13:42:50 -08:00
|
|
|
|
|
|
|
export class TraceModel {
|
2023-02-27 22:31:47 -08:00
|
|
|
contextEntries: ContextEntry[] = [];
|
2021-10-12 13:42:50 -08:00
|
|
|
pageEntries = new Map<string, PageEntry>();
|
|
|
|
private _snapshotStorage: PersistentSnapshotStorage | undefined;
|
|
|
|
private _entries = new Map<string, zip.Entry>();
|
|
|
|
private _version: number | undefined;
|
2022-09-26 20:57:05 +02:00
|
|
|
private _zipReader: zip.ZipReader | undefined;
|
2021-10-12 13:42:50 -08:00
|
|
|
|
|
|
|
constructor() {
|
|
|
|
}
|
|
|
|
|
2022-02-07 17:05:42 -08:00
|
|
|
private _formatUrl(trace: string) {
|
|
|
|
let url = trace.startsWith('http') || trace.startsWith('blob') ? trace : `file?path=${trace}`;
|
|
|
|
// 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;
|
|
|
|
}
|
|
|
|
|
2021-10-22 15:59:17 -08:00
|
|
|
async load(traceURL: string, progress: (done: number, total: number) => void) {
|
2022-09-26 20:57:05 +02:00
|
|
|
this._zipReader = new zipjs.ZipReader( // @ts-ignore
|
2022-02-07 17:05:42 -08:00
|
|
|
new zipjs.HttpReader(this._formatUrl(traceURL), { mode: 'cors', preventHeadRequest: true }),
|
2021-10-22 15:59:17 -08:00
|
|
|
{ useWebWorkers: false }) as zip.ZipReader;
|
2023-02-27 22:31:47 -08:00
|
|
|
|
|
|
|
const ordinals: string[] = [];
|
|
|
|
let hasSource = false;
|
2022-09-26 20:57:05 +02:00
|
|
|
for (const entry of await this._zipReader.getEntries({ onprogress: progress })) {
|
2023-02-27 22:31:47 -08:00
|
|
|
const match = entry.filename.match(/([\d]+-)?trace\.trace/);
|
|
|
|
if (match)
|
|
|
|
ordinals.push(match[1] || '');
|
2021-11-15 23:37:39 -08:00
|
|
|
if (entry.filename.includes('src@'))
|
2023-02-27 22:31:47 -08:00
|
|
|
hasSource = true;
|
2021-10-12 13:42:50 -08:00
|
|
|
this._entries.set(entry.filename, entry);
|
|
|
|
}
|
2023-02-27 22:31:47 -08:00
|
|
|
if (!ordinals.length)
|
2022-09-26 20:57:05 +02:00
|
|
|
throw new Error('Cannot find .trace file');
|
|
|
|
|
2021-10-12 13:42:50 -08:00
|
|
|
this._snapshotStorage = new PersistentSnapshotStorage(this._entries);
|
|
|
|
|
2023-02-27 22:31:47 -08:00
|
|
|
for (const ordinal of ordinals) {
|
|
|
|
const contextEntry = createEmptyContext();
|
|
|
|
contextEntry.traceUrl = traceURL;
|
|
|
|
contextEntry.hasSource = hasSource;
|
|
|
|
|
|
|
|
const traceWriter = new zipjs.TextWriter() as zip.TextWriter;
|
|
|
|
const traceEntry = this._entries.get(ordinal + 'trace.trace')!;
|
|
|
|
await traceEntry!.getData!(traceWriter);
|
|
|
|
for (const line of (await traceWriter.getData()).split('\n'))
|
|
|
|
this.appendEvent(contextEntry, line);
|
2021-10-12 13:42:50 -08:00
|
|
|
|
|
|
|
const networkWriter = new zipjs.TextWriter();
|
2023-02-27 22:31:47 -08:00
|
|
|
const networkEntry = this._entries.get(ordinal + 'trace.network')!;
|
|
|
|
await networkEntry?.getData?.(networkWriter);
|
2021-10-12 13:42:50 -08:00
|
|
|
for (const line of (await networkWriter.getData()).split('\n'))
|
2023-02-27 22:31:47 -08:00
|
|
|
this.appendEvent(contextEntry, line);
|
|
|
|
|
|
|
|
const stacksWriter = new zipjs.TextWriter();
|
|
|
|
const stacksEntry = this._entries.get(ordinal + 'trace.stacks');
|
|
|
|
if (stacksEntry) {
|
|
|
|
await stacksEntry!.getData!(stacksWriter);
|
|
|
|
const stacks = parseClientSideCallMetadata(JSON.parse(await stacksWriter.getData()));
|
|
|
|
for (const action of contextEntry.actions)
|
|
|
|
action.stack = action.stack || stacks.get(action.callId);
|
|
|
|
}
|
2023-02-22 21:08:47 -08:00
|
|
|
|
2023-02-27 22:31:47 -08:00
|
|
|
contextEntry.actions.sort((a1, a2) => a1.startTime - a2.startTime);
|
|
|
|
this.contextEntries.push(contextEntry);
|
2023-02-22 21:08:47 -08:00
|
|
|
}
|
2021-10-12 13:42:50 -08:00
|
|
|
}
|
|
|
|
|
2022-09-26 20:57:05 +02:00
|
|
|
async hasEntry(filename: string): Promise<boolean> {
|
|
|
|
if (!this._zipReader)
|
|
|
|
return false;
|
|
|
|
for (const entry of await this._zipReader.getEntries()) {
|
|
|
|
if (entry.filename === filename)
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
2021-10-12 13:42:50 -08:00
|
|
|
async resourceForSha1(sha1: string): Promise<Blob | undefined> {
|
|
|
|
const entry = this._entries.get('resources/' + sha1);
|
|
|
|
if (!entry)
|
|
|
|
return;
|
|
|
|
const blobWriter = new zipjs.BlobWriter() as zip.BlobWriter;
|
|
|
|
await entry!.getData!(blobWriter);
|
|
|
|
return await blobWriter.getData();
|
|
|
|
}
|
|
|
|
|
|
|
|
storage(): PersistentSnapshotStorage {
|
|
|
|
return this._snapshotStorage!;
|
|
|
|
}
|
|
|
|
|
2023-02-27 22:31:47 -08:00
|
|
|
private _pageEntry(contextEntry: ContextEntry, pageId: string): PageEntry {
|
2021-10-12 13:42:50 -08:00
|
|
|
let pageEntry = this.pageEntries.get(pageId);
|
|
|
|
if (!pageEntry) {
|
|
|
|
pageEntry = {
|
|
|
|
screencastFrames: [],
|
|
|
|
};
|
|
|
|
this.pageEntries.set(pageId, pageEntry);
|
2023-02-27 22:31:47 -08:00
|
|
|
contextEntry.pages.push(pageEntry);
|
2021-10-12 13:42:50 -08:00
|
|
|
}
|
|
|
|
return pageEntry;
|
|
|
|
}
|
|
|
|
|
2023-02-27 22:31:47 -08:00
|
|
|
appendEvent(contextEntry: ContextEntry, line: string) {
|
2021-10-12 13:42:50 -08:00
|
|
|
if (!line)
|
|
|
|
return;
|
|
|
|
const event = this._modernize(JSON.parse(line));
|
2023-02-27 15:29:20 -08:00
|
|
|
if (!event)
|
|
|
|
return;
|
2021-10-12 13:42:50 -08:00
|
|
|
switch (event.type) {
|
|
|
|
case 'context-options': {
|
2023-02-28 16:49:14 -08:00
|
|
|
this._version = event.version;
|
2023-02-27 22:31:47 -08:00
|
|
|
contextEntry.browserName = event.browserName;
|
|
|
|
contextEntry.title = event.title;
|
|
|
|
contextEntry.platform = event.platform;
|
|
|
|
contextEntry.wallTime = event.wallTime;
|
|
|
|
contextEntry.sdkLanguage = event.sdkLanguage;
|
|
|
|
contextEntry.options = event.options;
|
|
|
|
contextEntry.testIdAttributeName = event.testIdAttributeName;
|
2021-10-12 13:42:50 -08:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
case 'screencast-frame': {
|
2023-02-27 22:31:47 -08:00
|
|
|
this._pageEntry(contextEntry, event.pageId).screencastFrames.push(event);
|
2021-10-12 13:42:50 -08:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
case 'action': {
|
2023-02-27 22:31:47 -08:00
|
|
|
contextEntry!.actions.push(event);
|
2021-10-12 13:42:50 -08:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
case 'event': {
|
2023-02-27 22:31:47 -08:00
|
|
|
contextEntry!.events.push(event);
|
2023-02-27 15:29:20 -08:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
case 'object': {
|
2023-02-27 22:31:47 -08:00
|
|
|
contextEntry!.initializers[event.guid] = event.initializer;
|
2021-10-12 13:42:50 -08:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
case 'resource-snapshot':
|
|
|
|
this._snapshotStorage!.addResource(event.snapshot);
|
2023-02-27 22:31:47 -08:00
|
|
|
contextEntry.resources.push(event.snapshot);
|
2021-10-12 13:42:50 -08:00
|
|
|
break;
|
|
|
|
case 'frame-snapshot':
|
|
|
|
this._snapshotStorage!.addFrameSnapshot(event.snapshot);
|
|
|
|
break;
|
|
|
|
}
|
2023-02-27 15:29:20 -08:00
|
|
|
if (event.type === 'action') {
|
2023-02-27 22:31:47 -08:00
|
|
|
contextEntry.startTime = Math.min(contextEntry.startTime, event.startTime);
|
|
|
|
contextEntry.endTime = Math.max(contextEntry.endTime, event.endTime);
|
2023-02-27 15:29:20 -08:00
|
|
|
}
|
|
|
|
if (event.type === 'event') {
|
2023-02-27 22:31:47 -08:00
|
|
|
contextEntry.startTime = Math.min(contextEntry.startTime, event.time);
|
|
|
|
contextEntry.endTime = Math.max(contextEntry.endTime, event.time);
|
2021-10-12 13:42:50 -08:00
|
|
|
}
|
2022-03-31 08:45:45 -08:00
|
|
|
if (event.type === 'screencast-frame') {
|
2023-02-27 22:31:47 -08:00
|
|
|
contextEntry.startTime = Math.min(contextEntry.startTime, event.timestamp);
|
|
|
|
contextEntry.endTime = Math.max(contextEntry.endTime, event.timestamp);
|
2022-03-31 08:45:45 -08:00
|
|
|
}
|
2021-10-12 13:42:50 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
private _modernize(event: any): trace.TraceEvent {
|
|
|
|
if (this._version === undefined)
|
|
|
|
return event;
|
2023-02-28 16:49:14 -08:00
|
|
|
const lastVersion: trace.VERSION = 4;
|
|
|
|
for (let version = this._version; version < lastVersion; ++version)
|
2021-10-12 13:42:50 -08:00
|
|
|
event = (this as any)[`_modernize_${version}_to_${version + 1}`].call(this, event);
|
|
|
|
return event;
|
|
|
|
}
|
|
|
|
|
|
|
|
_modernize_0_to_1(event: any): any {
|
|
|
|
if (event.type === 'action') {
|
|
|
|
if (typeof event.metadata.error === 'string')
|
|
|
|
event.metadata.error = { error: { name: 'Error', message: event.metadata.error } };
|
|
|
|
}
|
|
|
|
return event;
|
|
|
|
}
|
|
|
|
|
|
|
|
_modernize_1_to_2(event: any): any {
|
|
|
|
if (event.type === 'frame-snapshot' && event.snapshot.isMainFrame) {
|
|
|
|
// Old versions had completely wrong viewport.
|
2023-02-27 22:31:47 -08:00
|
|
|
event.snapshot.viewport = this.contextEntries[0]?.options?.viewport || { width: 1280, height: 720 };
|
2021-10-12 13:42:50 -08:00
|
|
|
}
|
|
|
|
return event;
|
|
|
|
}
|
|
|
|
|
|
|
|
_modernize_2_to_3(event: any): any {
|
|
|
|
if (event.type === 'resource-snapshot' && !event.snapshot.request) {
|
|
|
|
// Migrate from old ResourceSnapshot to new har entry format.
|
|
|
|
const resource = event.snapshot;
|
|
|
|
event.snapshot = {
|
|
|
|
_frameref: resource.frameId,
|
|
|
|
request: {
|
|
|
|
url: resource.url,
|
|
|
|
method: resource.method,
|
|
|
|
headers: resource.requestHeaders,
|
|
|
|
postData: resource.requestSha1 ? { _sha1: resource.requestSha1 } : undefined,
|
|
|
|
},
|
|
|
|
response: {
|
|
|
|
status: resource.status,
|
|
|
|
headers: resource.responseHeaders,
|
|
|
|
content: {
|
|
|
|
mimeType: resource.contentType,
|
|
|
|
_sha1: resource.responseSha1,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
_monotonicTime: resource.timestamp,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
return event;
|
|
|
|
}
|
2023-02-27 15:29:20 -08:00
|
|
|
|
|
|
|
_modernize_3_to_4(event: traceV3.TraceEvent): trace.TraceEvent | null {
|
2023-02-28 16:49:14 -08:00
|
|
|
if (event.type !== 'action' && event.type !== 'event') {
|
2023-02-27 15:29:20 -08:00
|
|
|
return event as traceV3.ContextCreatedTraceEvent |
|
|
|
|
traceV3.ScreencastFrameTraceEvent |
|
|
|
|
traceV3.ResourceSnapshotTraceEvent |
|
|
|
|
traceV3.FrameSnapshotTraceEvent;
|
|
|
|
}
|
|
|
|
|
|
|
|
const metadata = event.metadata;
|
|
|
|
if (metadata.internal || metadata.method.startsWith('tracing'))
|
|
|
|
return null;
|
2023-02-28 16:49:14 -08:00
|
|
|
|
|
|
|
if (event.type === 'event') {
|
2023-02-27 15:29:20 -08:00
|
|
|
if (metadata.method === '__create__' && metadata.type === 'ConsoleMessage') {
|
|
|
|
return {
|
|
|
|
type: 'object',
|
|
|
|
class: metadata.type,
|
|
|
|
guid: metadata.params.guid,
|
|
|
|
initializer: metadata.params.initializer,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
return {
|
|
|
|
type: 'event',
|
|
|
|
time: metadata.startTime,
|
|
|
|
class: metadata.type,
|
|
|
|
method: metadata.method,
|
|
|
|
params: metadata.params,
|
|
|
|
pageId: metadata.pageId,
|
|
|
|
};
|
|
|
|
}
|
2023-02-28 16:49:14 -08:00
|
|
|
|
2023-02-27 15:29:20 -08:00
|
|
|
return {
|
|
|
|
type: 'action',
|
|
|
|
callId: metadata.id,
|
|
|
|
startTime: metadata.startTime,
|
|
|
|
endTime: metadata.endTime,
|
|
|
|
apiName: metadata.apiName || metadata.type + '.' + metadata.method,
|
|
|
|
class: metadata.type,
|
|
|
|
method: metadata.method,
|
|
|
|
params: metadata.params,
|
|
|
|
wallTime: metadata.wallTime || Date.now(),
|
|
|
|
log: metadata.log,
|
|
|
|
snapshots: metadata.snapshots,
|
|
|
|
error: metadata.error?.error,
|
|
|
|
result: metadata.result,
|
|
|
|
point: metadata.point,
|
|
|
|
pageId: metadata.pageId,
|
|
|
|
};
|
|
|
|
}
|
2021-10-12 13:42:50 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
export class PersistentSnapshotStorage extends BaseSnapshotStorage {
|
|
|
|
private _entries: Map<string, zip.Entry>;
|
|
|
|
|
|
|
|
constructor(entries: Map<string, zip.Entry>) {
|
|
|
|
super();
|
|
|
|
this._entries = entries;
|
|
|
|
}
|
|
|
|
|
|
|
|
async resourceContent(sha1: string): Promise<Blob | undefined> {
|
|
|
|
const entry = this._entries.get('resources/' + sha1)!;
|
|
|
|
const writer = new zipjs.BlobWriter();
|
|
|
|
await entry.getData!(writer);
|
|
|
|
return writer.getData();
|
|
|
|
}
|
|
|
|
}
|