diff --git a/packages/trace-viewer/src/sw/main.ts b/packages/trace-viewer/src/sw/main.ts
index 6fcb08daa7..7ae6fe43cd 100644
--- a/packages/trace-viewer/src/sw/main.ts
+++ b/packages/trace-viewer/src/sw/main.ts
@@ -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), {
diff --git a/packages/trace-viewer/src/sw/traceModelBackends.ts b/packages/trace-viewer/src/sw/traceModelBackends.ts
index 19c5fc2dee..053b3b721d 100644
--- a/packages/trace-viewer/src/sw/traceModelBackends.ts
+++ b/packages/trace-viewer/src/sw/traceModelBackends.ts
@@ -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;
+  }
+}
\ No newline at end of file