Merge pull request #6106 from decentraland/release/release-20240226

release: release 20240226

Author: Ludmilafantaniella

browser-interface/.gitignore

@@ -81,6 +81,7 @@ packages/**/*.js.map
 test/**/*.js
 test/**/*.js.map
 dist
+!packages/shared/world/runtime-7/sourcemap/source-map@0.7.4.js
 
 # ============== #
 # Local mappings #

browser-interface/package-lock.json

@@ -65,7 +65,7 @@
     "@dcl/legacy-ecs": "^6.11.11",
     "@dcl/protocol": "1.0.0-7716486147.commit-7433b10",
     "@dcl/rpc": "^1.1.1",
-    "@dcl/scene-runtime": "7.0.6-20231206162622.commit-9ff48a9",
+    "@dcl/scene-runtime": "7.0.6-20240220184109.commit-cf1e4e2",
     "@dcl/schemas": "^9.1.1",
     "@dcl/single-sign-on-client": "^0.1.0",
     "@dcl/urn-resolver": "^2.2.0",

browser-interface/package.json

@@ -0,0 +1,25 @@
+import future from 'fp-future'
+
+export async function injectScript(url: string) {
+  const theFuture = future<Event>()
+  const theScript = document.createElement('script')
+  const persistMessage =
+    'If this error persists, please try emptying the cache of your browser and reloading this page.'
+  theScript.src = url
+  theScript.async = true
+  theScript.type = 'application/javascript'
+  theScript.crossOrigin = 'anonymous'
+  theScript.addEventListener('load', theFuture.resolve)
+  theScript.addEventListener('error', (e) =>
+    theFuture.reject(e.error || new Error(`The script ${url} failed to load.\n${persistMessage}`))
+  )
+  theScript.addEventListener('abort', () =>
+    theFuture.reject(
+      new Error(
+        `Script loading aborted: ${url}.\nThis may be caused because you manually stopped the loading or because of a network error.\n${persistMessage}`
+      )
+    )
+  )
+  document.body.appendChild(theScript)
+  return theFuture
+}

browser-interface/packages/lib/browser/inject-script.ts

@@ -21,6 +21,18 @@ export function registerDevToolsServiceServerImplementation(port: RpcServerPort<
           const [payload] = params as ProtocolMapping.Events['Runtime.exceptionThrown']
 
           if (payload.exceptionDetails.exception) {
+            // If we have the sourcemaps loaded for the scene, then use it for gettin the correct stack trace.
+            if (context.sourcemap && payload.exceptionDetails.exception.value) {
+              try {
+                const error = JSON.parse(payload.exceptionDetails.exception.value)
+                if (error && error.stack) {
+                  const sourcemapError = context.sourcemap.parseError(error)
+                  context.logger.error(sourcemapError)
+                  break
+                }
+              } catch (_e) {}
+            }
+
             context.logger.error(
               payload.exceptionDetails.text,
               payload.exceptionDetails.exception.value || payload.exceptionDetails.exception.unserializableValue

browser-interface/packages/shared/apis/host/DevTools.ts

@@ -7,6 +7,7 @@ import type { RpcSceneControllerServiceDefinition } from 'shared/protocol/decent
 import type { RpcClientModule } from '@dcl/rpc/dist/codegen'
 import { EntityAction } from 'shared/protocol/decentraland/sdk/ecs6/engine_interface_ecs6.gen'
 import { IInternalEngine } from '../../world/runtime-7/engine'
+import { Sourcemap } from '../../world/runtime-7/sourcemap/types'
 
 type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] }
 
@@ -38,4 +39,7 @@ export type PortContext = {
 
   // Internal engine used to store the user avatar's info
   internalEngine: IInternalEngine | undefined
+
+  // Parse sdk7 errors.
+  sourcemap: Sourcemap | undefined
 }

browser-interface/packages/shared/apis/host/context.ts

@@ -12,6 +12,7 @@ import {
   getAssetBundlesBaseUrl,
   PIPE_SCENE_CONSOLE,
   playerHeight,
+  PREVIEW,
   WSS_ENABLED
 } from 'config'
 import { gridToWorld } from 'lib/decentraland/parcels/gridToWorld'
@@ -42,6 +43,7 @@ import { joinBuffers } from 'lib/javascript/uint8arrays'
 import { nativeMsgBridge } from 'unity-interface/nativeMessagesBridge'
 import { _INTERNAL_WEB_TRANSPORT_ALLOC_SIZE } from 'renderer-protocol/transports/webTransport'
 import { createInternalEngine } from './runtime-7/engine'
+import { initSourcemap } from './runtime-7/sourcemap'
 import { forceStopScene } from './parcelSceneManager'
 
 export enum SceneWorkerReadyState {
@@ -194,7 +196,8 @@ export class SceneWorker {
       readFile: this.readFile.bind(this),
       initialEntitiesTick0: Uint8Array.of(),
       hasMainCrdt: false,
-      internalEngine: undefined
+      internalEngine: undefined,
+      sourcemap: undefined
     }
 
     // if the scene metadata has a base parcel, then we set it as the position
@@ -230,7 +233,27 @@ export class SceneWorker {
     }
   }
 
-  async readFile(fileName: string) {
+  async loadSourcemap() {
+    try {
+      // Only sdk7 scenes
+      if (!this.rpcContext.sdk7) return
+
+      // Only preview or production scenes with the DEBUG_MOD or DEBUG_SCENE_LOG param
+      if (!PREVIEW && !DEBUG_SCENE_LOG) return
+
+      const mainFile = PREVIEW
+        ? this.loadableScene.entity.metadata.main
+        : `${this.loadableScene.entity.metadata.main}.map`
+      const file = await this.readFile(mainFile, 'text')
+      if (!file?.content) return
+      return (await initSourcemap(file.content, PREVIEW)) ?? undefined
+    } catch (_) {}
+  }
+
+  async readFile<T extends 'text' | 'arraybuffer' = 'arraybuffer'>(
+    fileName: string,
+    type?: T
+  ): Promise<T extends 'text' ? { hash: string; content: string } : { hash: string; content: Uint8Array }> {
     // filenames are lower cased as per https://adr.decentraland.org/adr/ADR-80
     const normalized = fileName.toLowerCase()
 
@@ -245,7 +268,11 @@ export class SceneWorker {
         const response = await fetch(url)
 
         if (!response.ok) throw new Error(`Error fetching file ${file} from ${url}`)
-        return { hash, content: new Uint8Array(await response.arrayBuffer()) }
+        if (!type || type === 'arraybuffer') {
+          return { hash, content: new Uint8Array(await response.arrayBuffer()) } as any
+        }
+
+        return { hash, content: await response.text() } as any
       }
     }
 
@@ -406,6 +433,7 @@ export class SceneWorker {
         this.metadata.scene.parcels,
         showAsPortableExperience
       )
+      this.rpcContext.sourcemap = await this.loadSourcemap()
     }
     sceneEvents.emit(SCENE_LOAD, signalSceneLoad(this.loadableScene))
   }

browser-interface/packages/shared/world/SceneWorker.ts

@@ -0,0 +1,89 @@
+import { SourceMapConsumerConstructor, Sourcemap } from './types'
+
+import('./source-map@0.7.4.js')
+
+let initialized = false
+declare const globalThis: {
+  sourceMap: { SourceMapConsumer: SourceMapConsumerConstructor }
+}
+
+async function getSourcemap() {
+  if (initialized) return globalThis.sourceMap
+  initialized = true
+
+  if (!global.sourceMap) {
+    return
+  }
+
+  globalThis.sourceMap.SourceMapConsumer.initialize({
+    'lib/mappings.wasm': 'https://unpkg.com/source-map@0.7.4/lib/mappings.wasm'
+  })
+
+  return globalThis.sourceMap
+}
+
+export async function initSourcemap(code: string, inlineSourcemaps: boolean = true): Promise<Sourcemap | void> {
+  const sourceMap = await getSourcemap()
+  if (!sourceMap) return
+  function decodeSourcemap(): any {
+    // External source-maps .js.map file
+    if (!inlineSourcemaps) {
+      return code
+    }
+    // Inline sourcemap, find the source-map inside the file encoded in a base64
+    const inlineSourceMapComment = code.match(/\/\/# sourceMappingURL=data:application\/json;base64,(.*)/)
+    if (!inlineSourceMapComment || !inlineSourceMapComment[1]) return
+    const decodedSourceMap = Buffer.from(inlineSourceMapComment[1], 'base64').toString('utf-8')
+    return decodedSourceMap
+  }
+  const sourcemapCode = decodeSourcemap()
+  if (!sourcemapCode) return
+  const sourcemapConsumer = await new sourceMap.SourceMapConsumer(sourcemapCode)
+
+  /**
+   * Because the scene-runtime uses an eval with a Function, it generates an offset of :2
+   * in every error. So we need to fix that in the error code stack.
+   */
+  function adjustStackTrace(stackTrace: string) {
+    const lines = stackTrace.split('\n')
+    const adjustedLines = lines.map((line) => {
+      // Check if the line contains a line number
+      const match = line.match(/:(\d+):(\d+)\)$/)
+      if (match) {
+        const lineNumber = parseInt(match[1], 10)
+        const adjustedLineNumber = lineNumber - 2 // Add 2 to each line number
+        return line.replace(`:${lineNumber}:`, `:${adjustedLineNumber}:`)
+      }
+      return line
+    })
+    return adjustedLines.join('\n')
+  }
+
+  function parseError(error: Error) {
+    if (!error.stack || !sourcemapConsumer) {
+      return error
+    }
+    const stack = adjustStackTrace(error.stack.toString()).split('\n')
+    const mappedStackTrace = stack.map((frame, index) => {
+      // Show the error message
+      if (index === 0) return frame
+
+      // Fix all anonymous errors
+      const match = frame.match(/<anonymous>:(\d+):(\d+)/)
+      if (match) {
+        const [, line, column] = match
+        const originalPosition = sourcemapConsumer.originalPositionFor({
+          line: parseInt(line, 10),
+          column: parseInt(column, 10)
+        })
+        if (originalPosition.source) {
+          const fileName = ` (${originalPosition.source}:${originalPosition.line}:${originalPosition.column})`
+          return frame.replace(/ \(eval.*$/, fileName)
+        }
+      }
+      return ''
+    })
+    return mappedStackTrace.join('\n')
+  }
+  return { parseError }
+}

browser-interface/packages/shared/world/runtime-7/sourcemap/index.ts

@@ -0,0 +1,34 @@
+export type RawSourceMap = {
+  version: number
+  sources: string[]
+  names: string[]
+  sourceRoot?: string
+  sourcesContent?: string[]
+  mappings: string
+  file: string
+}
+export type BasicSourceMapConsumer = SourceMapConsumer & {
+  file: string
+  sourceRoot: string
+  sources: string[]
+  sourcesContent: string[]
+}
+
+export type SourceMapConsumerConstructor = {
+  prototype: SourceMapConsumer
+  initialize(keys: { [key: string]: string }): void
+  new (rawSourceMap: RawSourceMap, sourceMapUrl?: string): Promise<BasicSourceMapConsumer>
+}
+
+export type SourceMapConsumer = {
+  originalPositionFor(generatedPosition: { line: number; column: number }): {
+    source: string | null
+    line: number | null
+    column: number | null
+    name: string | null
+  }
+}
+
+export type Sourcemap = {
+  parseError(error: Error): string | Error
+}